Entity Datatable UI & Wizard Screens (#2417)

app/global-translations/locale-en.json

@@ -1801,7 +1801,7 @@
   "label.heading.routingcode": "Routing Code",
   "label.heading.receiptnumber": "Receipt#",
   "label.heading.banknumber": "Bank#",
-  "label.heading.savingapplication": "Saving Application",
+  "label.heading.savingapplication": "New Saving Application",
   "label.heading.repaymentsevery": "Repayments Every",
   "label.heading.fieldofficer": "Field Officer",
   "label.heading.accountdetail": "Account Detail",
@@ -1840,7 +1840,7 @@
   "label.heading.withholdtax": "Is withhold tax Applicable",
   "label.heading.withholdtaxgroup": "Withhold Tax group",
   "label.heading.marketprice": "Market Price",
-  "label.heading.shareapplication": "Shares Application",
+  "label.heading.shareapplication": "New Shares Application",
   "label.heading.approveshareaccount": "Approve Share Account",
   "label.heading.rejectshareaccount": "Reject Share Account",
   "label.heading.activateshareaccount": "Activate Share Account",
@@ -2955,7 +2955,7 @@
   "label.anchor.savingproducts": "Savings Products",
   "label.anchor.shareproducts": "Share Products",
   "label.anchor.createshareproduct": "Create Share Product",
-  "label.anchor.editshareproduct": "Edit Share Prodct",
+  "label.anchor.editshareproduct": "Edit Share Product",
   "label.anchor.dividends": "Dividends",
   "label.anchor.dividendlisting": "Dividend Details",
   "label.anchor.createsavingproduct": "Create Savings Product",

app/scripts/controllers/client/ClientActionsController.js

@@ -5,8 +5,52 @@
             scope.action = routeParams.action || "";
             scope.clientId = routeParams.id;
             scope.formData = {};
+            scope.entityformData = {};
+            scope.entityformData.datatables = {};
             scope.restrictDate = new Date();
             scope.taskPermissionName = 'ALL_FUNCTIONS';
+            scope.submittedDatatables = [];
+            var submitStatus = [];
+
+            scope.RequestEntities = function(entity,status){
+                resourceFactory.entityDatatableChecksResource.getAll({limit:-1},function (response) {
+                    scope.entityDatatableChecks = _.filter(response.pageItems , function(datatable){
+                        var AllTables = (datatable.entity == entity && datatable.status.value == status);
+                        return AllTables;
+                    });
+                    scope.entityDatatableChecks = _.pluck(scope.entityDatatableChecks,'datatableName');
+                    scope.datatables = [];
+                    var k=0;
+                    _.each(scope.entityDatatableChecks,function(entitytable) {
+                        resourceFactory.DataTablesResource.getTableDetails({datatablename:entitytable,entityId: routeParams.id, genericResultSet: 'true'}, function (data) {
+                            data.registeredTableName = entitytable;
+                            var colName = data.columnHeaders[0].columnName;
+                            if (colName == 'id') {
+                                data.columnHeaders.splice(0, 1);
+                            }
+
+                            colName = data.columnHeaders[0].columnName;
+                            if (colName == 'client_id' || colName == 'office_id' || colName == 'group_id' || colName == 'center_id' || colName == 'loan_id' || colName == 'savings_account_id') {
+                                data.columnHeaders.splice(0, 1);
+                                scope.isCenter = (colName == 'center_id') ? true : false;
+                            }
+
+                            data.noData = (data.data.length == 0);
+                            if(data.noData){
+                                scope.datatables.push(data);
+                                scope.entityformData.datatables[k] = {data:{}};
+                                submitStatus[k] = "save";
+                                _.each(data.columnHeaders,function(Header){
+                                    scope.entityformData.datatables[k].data[Header.columnName] = "";
+                                });
+                                k++;
+                                scope.isEntityDatatables = true;
+                            }
+                        });
+                    });
+
+                });
+            };
 
             // Transaction UI Related
 
@@ -24,6 +68,7 @@
                     scope.showActivationDateField = true;
                     scope.showDateField = false;
                     scope.taskPermissionName = 'ACTIVATE_CLIENT';
+                    scope.RequestEntities('m_client','ACTIVATE');
                     break;
                 case "assignstaff":
                     scope.breadcrumbName = 'label.anchor.assignstaff';
@@ -50,6 +95,7 @@
                         scope.formData.reasonId = scope.narrations[0].id;
                     });
                     scope.taskPermissionName = 'CLOSE_CLIENT';
+                    scope.RequestEntities('m_client','CLOSE');
                     break;
                 case "delete":
                     scope.breadcrumbName = 'label.anchor.delete';
@@ -170,9 +216,104 @@
                     break;
 
             }
+
+            function asyncLoop(iterations, func, callback) {
+                var index = 0;
+                var done = false;
+                var loop = {
+                    next: function() {
+                        if (done) {
+                            return;
+                        }
+
+                        if (index < iterations) {
+                            index++;
+                            func(loop);
+
+                        } else {
+                            done = true;
+                            callback();
+                        }
+                    },
+
+                    iteration: function() {
+                        return index - 1;
+                    },
+
+                    break: function() {
+                        done = true;
+                    }
+                };
+                loop.next();
+                return loop;
+            }
+
+            scope.fieldType = function (type) {
+                var fieldType = "";
+                if (type) {
+                    if (type == 'CODELOOKUP' || type == 'CODEVALUE') {
+                        fieldType = 'SELECT';
+                    } else if (type == 'DATE') {
+                        fieldType = 'DATE';
+                    } else if (type == 'DATETIME') {
+                        fieldType = 'DATETIME';
+                    } else if (type == 'BOOLEAN') {
+                        fieldType = 'BOOLEAN';
+                    } else {
+                        fieldType = 'TEXT';
+                    }
+                }
+                return fieldType;
+            };
+
+            scope.submitDatatable = function(){
+                if(scope.datatables) {
+                    asyncLoop(Object.keys(scope.entityformData.datatables).length,function(loop){
+                        var cnt = loop.iteration();
+                        var formData = scope.entityformData.datatables[cnt];
+                        formData.registeredTableName = scope.datatables[cnt].registeredTableName;
+
+                        var params = {
+                            datatablename: formData.registeredTableName,
+                            entityId: routeParams.id,
+                            genericResultSet: 'true'
+                        };
+
+                        angular.extend(formData.data,{dateFormat: scope.df, locale: scope.optlang.code});
+
+                        _.each(formData.data, function (columnHeader) {
+                            if (columnHeader.dateType) {
+                                columnHeader = dateFilter(columnHeader.dateType.date, params.dateFormat);
+                            }
+                            else if (columnHeader.dateTimeType) {
+                                columnHeader = dateFilter(columnHeader.columnName.date, scope.df) + " " + dateFilter(columnHeader.columnName.time, scope.tf);
+                            }
+                        });
+
+                        var action = submitStatus[cnt];
+                        resourceFactory.DataTablesResource[action](params, formData.data, function (data) {
+
+                            submitStatus[cnt] = "update";
+                            scope.submittedDatatables.push(scope.datatables[cnt].registeredTableName);
+                            loop.next();
+
+                        },function(){
+                            rootScope.errorDetails[0].push({datatable:scope.datatables[cnt].registeredTableName});
+                            loop.break();
+                        });
+
+                    },function(){
+                        scope.submit();
+                    });
+                }
+                else{
+                    scope.submit();
+                }
+            };
+
             scope.cancel = function () {
                 location.path('/viewclient/' + routeParams.id);
-            }
+            };
 
             scope.submit = function () {
                 this.formData.locale = scope.optlang.code;

app/scripts/controllers/groups/CreateGroupController.js

@@ -159,10 +159,10 @@
             };
 
             scope.submit = function () {
-                if (WizardHandler.wizard().getCurrentStep() != scope.noOfTabs) {
-                    WizardHandler.wizard().next();
-                    return;
-                }
+                // if (WizardHandler.wizard().getCurrentStep() != scope.noOfTabs) {
+                //     WizardHandler.wizard().next();
+                //     return;
+                // }
                 for (var i in scope.addedClients) {
                     scope.formData.clientMembers[i] = scope.addedClients[i].id;
                 }

app/scripts/controllers/groups/EditGroupController.js

@@ -4,6 +4,102 @@
             scope.first = {};
             scope.managecode = routeParams.managecode;
             scope.restrictDate = new Date();
+            scope.entityformData = {};
+            scope.entityformData.datatables={};
+            scope.submittedDatatables = [];
+            var submitStatus = [];
+
+            scope.RequestEntities = function(entity,status){
+                resourceFactory.entityDatatableChecksResource.getAll({limit:-1},function (response) {
+                    scope.entityDatatableChecks = _.filter(response.pageItems , function(datatable){
+                        var AllTables = (datatable.entity == entity && datatable.status.value == status);
+                        return AllTables;
+                    });
+                    scope.entityDatatableChecks = _.pluck(scope.entityDatatableChecks,'datatableName');
+                    scope.datatables = [];
+                    var k=0;
+                    _.each(scope.entityDatatableChecks,function(entitytable) {
+                        resourceFactory.DataTablesResource.getTableDetails({datatablename:entitytable,entityId: routeParams.id, genericResultSet: 'true'}, function (data) {
+                            data.registeredTableName = entitytable;
+                            var colName = data.columnHeaders[0].columnName;
+                            if (colName == 'id') {
+                                data.columnHeaders.splice(0, 1);
+                            }
+
+                            colName = data.columnHeaders[0].columnName;
+                            if (colName == 'client_id' || colName == 'office_id' || colName == 'group_id' || colName == 'center_id' || colName == 'loan_id' || colName == 'savings_account_id') {
+                                data.columnHeaders.splice(0, 1);
+                                scope.isCenter = (colName == 'center_id') ? true : false;
+                            }
+
+                            data.noData = (data.data.length == 0);
+                            if(data.noData){
+                                scope.datatables.push(data);
+                                scope.entityformData.datatables[k] = {data:{}};
+                                submitStatus[k] = "save";
+                                _.each(data.columnHeaders,function(Header){
+                                    scope.entityformData.datatables[k].data[Header.columnName] = "";
+                                });
+                                k++;
+                                scope.isEntityDatatables = true;
+                            }
+                        });
+                    });
+
+                });
+            };
+
+            function asyncLoop(iterations, func, callback) {
+                var index = 0;
+                var done = false;
+                var loop = {
+                    next: function() {
+                        if (done) {
+                            return;
+                        }
+
+                        if (index < iterations) {
+                            index++;
+                            func(loop);
+
+                        } else {
+                            done = true;
+                            callback();
+                        }
+                    },
+
+                    iteration: function() {
+                        return index - 1;
+                    },
+
+                    break: function() {
+                        done = true;
+                    }
+                };
+                loop.next();
+                return loop;
+            }
+
+            scope.fieldType = function (type) {
+                var fieldType = "";
+                if (type) {
+                    if (type == 'CODELOOKUP' || type == 'CODEVALUE') {
+                        fieldType = 'SELECT';
+                    } else if (type == 'DATE') {
+                        fieldType = 'DATE';
+                    } else if (type == 'DATETIME') {
+                        fieldType = 'DATETIME';
+                    } else if (type == 'BOOLEAN') {
+                        fieldType = 'BOOLEAN';
+                    } else {
+                        fieldType = 'TEXT';
+                    }
+                }
+                return fieldType;
+            };
+
+            scope.RequestEntities('m_group','ACTIVATE');
+
             resourceFactory.groupResource.get({groupId: routeParams.id, associations: 'clientMembers', template: 'true',staffInSelectedOfficeOnly:true}, function (data) {
                 scope.editGroup = data;
                 scope.formData = {
@@ -34,6 +130,51 @@
                 });
             };
 
+            scope.submitDatatable = function(){
+                if(scope.datatables) {
+                    asyncLoop(Object.keys(scope.entityformData.datatables).length,function(loop){
+                        var cnt = loop.iteration();
+                        var formData = scope.entityformData.datatables[cnt];
+                        formData.registeredTableName = scope.datatables[cnt].registeredTableName;
+
+                        var params = {
+                            datatablename: formData.registeredTableName,
+                            entityId: routeParams.id,
+                            genericResultSet: 'true'
+                        };
+
+                        angular.extend(formData.data,{dateFormat: scope.df, locale: scope.optlang.code});
+
+                        _.each(formData.data, function (columnHeader) {
+                            if (columnHeader.dateType) {
+                                columnHeader = dateFilter(columnHeader.dateType.date, params.dateFormat);
+                            }
+                            else if (columnHeader.dateTimeType) {
+                                columnHeader = dateFilter(columnHeader.columnName.date, scope.df) + " " + dateFilter(columnHeader.columnName.time, scope.tf);
+                            }
+                        });
+
+                        var action = submitStatus[cnt];
+                        resourceFactory.DataTablesResource[action](params, formData.data, function (data) {
+
+                            submitStatus[cnt] = "update";
+                            scope.submittedDatatables.push(scope.datatables[cnt].registeredTableName);
+                            loop.next();
+
+                        },function(){
+                            rootScope.errorDetails[0].push({datatable:scope.datatables[cnt].registeredTableName});
+                            loop.break();
+                        });
+
+                    },function(){
+                        scope.activate();
+                    });
+                }
+                else{
+                    scope.activate();
+                }
+            };
+
             scope.activate = function () {
                 var reqDate = dateFilter(scope.first.date, scope.df);
                 var newActivation = new Object();

app/scripts/controllers/loanAccount/LoanAccountActionsController.js

@@ -1,10 +1,11 @@
 (function (module) {
     mifosX.controllers = _.extend(module, {
-        LoanAccountActionsController: function (scope, resourceFactory, location, routeParams, dateFilter) {
+        LoanAccountActionsController: function (scope, rootScope, resourceFactory, location, routeParams, dateFilter) {
 
             scope.action = routeParams.action || "";
             scope.accountId = routeParams.id;
             scope.formData = {};
+            scope.entityformData = {datatables:{}};
             scope.showDateField = true;
             scope.showNoteField = true;
             scope.showAmountField = false;
@@ -13,10 +14,101 @@
             scope.isTransaction = false;
             scope.showPaymentDetails = false;
             scope.paymentTypes = [];
-            scope.expectedDisbursementDate = [];
+            scope.form = {};
+            scope.form.expectedDisbursementDate = [];
             scope.disbursementDetails = [];
             scope.showTrancheAmountTotal = 0;
             scope.processDate = false;
+            scope.submittedDatatables = [];
+            var submitStatus = [];
+
+            rootScope.RequestEntities = function(entity,status,productId){
+                resourceFactory.entityDatatableChecksResource.getAll({limit:-1},function (response) {
+                    scope.entityDatatableChecks = _.filter(response.pageItems , function(datatable){
+                        var specificProduct = (datatable.entity == entity && datatable.status.value == status && datatable.productId == productId);
+                        var AllProducts = (datatable.entity == entity && datatable.status.value == status);
+                        return (datatable.productId?specificProduct:AllProducts);
+                    });
+                    scope.entityDatatableChecks = _.pluck(scope.entityDatatableChecks,'datatableName');
+                    scope.datatables = [];
+                    var k=0;
+                    _.each(scope.entityDatatableChecks,function(entitytable) {
+                        resourceFactory.DataTablesResource.getTableDetails({datatablename:entitytable,entityId: routeParams.id, genericResultSet: 'true'}, function (data) {
+                            data.registeredTableName = entitytable;
+                            var colName = data.columnHeaders[0].columnName;
+                            if (colName == 'id') {
+                                data.columnHeaders.splice(0, 1);
+                            }
+
+                            colName = data.columnHeaders[0].columnName;
+                            if (colName == 'client_id' || colName == 'office_id' || colName == 'group_id' || colName == 'center_id' || colName == 'loan_id' || colName == 'savings_account_id') {
+                                data.columnHeaders.splice(0, 1);
+                                scope.isCenter = (colName == 'center_id') ? true : false;
+                            }
+
+
+                            data.noData = (data.data.length == 0);
+                            if(data.noData){
+                                scope.datatables.push(data);
+                                scope.entityformData.datatables[k] = {data:{}};
+                                submitStatus[k] = "save";
+                                _.each(data.columnHeaders,function(Header){
+                                    scope.entityformData.datatables[k].data[Header.columnName] = "";
+                                });
+                                k++;
+                                scope.isEntityDatatables = true;
+                            }
+                        });
+
+
+                    });
+
+                });
+            };
+
+            scope.fetchEntities = function(entity,status,productId){
+                if(!productId){
+                    resourceFactory.LoanAccountResource.getLoanAccountDetails({loanId: routeParams.id}, function (data) {
+                        scope.productId = data.loanProductId;
+                        rootScope.RequestEntities(entity,status,scope.productId);
+                    });
+                }
+                else{
+                   rootScope.RequestEntities(entity,status,productId);
+                }
+            };
+
+            //Stack overflow
+            function asyncLoop(iterations, func, callback) {
+                var index = 0;
+                var done = false;
+                var loop = {
+                    next: function() {
+                        if (done) {
+                            return;
+                        }
+
+                        if (index < iterations) {
+                            index++;
+                            func(loop);
+
+                        } else {
+                            done = true;
+                            callback();
+                        }
+                    },
+
+                    iteration: function() {
+                        return index - 1;
+                    },
+
+                    break: function() {
+                        done = true;
+                    }
+                };
+                loop.next();
+                return loop;
+            }
 
             switch (scope.action) {
                 case "approve":
@@ -31,7 +123,8 @@
                         scope.formData.approvedLoanAmount =  data.approvalAmount;
                     });
                     resourceFactory.LoanAccountResource.getLoanAccountDetails({loanId: routeParams.id, associations: 'multiDisburseDetails'}, function (data) {
-                        scope.expectedDisbursementDate = new Date(data.timeline.expectedDisbursementDate);
+                        scope.form.expectedDisbursementDate = new Date(data.timeline.expectedDisbursementDate);
+                        scope.productId = data.loanProductId;
                         if(data.disbursementDetails != ""){
                             scope.disbursementDetails = data.disbursementDetails;
                             scope.approveTranches = true;
@@ -41,6 +134,7 @@
                             scope.disbursementDetails[i].principal = data.disbursementDetails[i].principal;
                             scope.showTrancheAmountTotal += Number(data.disbursementDetails[i].principal) ;
                         }
+                        scope.fetchEntities('m_loan','APPROVE',scope.productId);
                     });
                     break;
                 case "reject":
@@ -49,6 +143,7 @@
                     scope.modelName = 'rejectedOnDate';
                     scope.formData[scope.modelName] = new Date();
                     scope.taskPermissionName = 'REJECT_LOAN';
+                    scope.fetchEntities('m_loan','REJECTED');
                     break;
                 case "withdrawnByApplicant":
                     scope.title = 'label.heading.withdrawloanaccount';
@@ -56,6 +151,7 @@
                     scope.modelName = 'withdrawnOnDate';
                     scope.formData[scope.modelName] = new Date();
                     scope.taskPermissionName = 'WITHDRAW_LOAN';
+                    scope.fetchEntities('m_loan','WITHDRAWN');
                     break;
                 case "undoapproval":
                     scope.title = 'label.heading.undoapproveloanaccount';
@@ -86,6 +182,7 @@
                     scope.isTransaction = true;
                     scope.showAmountField = true;
                     scope.taskPermissionName = 'DISBURSE_LOAN';
+                    scope.fetchEntities('m_loan','DISBURSE');
                     break;
                 case "disbursetosavings":
                     scope.modelName = 'actualDisbursementDate';
@@ -167,6 +264,7 @@
                     scope.title = 'label.heading.writeoffloanaccount';
                     scope.labelName = 'label.input.writeoffondate';
                     scope.taskPermissionName = 'WRITEOFF_LOAN';
+                    scope.fetchEntities('m_loan','WRITE_OFF');
                     break;
                 case "close-rescheduled":
                     scope.modelName = 'transactionDate';
@@ -289,7 +387,7 @@
                     resourceFactory.LoanAccountResource.getLoanAccountDetails({loanId: routeParams.id, associations: 'multiDisburseDetails'}, function (data) {
                         scope.showEditDisburseDate = true;
                         scope.formData.approvedLoanAmount = data.approvedPrincipal;
-                        scope.expectedDisbursementDate = new Date(data.timeline.expectedDisbursementDate);
+                        scope.form.expectedDisbursementDate = new Date(data.timeline.expectedDisbursementDate);
                         for(var i in data.disbursementDetails){
                             if(routeParams.disbursementId == data.disbursementDetails[i].id){
                                 scope.formData.updatedExpectedDisbursementDate = new Date(data.disbursementDetails[i].expectedDisbursementDate);
@@ -324,7 +422,7 @@
                     resourceFactory.LoanAccountResource.getLoanAccountDetails({loanId: routeParams.id, associations: 'multiDisburseDetails'}, function (data) {
                         scope.addDisburseDetails = true;
                         scope.formData.approvedLoanAmount = data.approvedPrincipal;
-                        scope.expectedDisbursementDate = new Date(data.timeline.expectedDisbursementDate);
+                        scope.form.expectedDisbursementDate = new Date(data.timeline.expectedDisbursementDate);
 
                         if(data.disbursementDetails != ""){
                             scope.disbursementDetails = data.disbursementDetails;
@@ -347,7 +445,7 @@
                     resourceFactory.LoanAccountResource.getLoanAccountDetails({loanId: routeParams.id, associations: 'multiDisburseDetails'}, function (data) {
                         scope.deleteDisburseDetails = true;
                         scope.formData.approvedLoanAmount = data.approvedPrincipal;
-                        scope.expectedDisbursementDate = new Date(data.timeline.expectedDisbursementDate);
+                        scope.form.expectedDisbursementDate = new Date(data.timeline.expectedDisbursementDate);
                         if(data.disbursementDetails != ""){
                             scope.disbursementDetails = data.disbursementDetails;
                         }
@@ -392,7 +490,7 @@
                     params.command = "recoverGuarantees";
                 }
                 if(scope.action == "approve"){
-                    this.formData.expectedDisbursementDate = dateFilter(scope.expectedDisbursementDate, scope.df);
+                    this.formData.expectedDisbursementDate = dateFilter(scope.form.expectedDisbursementDate, scope.df);
                     if(scope.disbursementDetails != null) {
                         this.formData.disbursementData = [];
                         for (var i in  scope.disbursementDetails) {
@@ -403,6 +501,7 @@
                                 loanChargeId : scope.disbursementDetails[i].loanChargeId
                             });
                         }
+                        console.log("DISBURSEMENT DATA", this.formData.expectedDisbursementDate);
                     }
                     if(scope.formData.approvedLoanAmount == null){
                         scope.formData.approvedLoanAmount = scope.showTrancheAmountTotal;
@@ -454,7 +553,7 @@
                     }
                     this.formData.disbursementData = [];
                     this.formData.updatedExpectedDisbursementDate = dateFilter(scope.formData.updatedExpectedDisbursementDate, scope.df);
-                    this.formData.expectedDisbursementDate = dateFilter(scope.expectedDisbursementDate, scope.df);
+                    this.formData.expectedDisbursementDate = dateFilter(scope.form.expectedDisbursementDate, scope.df);
 
                     for (var i in  scope.disbursementDetails) {
                         this.formData.disbursementData.push({
@@ -478,7 +577,7 @@
                             });
                     }
 
-                    this.formData.expectedDisbursementDate = dateFilter(scope.expectedDisbursementDate, scope.df);
+                    this.formData.expectedDisbursementDate = dateFilter(scope.form.expectedDisbursementDate, scope.df);
                     resourceFactory.LoanAddTranchesResource.update({loanId: routeParams.id}, this.formData, function (data) {
                         location.path('/viewloanaccount/' + data.loanId);
                     });
@@ -490,15 +589,83 @@
                 } else {
                     params.loanId = scope.accountId;
                     resourceFactory.LoanAccountResource.save(params, this.formData, function (data) {
+
                         location.path('/viewloanaccount/' + data.loanId);
                     });
                 }
             };
 
+             scope.submitDatatable = function(){
+                if(scope.datatables) {
+                    asyncLoop(Object.keys(scope.entityformData.datatables).length,function(loop){
+                            var cnt = loop.iteration();
+                            var formData = scope.entityformData.datatables[cnt];
+                            formData.registeredTableName = scope.datatables[cnt].registeredTableName;
+
+                            var params = {
+                                datatablename: formData.registeredTableName,
+                                entityId: routeParams.id,
+                                genericResultSet: 'true'
+                            };
+
+                            angular.extend(formData.data,{dateFormat: scope.df, locale: scope.optlang.code});
+
+                            _.each(formData.data, function (columnHeader) {
+                                if (columnHeader.dateType) {
+                                    columnHeader = dateFilter(columnHeader.dateType.date, params.dateFormat);
+                                }
+                                else if (columnHeader.dateTimeType) {
+                                    columnHeader = dateFilter(columnHeader.columnName.date, scope.df) + " " + dateFilter(columnHeader.columnName.time, scope.tf);
+                                }
+                            });
+
+                            var action = submitStatus[cnt];
+                            resourceFactory.DataTablesResource[action](params, formData.data, function (data) {
+
+                                submitStatus[cnt] = "update";
+                                scope.submittedDatatables.push(scope.datatables[cnt].registeredTableName);
+                                loop.next();
+
+                            },function(){
+                                rootScope.errorDetails[0].push({datatable:scope.datatables[cnt].registeredTableName});
+                                loop.break();
+                            });
+
+                    },function(){
+                            scope.submit();
+                    });
+                }
+                else{
+                    scope.submit();
+                }
+            };
+
             scope.$watch('formData.transactionDate',function(){
                 scope.onDateChange();
              });
 
+
+
+            scope.fieldType = function (type) {
+                var fieldType = "";
+                if (type) {
+                    if (type == 'CODELOOKUP' || type == 'CODEVALUE') {
+                        fieldType = 'SELECT';
+                    } else if (type == 'DATE') {
+                        fieldType = 'DATE';
+                    } else if (type == 'DATETIME') {
+                        fieldType = 'DATETIME';
+                    } else if (type == 'BOOLEAN') {
+                        fieldType = 'BOOLEAN';
+                    } else {
+                        fieldType = 'TEXT';
+                    }
+                }
+                return fieldType;
+            };
+
+
+
             scope.onDateChange = function(){
                 if(scope.processDate) {
                     var params = {};
@@ -519,7 +686,7 @@
             };
         }
     });
-    mifosX.ng.application.controller('LoanAccountActionsController', ['$scope', 'ResourceFactory', '$location', '$routeParams', 'dateFilter', mifosX.controllers.LoanAccountActionsController]).run(function ($log) {
+    mifosX.ng.application.controller('LoanAccountActionsController', ['$scope','$rootScope', 'ResourceFactory', '$location', '$routeParams', 'dateFilter', mifosX.controllers.LoanAccountActionsController]).run(function ($log) {
         $log.info("LoanAccountActionsController initialized");
     });
 }(mifosX.controllers || {}));

app/scripts/controllers/loanAccount/NewLoanAccAppController.js

@@ -6,6 +6,7 @@
             scope.groupId = routeParams.groupId;
             scope.restrictDate = new Date();
             scope.formData = {};
+            scope.loandetails = {};
             scope.chargeFormData = {}; //For charges
             scope.collateralFormData = {}; //For collaterals
             scope.inparams = {resourceType: 'template', activeOnly: 'true'};
@@ -20,6 +21,7 @@
             scope.loanApp = "LoanApp";
             scope.customSteps = [];
             scope.tempDataTables = [];
+            scope.disabled = true;
 
             scope.date.first = new Date();
 
@@ -48,7 +50,6 @@
 
             resourceFactory.loanResource.get(scope.inparams, function (data) {
                 scope.products = data.productOptions;
-                scope.datatables = data.datatables;
 
                 if (data.clientName) {
                     scope.clientName = data.clientName;
@@ -56,12 +57,11 @@
                 if (data.group) {
                     scope.groupName = data.group.name;
                 }
-                scope.handleDatatables(scope.datatables);
             });
 
             scope.loanProductChange = function (loanProductId) {
-                _.isUndefined(scope.datatables) ? scope.tempDataTables = [] : scope.tempDataTables = scope.datatables;
-                WizardHandler.wizard().removeSteps(1, scope.tempDataTables.length);
+                // _.isUndefined(scope.datatables) ? scope.tempDataTables = [] : scope.tempDataTables = scope.datatables;
+                // WizardHandler.wizard().removeSteps(1, scope.tempDataTables.length);
                 scope.inparams.productId = loanProductId;
                 // scope.datatables = [];
                 resourceFactory.loanResource.get(scope.inparams, function (data) {
@@ -69,6 +69,7 @@
                     scope.previewClientLoanAccInfo();
                     scope.datatables = data.datatables;
                     scope.handleDatatables(scope.datatables);
+                    scope.disabled = false;
                 });
 
                 resourceFactory.loanResource.get({resourceType: 'template', templateType: 'collateral', productId: loanProductId, fields: 'id,loanCollateralOptions'}, function (data) {
@@ -135,20 +136,26 @@
                 scope.formData.principal = scope.loanaccountinfo.principal;
                 scope.formData.loanTermFrequency = scope.loanaccountinfo.termFrequency;
                 scope.formData.loanTermFrequencyType = scope.loanaccountinfo.termPeriodFrequencyType.id;
+                scope.loandetails.loanTermFrequencyValue = scope.loanaccountinfo.termPeriodFrequencyType.value;
                 scope.formData.numberOfRepayments = scope.loanaccountinfo.numberOfRepayments;
                 scope.formData.repaymentEvery = scope.loanaccountinfo.repaymentEvery;
                 scope.formData.repaymentFrequencyType = scope.loanaccountinfo.repaymentFrequencyType.id;
+                scope.loandetails.repaymentFrequencyValue = scope.loanaccountinfo.repaymentFrequencyType.value;
                 scope.formData.interestRatePerPeriod = scope.loanaccountinfo.interestRatePerPeriod;
                 scope.formData.amortizationType = scope.loanaccountinfo.amortizationType.id;
                 scope.formData.isEqualAmortization = scope.loanaccountinfo.isEqualAmortization;
+                scope.loandetails.amortizationValue = scope.loanaccountinfo.amortizationType.value;
                 scope.formData.interestType = scope.loanaccountinfo.interestType.id;
+                scope.loandetails.interestValue = scope.loanaccountinfo.interestType.value;
                 scope.formData.interestCalculationPeriodType = scope.loanaccountinfo.interestCalculationPeriodType.id;
+                scope.loandetails.interestCalculationPeriodValue = scope.loanaccountinfo.interestCalculationPeriodType.value;
                 scope.formData.allowPartialPeriodInterestCalcualtion = scope.loanaccountinfo.allowPartialPeriodInterestCalcualtion;
                 scope.formData.inArrearsTolerance = scope.loanaccountinfo.inArrearsTolerance;
                 scope.formData.graceOnPrincipalPayment = scope.loanaccountinfo.graceOnPrincipalPayment;
                 scope.formData.graceOnInterestPayment = scope.loanaccountinfo.graceOnInterestPayment;
                 scope.formData.graceOnArrearsAgeing = scope.loanaccountinfo.graceOnArrearsAgeing;
                 scope.formData.transactionProcessingStrategyId = scope.loanaccountinfo.transactionProcessingStrategyId;
+                scope.loandetails.transactionProcessingStrategyValue = scope.formValue(scope.loanaccountinfo.transactionProcessingStrategyOptions,scope.formData.transactionProcessingStrategyId,'id','name');
                 scope.formData.graceOnInterestCharged = scope.loanaccountinfo.graceOnInterestCharged;
                 scope.formData.fixedEmiAmount = scope.loanaccountinfo.fixedEmiAmount;
                 scope.formData.maxOutstandingLoanBalance = scope.loanaccountinfo.maxOutstandingLoanBalance;
@@ -163,7 +170,23 @@
                 if(scope.loanaccountinfo.isLoanProductLinkedToFloatingRate) {
                     scope.formData.isFloatingInterestRate = false ;
                 }
-            }
+
+                scope.loandetails = angular.copy(scope.formData);
+                scope.loandetails.productName = scope.formValue(scope.products,scope.formData.productId,'id','name');
+            };
+
+            scope.$watch('formData',function(newVal){
+                scope.loandetails = angular.extend(scope.loandetails,newVal);
+            },true);
+
+            scope.formValue = function(array,model,findattr,retAttr){
+                findattr = findattr ? findattr : 'id';
+                retAttr = retAttr ? retAttr : 'value';
+                console.log(findattr,retAttr,model);
+                return _.find(array, function (obj) {
+                    return obj[findattr] === model;
+                })[retAttr];
+            };
 
             scope.addCharge = function () {
                 if (scope.chargeFormData.chargeId) {
@@ -292,10 +315,10 @@
             };
 
             scope.submit = function () {
-                if (WizardHandler.wizard().getCurrentStep() != scope.noOfTabs) {
-                    WizardHandler.wizard().next();
-                    return;
-                }
+                // if (WizardHandler.wizard().getCurrentStep() != scope.noOfTabs) {
+                //     WizardHandler.wizard().next();
+                //     return;
+                // }
                 // Make sure charges and collaterals are empty before initializing.
                 delete scope.formData.charges;
                 delete scope.formData.collateral;

app/scripts/controllers/loanAccount/ViewLoanDetailsController.js

@@ -488,6 +488,7 @@
                 resourceFactory.DataTablesResource.getTableDetails({datatablename: datatable.registeredTableName,
                     entityId: routeParams.id, genericResultSet: 'true'}, function (data) {
                     scope.datatabledetails = data;
+                    console.log(data);
                     scope.datatabledetails.isData = data.data.length > 0 ? true : false;
                     scope.datatabledetails.isMultirow = data.columnHeaders[0].columnName == "id" ? true : false;
                     scope.showDataTableAddButton = !scope.datatabledetails.isData || scope.datatabledetails.isMultirow;

app/scripts/controllers/product/CreateFixedDepositProductController.js

@@ -2,6 +2,7 @@
     mifosX.controllers = _.extend(module, {
         CreateFixedDepositProductController: function (scope, resourceFactory, location, dateFilter,$uibModal) {
             scope.formData = {};
+            scope.depositproduct = {};
             scope.charges = [];
             scope.showOrHideValue = "show";
             scope.configureFundOptions = [];
@@ -35,9 +36,22 @@
                 scope.chart = scope.product.chartTemplate;
                 scope.chart.chartSlabs = [];
                 scope.formData.accountingRule = '1';
+                scope.depositproduct = angular.copy(scope.formData);
 
             });
 
+            scope.$watch('formData',function(newVal){
+                scope.depositproduct = angular.extend(scope.depositproduct,newVal);
+            },true);
+
+            scope.formValue = function(array,model,findattr,retAttr){
+                findattr = findattr ? findattr : 'id';
+                retAttr = retAttr ? retAttr : 'value';
+                console.log(findattr,retAttr,model);
+                return _.find(array, function (obj) {
+                    return obj[findattr] === model;
+                })[retAttr];
+            };
             //advanced accounting rule
             scope.showOrHide = function (showOrHideValue) {
 

app/scripts/controllers/product/CreateLoanProductController.js

@@ -1,9 +1,11 @@
 (function (module) {
     mifosX.controllers = _.extend(module, {
-        CreateLoanProductController: function (scope, resourceFactory, location, dateFilter) {
+        CreateLoanProductController: function (scope, $rootScope, resourceFactory, location, dateFilter) {
             scope.restrictDate = new Date();
             scope.formData = {};
+            scope.loanproduct = {};
             scope.charges = [];
+            scope.accountingOptions = ['None','Cash','Accrual(Periodic)','Accrual(Upfront)'];
             scope.floatingrateoptions = [];
             scope.loanProductConfigurableAttributes = [];
             scope.showOrHideValue = "show";
@@ -78,8 +80,22 @@
                 scope.formData.isLinkedToFloatingInterestRates = false ;
                 scope.formData.allowVariableInstallments = false ;
                 scope.product.interestRecalculationNthDayTypeOptions.push({"code" : "onDay", "id" : -2, "value" : "on day"});
+                scope.loanproduct = angular.copy(scope.formData);
             });
 
+             scope.$watch('formData',function(newVal){
+                scope.loanproduct = angular.extend(scope.loanproduct,newVal);
+             },true);
+
+             $rootScope.formValue = function(array,model,findattr,retAttr){
+                 findattr = findattr ? findattr : 'id';
+                 retAttr = retAttr ? retAttr : 'value';
+                 console.log(findattr,retAttr,model);
+                 return _.find(array, function (obj) {
+                    return obj[findattr] === model;
+                 })[retAttr];
+            };
+
             scope.chargeSelected = function (chargeId) {
 
                 if (chargeId) {
@@ -370,7 +386,7 @@
             };
         }
     });
-    mifosX.ng.application.controller('CreateLoanProductController', ['$scope', 'ResourceFactory', '$location', 'dateFilter', mifosX.controllers.CreateLoanProductController]).run(function ($log) {
+    mifosX.ng.application.controller('CreateLoanProductController', ['$scope','$rootScope', 'ResourceFactory', '$location', 'dateFilter', mifosX.controllers.CreateLoanProductController]).run(function ($log) {
         $log.info("CreateLoanProductController initialized");
     });
 }(mifosX.controllers || {}));

app/scripts/controllers/product/CreateRecurringDepositProductController.js

@@ -2,6 +2,7 @@
     mifosX.controllers = _.extend(module, {
         CreateRecurringDepositProductController: function (scope, resourceFactory, location, dateFilter,$uibModal) {
             scope.formData = {};
+            scope.depositproduct = {};
             scope.charges = [];
             scope.showOrHideValue = "show";
             scope.configureFundOptions = [];
@@ -37,9 +38,20 @@
                 scope.chart = scope.product.chartTemplate;
                 scope.chart.chartSlabs = [];
                 scope.formData.accountingRule = '1';
+                scope.depositproduct = angular.copy(scope.formData);
 
             });
-
+            scope.$watch('formData',function(newVal){
+                scope.depositproduct = angular.extend(scope.depositproduct,newVal);
+            },true);
+            scope.formValue = function(array,model,findattr,retAttr){
+                findattr = findattr ? findattr : 'id';
+                retAttr = retAttr ? retAttr : 'value';
+                console.log(findattr,retAttr,model);
+                return _.find(array, function (obj) {
+                    return obj[findattr] === model;
+                })[retAttr];
+            };
             //advanced accounting rule
             scope.showOrHide = function (showOrHideValue) {
 

app/scripts/controllers/product/CreateSavingProductController.js

@@ -1,14 +1,14 @@
 (function (module) {
     mifosX.controllers = _.extend(module, {
-        CreateSavingProductController: function (scope, resourceFactory, location) {
+        CreateSavingProductController: function (scope, $rootScope, resourceFactory, location) {
             scope.formData = {};
+            scope.savingproduct = {};
             scope.charges = [];
             scope.showOrHideValue = "show";
             scope.configureFundOptions = [];
             scope.specificIncomeaccounts = [];
             scope.penaltySpecificIncomeaccounts = [];
             scope.configureFundOption = {};
-
             resourceFactory.savingProductResource.get({resourceType: 'template'}, function (data) {
                 scope.product = data;
                 scope.product.chargeOptions = scope.product.chargeOptions || [];
@@ -24,9 +24,24 @@
                 scope.formData.interestCalculationType = data.interestCalculationType.id;
                 scope.formData.interestCalculationDaysInYearType = data.interestCalculationDaysInYearType.id;
                 scope.formData.accountingRule = '1';
+                scope.savingproduct = angular.copy(scope.formData);
 
             });
 
+            scope.$watch('formData',function(newVal){
+                scope.savingproduct = angular.extend(scope.savingproduct,newVal);
+            },true);
+
+            scope.formValue = function(array,model,findattr,retAttr){
+                findattr = findattr ? findattr : 'id';
+                retAttr = retAttr ? retAttr : 'value';
+                console.log(findattr,retAttr,model);
+                return _.find(array, function (obj) {
+                    return obj[findattr] === model;
+                })[retAttr];
+            };
+            //$rootScope.formValue is used which is defined in CreateLoanProductController.js
+
             //advanced accounting rule
             scope.showOrHide = function (showOrHideValue) {
 
@@ -159,7 +174,7 @@
             }
         }
     });
-    mifosX.ng.application.controller('CreateSavingProductController', ['$scope', 'ResourceFactory', '$location', mifosX.controllers.CreateSavingProductController]).run(function ($log) {
+    mifosX.ng.application.controller('CreateSavingProductController', ['$scope', '$rootScope', 'ResourceFactory', '$location', mifosX.controllers.CreateSavingProductController]).run(function ($log) {
         $log.info("CreateSavingProductController initialized");
     });
 }(mifosX.controllers || {}));

app/scripts/controllers/product/CreateShareProductController.js

@@ -2,6 +2,7 @@
     mifosX.controllers = _.extend(module, {
         CreateShareProductController: function (scope, resourceFactory, dateFilter, location) {
             scope.formData = {};
+            scope.shareproduct = {};
             scope.charges = [];
             scope.formData.marketPricePeriods = [] ;
             scope.showOrHideValue = "show";
@@ -14,14 +15,28 @@
                 scope.incomeAccountOptions = scope.product.accountingMappingOptions.incomeAccountOptions || [];
                 scope.formData.currencyCode = data.currencyOptions[0].code;
                 scope.formData.digitsAfterDecimal = data.currencyOptions[0].decimalPlaces;
+                scope.formData.allowDividendCalculationForInactiveClients = false;
                 scope.formData.accountingRule = '1';
-
+                scope.shareproduct = angular.copy(scope.formData);
             });
             
             scope.shareCapitaValue = function () {
                  scope.formData.shareCapital =   scope.formData.unitPrice * scope.formData.sharesIssued;
             };
 
+            scope.$watch('formData',function(newVal){
+                scope.shareproduct = angular.extend(scope.shareproduct,newVal);
+            },true);
+            
+            scope.formValue = function(array,model,findattr,retAttr){
+                findattr = findattr ? findattr : 'id';
+                retAttr = retAttr ? retAttr : 'value';
+                console.log(findattr,retAttr,model);
+                return _.find(array, function (obj) {
+                    return obj[findattr] === model;
+                })[retAttr];
+            };
+
             scope.addMarketPricePeriod = function () {
                 var marketPrice = {} ;
                 marketPrice.locale=scope.optlang.code;

app/scripts/controllers/savings/CreateSavingAccountController.js

@@ -1,10 +1,11 @@
 (function (module) {
     mifosX.controllers = _.extend(module, {
-        CreateSavingAccountController: function (scope, resourceFactory, location, routeParams, dateFilter) {
+        CreateSavingAccountController: function (scope, $rootScope, resourceFactory, location, routeParams, dateFilter,WizardHandler) {
             scope.products = [];
             scope.fieldOfficers = [];
             scope.formData = {};
             scope.formDat = {};
+            scope.savingdetails = {};
             scope.restrictDate = new Date();
             scope.clientId = routeParams.clientId;
             scope.groupId = routeParams.groupId;
@@ -17,6 +18,7 @@
             scope.formDat.datatables = [];
             scope.tf = "HH:mm";
             scope.tempDataTables = [];
+            scope.disabled = true;
 
             if (routeParams.centerEntity) {
                 scope.centerEntity = true;
@@ -26,15 +28,15 @@
             if (scope.clientId) {
                 scope.inparams.clientId = scope.clientId
             }
-            ;
+
             if (scope.groupId) {
                 scope.inparams.groupId = scope.groupId
             }
-            ;
+
             if (scope.centerId) {
                 scope.inparams.centerId = scope.centerId
             }
-            ;
+
 
             scope.inparams.staffInSelectedOfficeOnly = true;
             
@@ -43,8 +45,6 @@
                 scope.chargeOptions = data.chargeOptions;
                 scope.clientName = data.clientName;
                 scope.groupName = data.groupName;
-                scope.datatables = data.datatables;
-                scope.handleDatatables(scope.datatables);
             });
 
             scope.handleDatatables = function (datatables) {
@@ -86,8 +86,17 @@
                 }
             };
 
+            scope.formValue = function(array,model,findattr,retAttr){
+                findattr = findattr ? findattr : 'id';
+                retAttr = retAttr ? retAttr : 'value';
+                console.log(findattr,retAttr,model);
+                return _.find(array, function (obj) {
+                    return obj[findattr] === model;
+                })[retAttr];
+            };
+
             scope.changeProduct = function () {
-                _.isUndefined(scope.datatables) ? scope.tempDataTables = [] : scope.tempDataTables = scope.datatables;
+                // _.isUndefined(scope.datatables) ? scope.tempDataTables = [] : scope.tempDataTables = scope.datatables;
                 scope.inparams.productId = scope.formData.productId;
                 resourceFactory.savingsTemplateResource.get(scope.inparams, function (data) {
 
@@ -124,9 +133,16 @@
                     if (data.withdrawalFeeType) scope.formData.withdrawalFeeType = data.withdrawalFeeType.id;
                     scope.datatables = data.datatables;
                     scope.handleDatatables(scope.datatables);
+                    scope.disabled = false;
+                    scope.savingdetails = angular.copy(scope.formData);
+                    scope.savingdetails.productName = scope.formValue(scope.products,scope.formData.productId,'id','name');
                 });
             };
 
+            scope.$watch('formData',function(newVal){
+               scope.savingdetails = angular.extend(scope.savingdetails,newVal);
+            });
+
             scope.addCharge = function (chargeId) {
                 scope.errorchargeevent = false;
                 if (chargeId) {
@@ -250,7 +266,7 @@
             }
         }
     });
-    mifosX.ng.application.controller('CreateSavingAccountController', ['$scope', 'ResourceFactory', '$location', '$routeParams', 'dateFilter', mifosX.controllers.CreateSavingAccountController]).run(function ($log) {
+    mifosX.ng.application.controller('CreateSavingAccountController', ['$scope','$rootScope','ResourceFactory', '$location', '$routeParams', 'dateFilter', 'WizardHandler',mifosX.controllers.CreateSavingAccountController]).run(function ($log) {
         $log.info("CreateSavingAccountController initialized");
     });
 }(mifosX.controllers || {}));

app/scripts/controllers/savings/SavingAccountActionsController.js

@@ -1,17 +1,134 @@
 (function (module) {
     mifosX.controllers = _.extend(module, {
-        SavingAccountActionsController: function (scope, resourceFactory, location, routeParams, dateFilter) {
+        SavingAccountActionsController: function (scope, rootScope, resourceFactory, location, routeParams, dateFilter) {
 
             scope.action = routeParams.action || "";
             scope.accountId = routeParams.id;
             scope.savingAccountId = routeParams.id;
             scope.formData = {};
+            scope.entityformData = {};
+            scope.entityformData.datatables = {};
             scope.restrictDate = new Date();
             // Transaction UI Related
             scope.isTransaction = false;
             scope.transactionAmountField = false;
             scope.showPaymentDetails = false;
             scope.paymentTypes = [];
+            scope.submittedDatatables = [];
+            scope.tf = "HH:mm";
+            var submitStatus = [];
+
+            rootScope.RequestEntities = function(entity,status,productId){
+                resourceFactory.entityDatatableChecksResource.getAll({limit:-1},function (response) {
+                    scope.entityDatatableChecks = _.filter(response.pageItems , function(datatable){
+                        var specificProduct = (datatable.entity == entity && datatable.status.value == status && datatable.productId == productId);
+                        var AllProducts = (datatable.entity == entity && datatable.status.value == status);
+                        return (datatable.productId?specificProduct:AllProducts);
+                    });
+                    scope.entityDatatableChecks = _.pluck(scope.entityDatatableChecks,'datatableName');
+                    scope.datatables = [];
+                    var k=0;
+                    _.each(scope.entityDatatableChecks,function(entitytable) {
+                        resourceFactory.DataTablesResource.getTableDetails({datatablename:entitytable,entityId: routeParams.id, genericResultSet: 'true'}, function (data) {
+                            data.registeredTableName = entitytable;
+                            var colName = data.columnHeaders[0].columnName;
+                            if (colName == 'id') {
+                                data.columnHeaders.splice(0, 1);
+                            }
+
+                            colName = data.columnHeaders[0].columnName;
+                            if (colName == 'client_id' || colName == 'office_id' || colName == 'group_id' || colName == 'center_id' || colName == 'loan_id' || colName == 'savings_account_id') {
+                                data.columnHeaders.splice(0, 1);
+                                scope.isCenter = (colName == 'center_id') ? true : false;
+                            }
+
+
+                            data.noData = (data.data.length == 0);
+                            if(data.noData){
+                                scope.datatables.push(data);
+                                scope.entityformData.datatables[k] = {data:{}};
+                                submitStatus[k] = "save";
+                                _.each(data.columnHeaders,function(Header){
+                                    if(Header.columnDisplayType == 'DATETIME'){
+                                        scope.entityformData.datatables[k].data[Header.columnName] = {};
+                                    }
+                                    else {
+                                        scope.entityformData.datatables[k].data[Header.columnName] = "";
+                                    }
+                                });
+                                k++;
+                                scope.isEntityDatatables = true;
+                            }
+                        });
+
+
+                    });
+
+                });
+            };
+
+            scope.fetchEntities = function(entity,status,productId){
+                if(!productId){
+                    resourceFactory.savingsResource.get({accountId: routeParams.id, associations: 'all'},
+                        function (data) {
+                            scope.productId = data.savingsProductId;
+                            rootScope.RequestEntities(entity,status,scope.productId);
+                        });
+                }
+                else{
+                    rootScope.RequestEntities(entity,status,productId);
+                }
+            };
+
+            function asyncLoop(iterations, func, callback) {
+                var index = 0;
+                var done = false;
+                var loop = {
+                    next: function() {
+                        if (done) {
+                            return;
+                        }
+
+                        if (index < iterations) {
+                            index++;
+                            func(loop);
+
+                        } else {
+                            done = true;
+                            callback();
+                        }
+                    },
+
+                    iteration: function() {
+                        return index - 1;
+                    },
+
+                    break: function() {
+                        done = true;
+                    }
+                };
+                loop.next();
+                return loop;
+            }
+
+            scope.fieldType = function (type) {
+                var fieldType = "";
+                if (type) {
+                    if (type == 'CODELOOKUP' || type == 'CODEVALUE') {
+                        fieldType = 'SELECT';
+                    } else if (type == 'DATE') {
+                        fieldType = 'DATE';
+                    } else if (type == 'DATETIME') {
+                        fieldType = 'DATETIME';
+                    } else if (type == 'BOOLEAN') {
+                        fieldType = 'BOOLEAN';
+                    } else {
+                        fieldType = 'TEXT';
+                    }
+                }
+                return fieldType;
+            };
+
 
             switch (scope.action) {
                 case "approve":
@@ -21,6 +138,7 @@
                     scope.showDateField = true;
                     scope.showNoteField = true;
                     scope.taskPermissionName = 'APPROVE_SAVINGSACCOUNT';
+                    scope.fetchEntities('m_savings_account','APPROVE');
                     break;
                 case "reject":
                     scope.title = 'label.heading.rejectsavingaccount';
@@ -29,6 +147,7 @@
                     scope.showDateField = true;
                     scope.showNoteField = true;
                     scope.taskPermissionName = 'REJECT_SAVINGSACCOUNT';
+                    scope.fetchEntities('m_savings_account','REJECT');
                     break;
                 case "withdrawnByApplicant":
                     scope.title = 'label.heading.withdrawsavingaccount';
@@ -51,6 +170,7 @@
                     scope.showDateField = true;
                     scope.showNoteField = false;
                     scope.taskPermissionName = 'ACTIVATE_SAVINGSACCOUNT';
+                    scope.fetchEntities('m_savings_account','ACTIVATE');
                     break;
                 case "deposit":
                     resourceFactory.savingsTrxnsTemplateResource.get({savingsId: scope.accountId}, function (data) {
@@ -88,6 +208,7 @@
                     scope.transactionAmountField = true;
                     scope.showPaymentDetails = false;
                     scope.taskPermissionName = 'WITHDRAWAL_SAVINGSACCOUNT';
+                    scope.fetchEntities('m_savings_account','WITHDRAWN');
                     break;
                 case "applyAnnualFees":
                     resourceFactory.savingsResource.get({accountId: routeParams.id, resourceType: 'charges', chargeId: routeParams.chargeId},
@@ -123,6 +244,7 @@
                     scope.postInterestValidationOnClosure = true;
                     scope.formData.postInterestValidationOnClosure = true;
                     scope.taskPermissionName = 'CLOSE_SAVINGSACCOUNT';
+                    scope.fetchEntities('m_savings_account','CLOSE');
                     break;
                 case "modifytransaction":
                     resourceFactory.savingsTrxnsResource.get({savingsId: scope.accountId, transactionId: routeParams.transactionId, template: 'true'},
@@ -303,9 +425,54 @@
                     });
                 }
             };
+
+            scope.submitDatatable = function(){
+                if(scope.datatables) {
+                    asyncLoop(Object.keys(scope.entityformData.datatables).length,function(loop){
+                        var cnt = loop.iteration();
+                        var formData = scope.entityformData.datatables[cnt];
+                        formData.registeredTableName = scope.datatables[cnt].registeredTableName;
+
+                        var params = {
+                            datatablename: formData.registeredTableName,
+                            entityId: routeParams.id,
+                            genericResultSet: 'true'
+                        };
+
+                        angular.extend(formData.data,{dateFormat: scope.df, locale: scope.optlang.code});
+
+                        _.each(formData.data, function (columnHeader) {
+                            if (columnHeader.dateType) {
+                                columnHeader = dateFilter(columnHeader.dateType.date, params.dateFormat);
+                            }
+                            else if (columnHeader.dateTimeType) {
+                                columnHeader = dateFilter(columnHeader.dateTimeType.date, scope.df)
+                                    + " " + dateFilter(columnHeader.dateTimeType.time, scope.tf);
+                            }
+                        });
+                        console.log(scope.entityformData);
+                        var action = submitStatus[cnt];
+                        resourceFactory.DataTablesResource[action](params, formData.data, function (data) {
+
+                            submitStatus[cnt] = "update";
+                            scope.submittedDatatables.push(scope.datatables[cnt].registeredTableName);
+                            loop.next();
+                        },function(){
+                            rootScope.errorDetails[0].push({datatable:scope.datatables[cnt].registeredTableName});
+                            loop.break();
+                        });
+
+                    },function(){
+                        scope.submit();
+                    });
+                }
+                else{
+                    scope.submit();
+                }
+            };
         }
     });
-    mifosX.ng.application.controller('SavingAccountActionsController', ['$scope', 'ResourceFactory', '$location', '$routeParams', 'dateFilter', mifosX.controllers.SavingAccountActionsController]).run(function ($log) {
+    mifosX.ng.application.controller('SavingAccountActionsController', ['$scope','$rootScope', 'ResourceFactory', '$location', '$routeParams', 'dateFilter', mifosX.controllers.SavingAccountActionsController]).run(function ($log) {
         $log.info("SavingAccountActionsController initialized");
     });
 }(mifosX.controllers || {}));

app/scripts/controllers/shares/CreateShareAccountController.js

@@ -4,6 +4,7 @@
             scope.products = [];
             scope.fieldOfficers = [];
             scope.formData = {};
+            scope.sharedetails = {};
             scope.restrictDate = new Date();
             scope.clientId = routeParams.clientId;
             scope.date = {};
@@ -26,7 +27,23 @@
                     scope.formData.unitPrice = data.currentMarketPrice ;
                     scope.formData.requestedShares = data.defaultShares ;
                     scope.charges = data.charges;
+                    scope.sharedetails = angular.copy(scope.formData);
+                    scope.sharedetails.productName = scope.formValue(scope.products,scope.formData.productId,'id','name');
                 });
+
+            };
+
+            scope.$watch('formData',function(newVal){
+               scope.sharedetails = angular.extend(scope.sharedetails,newVal);
+            });
+
+            scope.formValue = function(array,model,findattr,retAttr){
+                findattr = findattr ? findattr : 'id';
+                retAttr = retAttr ? retAttr : 'value';
+                console.log(findattr,retAttr,model);
+                return _.find(array, function (obj) {
+                    return obj[findattr] === model;
+                })[retAttr];
             };
 
             scope.addCharge = function (chargeId) {

app/scripts/directives/ApiValidationDirective.js

@@ -13,8 +13,8 @@
                         '<label ng-show="errorStatus">{{errorStatus}}</label><br />' +
                         '<div ng-repeat="error in errorArray">' +
                             '<label ng-hide="errorStatus">' +
-                                '{{error.code | translate:error.args}}' +
-                            '</label>'
+                                '{{error.code | translate:error.args}} - {{error.datatable}}' +
+                            '</label>' +
                         '</div></div></div>';
                     elm.html('').append($compile(template)(scope));
                 }

app/scripts/mifosXComponents.js

@@ -15,6 +15,7 @@ define(['Q', 'underscore', 'mifosX'], function (Q) {
             'UIConfigService',
             'NotificationResponseHeaderProvider'
         ],
+
         controllers: [
             'main/MainController',
             'main/LoginFormController',

app/scripts/modules/angular-wizard.js

@@ -18,26 +18,23 @@ angular.module("wizard.html", []).run(["$templateCache", function($templateCache
             "<div class = \"wiz-container\">\n" +
             "    <div class = \"row \">\n" +
             "    <div class = \"col-md-12 \">\n" +
-            "    <div class = \"helper-set-block\">\n" +
-            "    <div class = \"arrow-wrapper steps-indicator\">\n" +
+            // "    <div class = \"helper-set-block\">\n" +
+            // "    <div class = \"arrow-wrapper steps-indicator\">\n" +
            // "    <div class=\"steps-indicator\" ng-if=\"!hideIndicators\">\n" +
            // "      <div ng-repeat=\"step in steps\" ng-class=\"{'active':step.title == selectedStep.title, default: !step.completed && !step.selected, 'current': step.selected && !step.completed, 'done': step.completed && !step.selected, 'editing': step.selected && step.completed}\">\n" +
-            "        <a ng-repeat=\"step in steps\" ng-click=\"goTo(step)\" ng-class=\"{'active':step.title == selectedStep.title, default: " +
-                "!step.completed && !step.selected, 'current': step.selected && !step.completed, " +
-                "'done': step.completed && !step.selected, 'editing': step.selected && step.completed," +
-                "'current icon-arrow-right': step.selected && !step.completed, 'done icon-check': step.completed && !step.selected, " +
-                "'editing icon-repeat': step.selected && step.completed}\">\n" +
-                "<span class=\"fa-stack\">" +
-                "<span class=\"fa fa-circle-thin fa-stack-2x\"></span>" +
-                "<span class=\"fa fa-check fa-stack-1x\" ng-show=\"step.completed\"></span>" +
-                "</span>"+
-           // "      <span class=\"{{step.icon}}\"></span> " +
-            "&nbsp;    {{step.title || step.wzTitle}}\n" +
-            "        </a>\n" +
+                "<h3 ng-hide='getEnabledSteps().length > 1'>{{steps[0].title || steps[0].wzTitle}}</h3>"+
+                " <ul class=\"progress-indicator\" ng-show='getEnabledSteps().length > 1'>"+
+            "        <li ng-repeat=\"step in getEnabledSteps()\" ng-click=\"goTo(step)\" ng-class=\"{'progress-current':step.selected,'progress-todo': " +
+                "!step.completed && !step.selected, " +
+                "'progress-done': step.completed && !step.selected}\">" +
+                "<span class='bubble'></span><i class='fa fa-check' ng-show='step.completed && !step.selected'></i>"+
+                "<i class='fa fa-repeat' ng-show='step.selected && step.completed'></i> {{step.title || step.wzTitle}}"+
+            "        </li>" +
+                "</ul>" +
            // "      </div>\n" +
             //"    </div>\n" +
-            "    </div>\n" +
-            "    </div>\n" +
+            // "    </div>\n" +
+            // "    </div>\n" +
             "    </div>\n" +
             "    </div>\n" +
             "    <div class = \"row \">\n" +
@@ -55,20 +52,32 @@ angular.module('mgo-angular-wizard').directive('wzStep', function() {
         transclude: true,
         scope: {
             wzTitle: '@',
-            title: '@',
-            icon: '@'
+            wzHeadingTitle: '@',
+            canenter : '=',
+            canexit : '=',
+            disabled: '@?wzDisabled',
+            description: '@',
+            wzData: '=',
+            wzOrder: '@?'
         },
         require: '^wizard',
         templateUrl: function(element, attributes) {
             return attributes.template || "step.html";
         },
-        link: function($scope, $element, $attrs, wizard) {
-            $scope.title = $scope.title || $scope.wzTitle;
+        link: function ($scope, $element, $attrs, wizard) {
+            $attrs.$observe('wzTitle', function (value) {
+                $scope.title = $scope.wzTitle;
+            });
+            $scope.title = $scope.wzTitle;
             wizard.addStep($scope);
+            $scope.$on('$destroy', function(){
+                wizard.removeStep($scope);
+            });
         }
-    }
+    };
 });
 
+//wizard directive
 angular.module('mgo-angular-wizard').directive('wizard', function() {
     return {
         restrict: 'EA',
@@ -76,115 +85,388 @@ angular.module('mgo-angular-wizard').directive('wizard', function() {
         transclude: true,
         scope: {
             currentStep: '=',
+            onCancel: '&',
             onFinish: '&',
             hideIndicators: '=',
             editMode: '=',
-            name: '@'
+            name: '@',
+            indicatorsPosition: '@?'
         },
         templateUrl: function(element, attributes) {
             return attributes.template || "wizard.html";
         },
-        controller: ['$scope', '$element', 'WizardHandler', function($scope, $element, WizardHandler) {
 
+        //controller for wizard directive, treat this just like an angular controller
+        controller: ['$scope', '$element', '$log', 'WizardHandler', '$q', '$timeout', function ($scope, $element, $log, WizardHandler, $q, $timeout) {
+            //setting default step position if none declared.
+            if ($scope.indicatorsPosition == undefined) {
+                $scope.indicatorsPosition = 'bottom';
+            }
+            //this variable allows directive to load without having to pass any step validation
+            var firstRun = true;
+            //creating instance of wizard, passing this as second argument allows access to functions attached to this via Service
             WizardHandler.addWizard($scope.name || WizardHandler.defaultName, this);
+
             $scope.$on('$destroy', function() {
                 WizardHandler.removeWizard($scope.name || WizardHandler.defaultName);
             });
 
+            //steps array where all the scopes of each step are added
             $scope.steps = [];
 
-            $scope.$watch('currentStep', function(step) {
-                if (!step) return;
-                var stepTitle = $scope.selectedStep.title || $scope.selectedStep.wzTitle;
-                if ($scope.selectedStep && stepTitle !== $scope.currentStep) {
-                    $scope.goTo(_.findWhere($scope.steps, {title: $scope.currentStep}));
-                }
+            var stepIdx = function(step) {
+                var idx = 0;
+                var res = -1;
+                angular.forEach($scope.getEnabledSteps(), function(currStep) {
+                    if (currStep === step) {
+                        res = idx;
+                    }
+                    idx++;
+                });
+                return res;
+            };
 
-            });
+            var stepByTitle = function(titleToFind) {
+                var foundStep = null;
+                angular.forEach($scope.getEnabledSteps(), function(step) {
+                    if (step.wzTitle === titleToFind) {
+                        foundStep = step;
+                    }
+                });
+                return foundStep;
+            };
 
-            $scope.$watch('[editMode, steps.length]', function() {
+
+            //update completed state for each step based on the editMode and current step number
+            var handleEditModeChange = function() {
                 var editMode = $scope.editMode;
-                if (_.isUndefined(editMode) || _.isNull(editMode)) return;
+                if (angular.isUndefined(editMode) || (editMode === null)) return;
 
-                if (editMode) {
-                    _.each($scope.steps, function(step) {
-                        step.completed = true;
+                //Set completed for all steps to the value of editMode
+                angular.forEach($scope.steps, function (step) {
+                    step.completed = editMode;
+                });
+
+                //If editMode is false, set ONLY ENABLED steps with index lower then completedIndex to completed
+                if (!editMode) {
+                    var completedStepsIndex = $scope.currentStepNumber() - 1;
+                    angular.forEach($scope.getEnabledSteps(), function(step, stepIndex) {
+                        if(stepIndex < completedStepsIndex) {
+                            step.completed = true;
+                        }
                     });
                 }
+            };
+
+            //access to context object for step validation
+            $scope.context = {};
+
+            //watching changes to currentStep
+            $scope.$watch('currentStep', function(step) {
+                //checking to make sure currentStep is truthy value
+                if (!step) return;
+                //setting stepTitle equal to current step title or default title
+                var stepTitle = $scope.selectedStep.wzTitle;
+                if ($scope.selectedStep && stepTitle !== $scope.currentStep) {
+                    //invoking goTo() with step title as argument
+                    $scope.goTo(stepByTitle($scope.currentStep));
+                }
+            });
+
+            //watching steps array length and editMode value, if edit module is undefined or null the nothing is done
+            //if edit mode is truthy, then all steps are marked as completed
+            $scope.$watch('[editMode, steps.length]', function() {
+                handleEditModeChange();
             }, true);
 
+            //called each time step directive is loaded
             this.addStep = function(step) {
-                $scope.steps.push(step);
-                if ($scope.steps.length === 1) {
-                    $scope.goTo($scope.steps[0]);
+                var wzOrder = (step.wzOrder >= 0 && !$scope.steps[step.wzOrder]) ? step.wzOrder : $scope.steps.length;
+                //adding the scope of directive onto step array
+                $scope.steps[wzOrder] = step;
+                //if this step is the new first then goTo it
+                if ($scope.getEnabledSteps()[0] === step) {
+                    //goTo first step
+                    $scope.goTo($scope.getEnabledSteps()[0]);
                 }
             };
 
+            //called each time step directive is destroyed
+            this.removeStep = function (step) {
+                var index = $scope.steps.indexOf(step);
+                if (index > 0) {
+                    $scope.steps.splice(index, 1);
+                }
+            };
+
+            this.removeSteps = function (index, length) {
+                $scope.steps.splice(index, length);
+            };
+
+            this.context = $scope.context;
+
+            $scope.getStepNumber = function(step) {
+                return stepIdx(step) + 1;
+            };
+
             $scope.goTo = function(step) {
-                unselectAll();
-                $scope.selectedStep = step;
-                if (!_.isUndefined($scope.currentStep)) {
-                    $scope.currentStep = step.title || step.wzTitle;
+                //if this is the first time the wizard is loading it bi-passes step validation
+                if(firstRun){
+                    //deselect all steps so you can set fresh below
+                    unselectAll();
+                    $scope.selectedStep = step;
+                    //making sure current step is not undefined
+                    if (!angular.isUndefined($scope.currentStep)) {
+                        $scope.currentStep = step.wzTitle;
+                    }
+                    //setting selected step to argument passed into goTo()
+                    step.selected = true;
+                    //emit event upwards with data on goTo() invoktion
+                    $scope.$emit('wizard:stepChanged', {step: step, index: stepIdx(step)});
+                    //setting variable to false so all other step changes must pass validation
+                    firstRun = false;
+                } else {
+                    //createing variables to capture current state that goTo() was invoked from and allow booleans
+                    var thisStep;
+                    //getting data for step you are transitioning out of
+                    if($scope.currentStepNumber() > 0){
+                        thisStep = $scope.currentStepNumber() - 1;
+                    } else if ($scope.currentStepNumber() === 0){
+                        thisStep = 0;
+                    }
+                    //$log.log('steps[thisStep] Data: ', $scope.getEnabledSteps()[thisStep].canexit);
+                    $q.all([canExitStep($scope.getEnabledSteps()[thisStep], step), canEnterStep(step)]).then(function(data) {
+                        if(data[0] && data[1]){
+                            //deselect all steps so you can set fresh below
+                            unselectAll();
+
+                            //$log.log('value for canExit argument: ', $scope.currentStep.canexit);
+                            $scope.selectedStep = step;
+                            //making sure current step is not undefined
+                            if(!angular.isUndefined($scope.currentStep)){
+                                $scope.currentStep = step.wzTitle;
+                            }
+                            //setting selected step to argument passed into goTo()
+                            step.selected = true;
+                            //emit event upwards with data on goTo() invoktion
+                            $scope.$emit('wizard:stepChanged', {step: step, index: stepIdx(step)});
+                            //$log.log('current step number: ', $scope.currentStepNumber());
+                        } else {
+                            $scope.$emit('wizard:stepChangeFailed', {step: step, index: _.indexOf($scope.getEnabledSteps(), step)});
+                        }
+                    });
                 }
-                step.selected = true;
-                $scope.$emit('wizard:stepChanged', {step: step, index: _.indexOf($scope.steps , step)});
             };
 
+            function canEnterStep(step) {
+                var defer;
+                var canEnter;
+                //If no validation function is provided, allow the user to enter the step
+                if(step.canenter === undefined){
+                    return true;
+                }
+                //If canenter is a boolean value instead of a function, return the value
+                if(typeof step.canenter === 'boolean'){
+                    return step.canenter;
+                }
+                //If canenter is a string instead of a function, evaluate the function
+                if(typeof step.canenter === 'string'){
+                    var splitFunction = step.canenter.split('(');
+                    canEnter = eval('$scope.$parent.' + splitFunction[0] + '($scope.context' + splitFunction[1])
+                } else {
+                    canEnter = step.canenter($scope.context);
+                }
+                //Check to see if the canenter function is a promise which needs to be returned
+                if(angular.isFunction(canEnter.then)){
+                    defer = $q.defer();
+                    canEnter.then(function(response){
+                        defer.resolve(response);
+                    });
+                    return defer.promise;
+                } else {
+                    return canEnter === true;
+                }
+            }
+
+            function canExitStep(step, stepTo) {
+                var defer;
+                var canExit;
+                //Exiting the step should be allowed if no validation function was provided or if the user is moving backwards
+                if(typeof(step.canexit) === 'undefined' || $scope.getStepNumber(stepTo) < $scope.currentStepNumber()){
+                    return true;
+                }
+                //If canexit is a boolean value instead of a function, return the value
+                if(typeof step.canexit === 'boolean'){
+                    return step.canexit;
+                }
+                //If canenter is a string instead of a function, evaluate the function
+                if(typeof step.canexit === 'string'){
+                    var splitFunction = step.canexit.split('(');
+                    canExit = eval('$scope.$parent.' + splitFunction[0] + '($scope.context' + splitFunction[1])
+                } else {
+                    canExit = step.canexit($scope.context);
+                }
+                //Check to see if the canexit function is a promise which needs to be returned
+                if(angular.isFunction(canExit.then)){
+                    defer = $q.defer();
+                    canExit.then(function(response){
+                        defer.resolve(response);
+                    });
+                    return defer.promise;
+                } else {
+                    return canExit === true;
+                }
+            }
+
             $scope.currentStepNumber = function() {
-                return _.indexOf($scope.steps , $scope.selectedStep) + 1;
-            }
+                //retreive current step number
+                return stepIdx($scope.selectedStep) + 1;
+            };
 
-            this.getCurrentStep = function() {
-                return $scope.currentStepNumber();
-            }
+            $scope.getEnabledSteps = function() {
+                return $scope.steps.filter(function(step){
+                    return step && step.disabled !== 'true';
+                });
+            };
 
+            //unSelect All Steps
             function unselectAll() {
-                _.each($scope.steps, function (step) {
+                //traverse steps array and set each "selected" property to false
+                angular.forEach($scope.getEnabledSteps(), function (step) {
                     step.selected = false;
                 });
+                //set selectedStep variable to null
                 $scope.selectedStep = null;
             }
 
-            this.next = function(draft) {
-                var index = _.indexOf($scope.steps , $scope.selectedStep);
-                if (!draft) {
+            //ALL METHODS ATTACHED TO this ARE ACCESSIBLE VIA WizardHandler.wizard().methodName()
+
+            this.currentStepTitle = function(){
+                return $scope.selectedStep.wzTitle;
+            };
+
+            this.currentStepDescription = function(){
+                return $scope.selectedStep.description;
+            };
+
+            this.currentStep = function(){
+                return $scope.selectedStep;
+            };
+
+            this.totalStepCount = function() {
+                return $scope.getEnabledSteps().length;
+            };
+
+            //Access to enabled steps from outside
+            this.getEnabledSteps = function(){
+                return $scope.getEnabledSteps();
+            };
+
+            //Access to current step number from outside
+            this.currentStepNumber = function(){
+                return $scope.currentStepNumber();
+            };
+            //method used for next button within step
+            this.next = function(callback) {
+                var enabledSteps = $scope.getEnabledSteps();
+                //setting variable equal to step  you were on when next() was invoked
+                var index = stepIdx($scope.selectedStep);
+                //checking to see if callback is a function
+                if(angular.isFunction(callback)){
+                    if(callback()){
+                        if (index === enabledSteps.length - 1) {
+                            this.finish();
+                        } else {
+                            //invoking goTo() with step number next in line
+                            $scope.goTo(enabledSteps[index + 1]);
+                        }
+                    } else {
+                        return;
+                    }
+                }
+                if (!callback) {
+                    //completed property set on scope which is used to add class/remove class from progress bar
                     $scope.selectedStep.completed = true;
                 }
-                if (index === $scope.steps.length - 1) {
+                //checking to see if this is the last step.  If it is next behaves the same as finish()
+                if (index === enabledSteps.length - 1) {
                     this.finish();
                 } else {
-                    $scope.goTo($scope.steps[index + 1]);
+                    //invoking goTo() with step number next in line
+                    $scope.goTo(enabledSteps[index + 1]);
                 }
+
             };
 
+            //used to traverse to any step, step number placed as argument
             this.goTo = function(step) {
-                var stepTo;
-                if (_.isNumber(step)) {
-                    stepTo = $scope.steps[step];
-                } else {
-                    stepTo = _.findWhere($scope.steps, {title: step});
-                }
-                $scope.goTo(stepTo);
+                //wrapped inside $timeout so newly enabled steps are included.
+                $timeout(function() {
+                    var enabledSteps = $scope.getEnabledSteps();
+                    var stepTo;
+                    //checking that step is a Number
+                    if (angular.isNumber(step)) {
+                        stepTo = enabledSteps[step];
+                    } else {
+                        //finding the step associated with the title entered as goTo argument
+                        stepTo = stepByTitle(step);
+                    }
+                    //going to step
+                    $scope.goTo(stepTo);
+                });
             };
 
+            //calls finish() which calls onFinish() which is declared on an attribute and linked to controller via wizard directive.
             this.finish = function() {
                 if ($scope.onFinish) {
                     $scope.onFinish();
                 }
             };
 
-            this.cancel = this.previous = function() {
-                var index = _.indexOf($scope.steps , $scope.selectedStep);
+            this.previous = function() {
+                //getting index of current step
+                var index = stepIdx($scope.selectedStep);
+                //ensuring you aren't trying to go back from the first step
                 if (index === 0) {
                     throw new Error("Can't go back. It's already in step 0");
                 } else {
-                    $scope.goTo($scope.steps[index - 1]);
+                    //go back one step from current step
+                    $scope.goTo($scope.getEnabledSteps()[index - 1]);
                 }
             };
 
-            //deletes steps from $scope.steps array starting with index to length
-            this.removeSteps = function (index, length) {
-                $scope.steps.splice(index, length);
+            //cancel is alias for previous.
+            this.cancel = function() {
+                if ($scope.onCancel) {
+                    //onCancel is linked to controller via wizard directive:
+                    $scope.onCancel();
+                } else {
+                    //getting index of current step
+                    var index = stepIdx($scope.selectedStep);
+                    //ensuring you aren't trying to go back from the first step
+                    if (index === 0) {
+                        throw new Error("Can't go back. It's already in step 0");
+                    } else {
+                        //go back one step from current step
+                        $scope.goTo($scope.getEnabledSteps()[0]);
+                    }
+                }
+            };
+
+            //reset
+            this.reset = function(){
+                //traverse steps array and set each "completed" property to false
+                angular.forEach($scope.getEnabledSteps(), function (step) {
+                    step.completed = false;
+                });
+                //go to first step
+                this.goTo(0);
+            };
+
+            //change edit mode
+            this.setEditMode = function(mode) {
+                $scope.editMode = mode;
+                handleEditModeChange();
             };
         }]
     };
@@ -215,6 +497,7 @@ wizardButtonDirective('wzNext');
 wizardButtonDirective('wzPrevious');
 wizardButtonDirective('wzFinish');
 wizardButtonDirective('wzCancel');
+wizardButtonDirective('wzReset');
 
 angular.module('mgo-angular-wizard').factory('WizardHandler', function() {
     var service = {};
@@ -241,4 +524,4 @@ angular.module('mgo-angular-wizard').factory('WizardHandler', function() {
     };
 
     return service;
-});
+});

app/styles-dev/main/_custom_mixins.scss

@@ -6,6 +6,17 @@ $xs-large-screen:  1200px;
 
 // Custom mixins
 
+@mixin bubble-style($color) {
+  background-color: $color;
+  color: $color;
+  border-color: darken($color, $darken-amount);
+  &:before,
+  &:after {
+    background-color: $color;
+    border-color: darken($color, $darken-amount);
+  }
+}
+
 @mixin utility-responsive($width) {
   @media only screen and (min-width: $width) { @content; }
 }

app/styles-dev/main/components/_content.scss

@@ -198,6 +198,191 @@ span.required {
     background:$table-bg-active;
 }
 
+// Progress Bar..
+
+.flexer {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+.no-flexer {
+  display: block;
+}
+.no-flexer-element {
+  -ms-flex: 0;
+  -webkit-flex: 0;
+  -moz-flex: 0;
+  flex: 0;
+}
+.flexer-element {
+  -ms-flex: 1;
+  -webkit-flex: 1;
+  -moz-flex: 1;
+  flex: 1;
+}
+.progress-indicator {
+  @extend .flexer;
+  margin: 0;
+  padding: 0;
+  font-size: 80%;
+  text-transform: uppercase;
+  margin-bottom: 1em;
+  > li {
+    @extend .flexer-element;
+    list-style: none;
+    text-align: center;
+    width: auto;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    text-overflow: ellipsis;
+    color: $incomplete;
+    display: block;
+    &:hover {
+      color: darken($incomplete, $darken-amount);
+    }
+  }
+  > li .bubble {
+    border-radius: 1000px;
+    width: $bubble-size;
+    height: $bubble-size;
+    background-color: $incomplete;
+    display: block;
+    margin: 0 auto 0.5em auto;
+    border-bottom: $border-thickness solid darken($incomplete, 20%);
+  }
+
+  // line connectors
+
+  > li .bubble:before,
+  > li .bubble:after {
+    display: block;
+    position: absolute;
+    top: $bubble-size / 2 - $border-thickness;
+    width: 100%;
+    height: $bubble-line-thickness;
+    content: '';
+    background-color: $incomplete;
+    &:hover{
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+    }
+  }
+  > li .bubble:before {
+    left: 0;
+  }
+  > li .bubble:after {
+    right: 0;
+  }
+
+  > li:first-child .bubble:before,
+  > li:first-child .bubble:after {
+    width: 50%;
+    margin-left: 50%;
+  }
+
+  > li:last-child .bubble:before,
+  > li:last-child .bubble:after {
+    width: 50%;
+    margin-right: 50%;
+  }
+
+
+  // completed state
+
+  > li.progress-done {
+    color: $complete;
+    .bubble {
+      @include bubble-style($complete);
+      transition: background-color 0.6s ease-in-out, color 0.6s ease-in-out;
+      -webkit-transition: background-color 0.6s ease-in-out, color 0.6s ease-in-out;
+      -moz-transition: background-color 0.6s ease-in-out, color 0.6s ease-in-out;
+      &:before,
+      &:after {
+        transition: background-color 0.6s ease-in-out, border-color 0.6s ease-in-out;
+        -webkit-transition: background-color 0.6s ease-in-out, border-color 0.6s ease-in-out;
+        -moz-transition: background-color 0.6s ease-in-out, border-color 0.6s ease-in-out;
+      }
+
+    }
+  }
+
+  // current state
+
+  > li.progress-current {
+    color: $active;
+    .bubble {
+      @include bubble-style($active);
+    }
+  }
+
+  // button states
+
+  > li a:hover .bubble {
+    @include bubble-style($hover);
+  }
+
+  // override states
+
+  > li.danger .bubble {
+    @include bubble-style($step-danger);
+  }
+  > li.warning .bubble {
+    @include bubble-style($step-warning);
+  }
+  > li.info .bubble {
+    @include bubble-style($step-info);
+  }
+
+  // stacked version
+
+  &.stacked {
+    @extend .no-flexer;
+    > li {
+      text-indent: -10px;
+      text-align: center;
+      display: block;
+    }
+    > li .bubble:before,
+    > li .bubble:after {
+      left: 50%;
+      margin-left: -$bubble-line-thickness / 2;
+      width: $bubble-line-thickness;
+      height: 100%;
+    }
+    .stacked-text {
+      position: relative;
+      z-index: 10;
+      top: 0;
+      margin-left: 60% !important;
+      width: 45% !important;
+      display: inline-block;
+      text-align: left;
+      line-height: 1.2em;
+    }
+    > li a {
+      border: none;
+    }
+  }
+  &.stacked.nocenter {
+    > li .bubble {
+      margin-left: 0;
+      margin-right: 0
+    }
+    > li .bubble:before,
+    > li .bubble:after {
+      left: $bubble-size / 2;
+    }
+    .stacked-text {
+      width: auto !important;
+      display: block;
+      margin-left: $bubble-size * 2 !important;
+    }
+  }
+}
+
+
 .card{
   background:#fff;
   display:block;
@@ -318,7 +503,7 @@ span.required {
 
         &.btn-default:hover{
           background:#f5f5f5;
-          color:$brand-primary;
+          color:$brand-info;
         }
       }
 

app/styles-dev/main/components/_report.scss

@@ -159,7 +159,34 @@
     }
 
 }
+td.labelrow {
+  padding: 0 0 10px;
+}
 
+tr.bottomborder td, tr.bottomborder th {
+  border-bottom:1px solid #C0C0C0;
+  padding-bottom:2px
+}
+tr.toppadding td, tr.toppadding th {
+  padding-top:8px
+}
+
+tr.graybg td, tr.graybg th {
+  background-color: #F0F0F0;
+}
+
+td.graybg {
+  background-color: #F0F0F0;
+}
+
+
+td.left-border {
+  border-left: thick solid #F0F0F0;
+}
+
+hr.marginbottom {
+  margin-bottom: 8px;
+}
 .margintopminustenpx {
     margin-top: -10px;
 

app/styles-dev/main/components/_variables.scss

@@ -8,6 +8,7 @@ $bootstrap-sass-asset-helper: false !default;
 //
 //## Gray and brand colors for use across Bootstrap.
 
+
 $gray-base:              #000 !default;
 $gray-darker:            lighten($gray-base, 13.5%) !default; // #222
 $gray-dark:              lighten($gray-base, 20%) !default;   // #333
@@ -21,6 +22,23 @@ $brand-info:            #5bc0de !default;
 $brand-warning:         #f0ad4e !default;
 $brand-danger:          #d9534f !default;
 
+//Progress bar
+$incomplete: #bbb !default;
+$complete: #65d074 !default;
+$active: #337AB7 !default;
+$hover: #5671d0 !default;
+$step-danger: #d3140f !default;
+$step-warning: #edb10a !default;
+$step-info: #5b32d6 !default;
+// sizing
+
+$bubble-size: 20px !default;
+$bubble-line-thickness: 3px !default;
+$border-thickness: 1px !default;
+$darken-amount: 30% !default;
+
+// misc
+$mobile-size: 400px !default;
 
 //== Scaffolding
 //

app/styles/styles.css

@@ -7529,6 +7529,163 @@ span.required {
 .table th {
   background: #f5f5f5; }
 
+.flexer, .progress-indicator {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex; }
+
+.no-flexer, .progress-indicator.stacked {
+  display: block; }
+
+.no-flexer-element {
+  -ms-flex: 0;
+  -webkit-flex: 0;
+  -moz-flex: 0;
+  flex: 0; }
+
+.flexer-element, .progress-indicator > li {
+  -ms-flex: 1;
+  -webkit-flex: 1;
+  -moz-flex: 1;
+  flex: 1; }
+
+.progress-indicator {
+  margin: 0;
+  padding: 0;
+  font-size: 80%;
+  text-transform: uppercase;
+  margin-bottom: 1em; }
+  .progress-indicator > li {
+    list-style: none;
+    text-align: center;
+    width: auto;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    text-overflow: ellipsis;
+    color: #bbb;
+    display: block; }
+    .progress-indicator > li:hover {
+      color: #6f6f6f; }
+  .progress-indicator > li .bubble {
+    border-radius: 1000px;
+    width: 20px;
+    height: 20px;
+    background-color: #bbb;
+    display: block;
+    margin: 0 auto 0.5em auto;
+    border-bottom: 1px solid #888888; }
+  .progress-indicator > li .bubble:before,
+  .progress-indicator > li .bubble:after {
+    display: block;
+    position: absolute;
+    top: 9px;
+    width: 100%;
+    height: 3px;
+    content: '';
+    background-color: #bbb; }
+    .progress-indicator > li .bubble:before:hover,
+    .progress-indicator > li .bubble:after:hover {
+      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
+  .progress-indicator > li .bubble:before {
+    left: 0; }
+  .progress-indicator > li .bubble:after {
+    right: 0; }
+  .progress-indicator > li:first-child .bubble:before,
+  .progress-indicator > li:first-child .bubble:after {
+    width: 50%;
+    margin-left: 50%; }
+  .progress-indicator > li:last-child .bubble:before,
+  .progress-indicator > li:last-child .bubble:after {
+    width: 50%;
+    margin-right: 50%; }
+  .progress-indicator > li.progress-done {
+    color: #65d074; }
+    .progress-indicator > li.progress-done .bubble {
+      background-color: #65d074;
+      color: #65d074;
+      border-color: #247830;
+      transition: background-color 0.6s ease-in-out, color 0.6s ease-in-out;
+      -webkit-transition: background-color 0.6s ease-in-out, color 0.6s ease-in-out;
+      -moz-transition: background-color 0.6s ease-in-out, color 0.6s ease-in-out; }
+      .progress-indicator > li.progress-done .bubble:before, .progress-indicator > li.progress-done .bubble:after {
+        background-color: #65d074;
+        border-color: #247830; }
+      .progress-indicator > li.progress-done .bubble:before, .progress-indicator > li.progress-done .bubble:after {
+        transition: background-color 0.6s ease-in-out, border-color 0.6s ease-in-out;
+        -webkit-transition: background-color 0.6s ease-in-out, border-color 0.6s ease-in-out;
+        -moz-transition: background-color 0.6s ease-in-out, border-color 0.6s ease-in-out; }
+  .progress-indicator > li.progress-current {
+    color: #337AB7; }
+    .progress-indicator > li.progress-current .bubble {
+      background-color: #337AB7;
+      color: #337AB7;
+      border-color: #122a3f; }
+      .progress-indicator > li.progress-current .bubble:before, .progress-indicator > li.progress-current .bubble:after {
+        background-color: #337AB7;
+        border-color: #122a3f; }
+  .progress-indicator > li a:hover .bubble {
+    background-color: #5671d0;
+    color: #5671d0;
+    border-color: #1f306e; }
+    .progress-indicator > li a:hover .bubble:before, .progress-indicator > li a:hover .bubble:after {
+      background-color: #5671d0;
+      border-color: #1f306e; }
+  .progress-indicator > li.danger .bubble {
+    background-color: #d3140f;
+    color: #d3140f;
+    border-color: #440605; }
+    .progress-indicator > li.danger .bubble:before, .progress-indicator > li.danger .bubble:after {
+      background-color: #d3140f;
+      border-color: #440605; }
+  .progress-indicator > li.warning .bubble {
+    background-color: #edb10a;
+    color: #edb10a;
+    border-color: #5a4304; }
+    .progress-indicator > li.warning .bubble:before, .progress-indicator > li.warning .bubble:after {
+      background-color: #edb10a;
+      border-color: #5a4304; }
+  .progress-indicator > li.info .bubble {
+    background-color: #5b32d6;
+    color: #5b32d6;
+    border-color: #25135d; }
+    .progress-indicator > li.info .bubble:before, .progress-indicator > li.info .bubble:after {
+      background-color: #5b32d6;
+      border-color: #25135d; }
+  .progress-indicator.stacked > li {
+    text-indent: -10px;
+    text-align: center;
+    display: block; }
+  .progress-indicator.stacked > li .bubble:before,
+  .progress-indicator.stacked > li .bubble:after {
+    left: 50%;
+    margin-left: -1.5px;
+    width: 3px;
+    height: 100%; }
+  .progress-indicator.stacked .stacked-text {
+    position: relative;
+    z-index: 10;
+    top: 0;
+    margin-left: 60% !important;
+    width: 45% !important;
+    display: inline-block;
+    text-align: left;
+    line-height: 1.2em; }
+  .progress-indicator.stacked > li a {
+    border: none; }
+  .progress-indicator.stacked.nocenter > li .bubble {
+    margin-left: 0;
+    margin-right: 0; }
+  .progress-indicator.stacked.nocenter > li .bubble:before,
+  .progress-indicator.stacked.nocenter > li .bubble:after {
+    left: 10px; }
+  .progress-indicator.stacked.nocenter .stacked-text {
+    width: auto !important;
+    display: block;
+    margin-left: 40px !important; }
+
 .card {
   background: #fff;
   display: block;
@@ -7601,7 +7758,7 @@ span.required {
         border-left: 1px solid #e5e5e5; }
       .card .toolbar > .btn-group .btn.btn-default:hover {
         background: #f5f5f5;
-        color: #4f99ed; }
+        color: #5bc0de; }
     .card .toolbar > .btn-group.open .dropdown-toggle {
       -webkit-box-shadow: none;
       -moz-box-shadow: none;
@@ -8093,6 +8250,28 @@ div.chosen-container.chosen-container-single {
     width: auto;
     vertical-align: middle; }
 
+td.labelrow {
+  padding: 0 0 10px; }
+
+tr.bottomborder td, tr.bottomborder th {
+  border-bottom: 1px solid #C0C0C0;
+  padding-bottom: 2px; }
+
+tr.toppadding td, tr.toppadding th {
+  padding-top: 8px; }
+
+tr.graybg td, tr.graybg th {
+  background-color: #F0F0F0; }
+
+td.graybg {
+  background-color: #F0F0F0; }
+
+td.left-border {
+  border-left: thick solid #F0F0F0; }
+
+hr.marginbottom {
+  margin-bottom: 8px; }
+
 .margintopminustenpx {
   margin-top: -10px; }
   .margintopminustenpx input {

app/views/clients/clientactions.html

@@ -4,8 +4,13 @@
             <li><a href="#/viewclient/{{clientId}}">{{'label.anchor.viewclient' | translate}}</a></li>
             <li class="active">{{breadcrumbName | translate}}</li>
         </ul>
-    <api-validate></api-validate>
-    <form name="clientactionform" novalidate="" class="card form-horizontal well" ng-submit="submit()">
+    <wizard current-step="step()" on-finish="submitDatatable()">
+        <wz-step wz-title="{{breadcrumbName | translate}}">
+    <form name="clientactionform" novalidate="" class="card form-horizontal well">
+        <div ng-show="submittedDatatables.length>0" uib-alert type="success">
+            <span ng-repeat="table in submittedDatatables"><i class="fa fa-check"></i>Entry in ` {{table}} ` has been made successfully. If the inputs are changed, the datatable entries will be updated.<br></span>
+        </div>
+        <api-validate></api-validate>
         <div class="form-group" ng-show="showDateField">
             <label class="control-label col-sm-2">{{labelName | translate}}<span class="required">*</span></label>
 
@@ -60,11 +65,91 @@
                 <textarea rows="2" id="note" ng-model="formData.note" class="form-control"></textarea>
             </div>
         </div>
-
-        <div class="col-md-offset-3" ng-show="!showDeleteClient">
+        <div>
+            <button id="save1"  wz-next class="btn btn-primary pull-right" ng-show="isEntityDatatables">
+                {{'label.button.proceed' | translate}}
+            </button>
+        </div>
+        <div class="col-md-offset-3" ng-show="!showDeleteClient && !isEntityDatatables">
             <button id="cancel" type="reset" ng-click="cancel()" class="btn btn-default">{{'label.button.cancel' | translate}}
             </button>
-            <button id="save" type="submit" has-permission='{{taskPermissionName}}' class="btn btn-primary">{{'label.button.save' | translate}}</button>
+            <button id="save" type="submit" has-permission='{{taskPermissionName}}' class="btn btn-primary" wz-next>{{'label.button.save' | translate}}</button>
         </div>
     </form>
+        </wz-step>
+        <wz-step ng-if="isEntityDatatables" ng-repeat="datatable in datatables" wz-title="{{datatable.registeredTableName}}">
+            <div class="card-content">
+                <form class="card form-horizontal well">
+                    <div ng-show="submittedDatatables.length>0" uib-alert type="success">
+                        <span ng-repeat="table in submittedDatatables"><i class="fa fa-check"></i>Entry in ` {{table}} ` has been made successfully. If the inputs are changed, the datatable entries will be updated.<br></span>
+                    </div>
+                    <api-validate></api-validate>
+                    <fieldset>
+                        <legend>{{datatable.registeredTableName}}</legend>
+                        <div class="form-group" ng-repeat="columnHeader in datatable.columnHeaders">
+                            <label class="control-label col-sm-3">{{ columnHeader.columnName | prettifyDataTableColumn }}
+                                <span ng-show="!columnHeader.isColumnNullable" class="required">*</span>
+                            </label>
+                            <div class="col-sm-3">
+                                <input ng-show="fieldType(columnHeader.columnDisplayType) == 'TEXT'" type="text"
+                                       ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]" class="form-control"/>
+                                <input ng-show="fieldType(columnHeader.columnDisplayType) == 'DATE'" type="text"
+                                       datepicker-pop="dd MMMM yyyy" ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].dateType.date"
+                                       is-open="opened{{$index}}" class="form-control"/>
+                                <div ng-show="fieldType(columnHeader.columnDisplayType) == 'DATETIME'" class="form-inline">
+                                    <div class="form-group">
+                                        <input type="text" datepicker-pop="dd MMMM yyyy"
+                                               ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].dateTimeType.date"
+                                               is-open="opened{{$index}}" class="form-control"/>
+                                    </div>
+                                    <div class="form-group">
+                                        <input type="time" placeholder="HH:MM:SS"
+                                               ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].dateTimeType.time" class="form-control"/>
+                                    </div>
+                                </div>
+                                <div ng-show="fieldType(columnHeader.columnDisplayType) == 'BOOLEAN'">
+                                    <label class="radio-inline">
+                                        <input type="radio" ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                               value="true"/>
+                                        {{'label.input.true' | translate}}
+                                    </label>
+                                    <label class="radio-inline">
+                                        <input type="radio" ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                               value="false"/>
+                                        {{'label.input.false' | translate}}
+                                    </label>
+                                </div>
+                                <span data-ng-switch on="columnHeader.columnDisplayType">
+		                  <select ng-show="fieldType(columnHeader.columnDisplayType) == 'SELECT'"
+                                  data-ng-switch-when="CODELOOKUP"
+                                  ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                  ng-options="columnValue.id as columnValue.value for columnValue in columnHeader.columnValues"
+                                  value="{{columnValue.id}}" class="form-control">
+		                     <option value="">{{'label.selectone' | translate}}</option>
+		                  </select>
+		                  <select ng-show="fieldType(columnHeader.columnDisplayType) == 'SELECT'"
+                                  data-ng-switch-when="CODEVALUE"
+                                  ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                  ng-options="columnValue.value as columnValue.value for columnValue in columnHeader.columnValues"
+                                  value="{{columnValue.id}}" class="form-control">
+		                     <option value="">{{'label.selectone' | translate}}</option>
+		                  </select>
+		               </span>
+                            </div>
+                        </div>
+                        <div class="pull-right" ng-if="!$last">
+                            <button id="save4" type="submit" class="btn btn-primary" wz-next>
+                                {{'label.button.proceed' | translate}}
+                            </button>
+                        </div>
+                        <div class="col-md-offset-5" ng-if="$last">
+                            <button id="cancel" type="reset" ng-click="cancel()" class="btn btn-default">{{'label.button.cancel' | translate}}
+                            </button>
+                            <button id="save" type="submit" has-permission='{{taskPermissionName}}' class="btn btn-primary" wz-next>{{'label.button.save' | translate}}</button>
+                        </div>
+                    </fieldset>
+                </form>
+            </div>
+        </wz-step>
+
 </div>

app/views/clients/createclient.html

@@ -6,13 +6,13 @@
       <li ng-if="groupid"><a href="#/viewgroup/{{groupid}}">{{'label.anchor.viewgroup' | translate}}</a></li>
       <li class="active">{{'label.anchor.createclient' | translate}}</li>
    </ul>
-   <wizard current-step="step">
+   <wizard current-step="step" class="card well">
     <wz-step icon="fa fa-circle-o" data-title="{{'label.heading.createclient' | translate}}">
         <div class="card-content">
-            <form name="createclientform" novalidate="" class="card form-horizontal well" rc-submit="submit()">
+            <form name="createclientform" novalidate="" class="form-horizontal" rc-submit="submit()">
                <api-validate></api-validate>
                <fieldset>
-                  <legend>{{'label.heading.createclient' | translate}}</legend>
+                  <!--<legend>{{'label.heading.createclient' | translate}}</legend>-->
                   <div class="form-group">
                      <label class="control-label col-sm-2">
                      {{'label.input.office' | translate}} <span ng-show="forceOffice == null" class="required">*</span>
@@ -554,7 +554,7 @@
     </wz-step>
     <wz-step ng-if="datatables" ng-repeat="datatable in datatables" icon="fa fa-circle-o" data-title="{{datatable.registeredTableName}}">
     	<div class="card-content">
-		   <form class="card form-horizontal well" ng-submit="submit()">
+		   <form class="form-horizontal" ng-submit="submit()">
 		      <api-validate></api-validate>
 		      <fieldset>
 		      	<legend>{{datatable.registeredTableName}}</legend>

app/views/groups/creategroup.html

@@ -6,12 +6,12 @@
         <li ng-if="centerid"><a href="#/viewcenter/{{centerid}}">{{'label.anchor.viewcenter' | translate}}</a></li>
         <li class="active">{{'label.anchor.creategroup' | translate}}</li>
     </ul>
-	<wizard current-step="step">
-			<wz-step icon="fa fa-circle-o" data-title="{{'label.heading.creategroup' | translate}}">
-					<form name="creategroupform" novalidate="" class="form-horizontal card well" rc-submit="submit()">
+	<wizard current-step="step" class="card well" on-finish="submit()">
+			<wz-step  wz-title="{{'label.heading.creategroup' | translate}}">
+					<form name="creategroupform" novalidate="" class="form-horizontal" rc-submit="submit()">
 						<fieldset>
 							<api-validate></api-validate>
-							<h3>{{'label.heading.creategroup' | translate}}</h3>
+							<!--<h3>{{'label.heading.creategroup' | translate}}</h3>-->
 							<hr>
 							<div class="form-group">
 								<label class="control-label col-sm-2">
@@ -127,12 +127,98 @@
 									</div>
 								</div>
 							</div>
-							<div class="col-md-offset-5">
+							<div class="col-md-offset-5" ng-hide="datatables.length > 0">
 								<a id="cancel" ng-href="{{cancel}}" class="btn btn-default">{{'label.button.cancel' | translate}}</a>
-								<button id="save" type="submit" class="btn btn-primary" has-permission='CREATE_GROUP'>{{'label.button.save' | translate}}</button>
+								<button id="save" type="submit" class="btn btn-primary" has-permission='CREATE_GROUP' wz-next>{{'label.button.save' | translate}}</button>
 							</div>
+							<hr>
+							<button class="btn btn-default pull-left" wz-previous><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
+							</button>
+							<button class="btn btn-default pull-right" wz-next>Next&nbsp;&nbsp;<i
+									class="fa fa-arrow-right"></i></button>
 						</fieldset>
 					</form>
 			</wz-step>
+			<wz-step ng-if="datatables" ng-repeat="datatable in datatables"
+					 wz-title="{{datatable.registeredTableName}}" id="dynamicSteps">
+				<form name="Datatables" class="form-horizontal" ng-submit="submit()">
+					<fieldset>
+						<api-validate></api-validate>
+						<!--<h3><strong>{{datatable.registeredTableName}}</strong></h3>-->
+						<hr/>
+						<div class="form-group" ng-repeat="columnHeader in datatable.columnHeaderData">
+							<label class="control-label col-sm-3">{{ columnHeader.columnName | prettifyDataTableColumn }}
+								<span ng-show="!columnHeader.isColumnNullable" class="required">*</span>
+							</label>
+
+							<div class="col-sm-3">
+								<input ng-show="fieldType(columnHeader.columnDisplayType) == 'TEXT'" type="text"
+									   ng-model="formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+									   class="form-control"/>
+								<input ng-show="fieldType(columnHeader.columnDisplayType) == 'DATE'" type="text"
+									   datepicker-pop="dd MMMM yyyy"
+									   ng-model="formDat.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+									   is-open="opened{{$index}}" class="form-control"/>
+								<div ng-show="fieldType(columnHeader.columnDisplayType) == 'DATETIME'" class="form-inline">
+									<div class="form-group">
+										<input type="text" datepicker-pop="dd MMMM yyyy"
+											   ng-model="formDat.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].date"
+											   is-open="opened{{$index}}" class="form-control"/>
+									</div>
+									<div class="form-group">
+										<input type="time" placeholder="HH:MM:SS"
+											   ng-model="formDat.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].time"
+											   class="form-control"/>
+									</div>
+								</div>
+								<div ng-show="fieldType(columnHeader.columnDisplayType) == 'BOOLEAN'">
+									<label class="radio-inline">
+										<input type="radio"
+											   ng-model="formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+											   value="true"/>
+										{{'label.input.true' | translate}}
+									</label>
+									<label class="radio-inline">
+										<input type="radio"
+											   ng-model="formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+											   value="false"/>
+										{{'label.input.false' | translate}}
+									</label>
+								</div>
+								<span data-ng-switch on="columnHeader.columnDisplayType">
+											<select ng-show="fieldType(columnHeader.columnDisplayType) == 'SELECT'"
+													data-ng-switch-when="CODELOOKUP"
+													ng-model="formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+													ng-options="columnValue.id as columnValue.value for columnValue in columnHeader.columnValues"
+													value="{{columnValue.id}}" class="form-control">
+												<option value="">{{'label.selectone' | translate}}</option>
+											</select>
+											<select ng-show="fieldType(columnHeader.columnDisplayType) == 'SELECT'"
+													data-ng-switch-when="CODEVALUE"
+													ng-model="formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+													ng-options="columnValue.value as columnValue.value for columnValue in columnHeader.columnValues"
+													value="{{columnValue.id}}" class="form-control">
+												<option value="">{{'label.selectone' | translate}}</option>
+											</select>
+										</span>
+							</div>
+						</div>
+						<!--<div class="col-md-offset-5" ng-if="$last">-->
+						<!--<button id="cancel3" type="reset" class="btn btn-default" ng-click="cancel()">-->
+						<!--{{'label.button.cancel' | translate}}-->
+						<!--</button>-->
+						<!--<button id="save3" type="submit" has-permission='CREATE_LOAN' class="btn btn-primary"-->
+						<!--ng-show="loanaccountinfo">{{'label.button.save' |-->
+						<!--translate}}-->
+						<!--</button>-->
+						<!--</div>-->
+						<hr>
+						<div class="col-md-offset-5">
+							<a id="cancel" ng-href="{{cancel}}" class="btn btn-default">{{'label.button.cancel' | translate}}</a>
+							<button id="save" type="submit" class="btn btn-primary" has-permission='CREATE_GROUP' wz-next>{{'label.button.save' | translate}}</button>
+						</div>
+					</fieldset>
+				</form>
+			</wz-step>
 	</wizard>
 </div>

app/views/groups/editgroup.html

@@ -1,12 +1,12 @@
 <div class="content-container" ng-controller="EditGroupController">
-    <api-validate></api-validate>
-    <div class="card">
-        <div class="content">
-            <div data-ng-switch on="managecode">
+    <wizard current-step="step" on-finish="submitDatatable()">
+        <div data-ng-switch on="managecode" class="card well">
+            <wz-step wz-title="{{'label.heading.editgroup' | translate}}">
         <form name="editgroupform" novalidate="" class="form-horizontal" rc-submit="updateGroup()"
               data-ng-switch-when="1">
             <fieldset>
-                <legend>{{'label.heading.editgroup' | translate}}</legend>
+                <api-validate></api-validate>
+                <!--<legend>{{'label.heading.editgroup' | translate}}</legend>-->
                 <div class="form-group">
                     <label class="control-label col-sm-2" for="name">{{'label.input.name' | translate}}<span
                             class="required">*</span></label>
@@ -53,7 +53,7 @@
                 </div>
             </fieldset>
         </form>
-        <form class="form-horizontal well" ng-switch-when="2">
+        <form class="form-horizontal card well" ng-switch-when="2">
             <div class="form-group">
                 <label class="control-label col-sm-2">{{ 'label.input.enteractivationdate' | translate }}<span
                             class="required">*</span></label>
@@ -63,15 +63,95 @@
                 </div>
             </div>
             <div class="form-group">
-                <div class="col-sm-3 col-md-offset-2">
+                <button id="save1"  wz-next class="btn btn-primary pull-right" ng-show="isEntityDatatables">
+                    {{'label.button.proceed' | translate}}
+                </button>
+
+                <div class="col-sm-3 col-md-offset-2" ng-hide="isEntityDatatables">
                     <a id="cancel" href="#/viewgroup/{{editGroup.id}}" class="btn btn-default">{{'label.button.cancel' | translate}}</a>
-                    <button id="save" type="button" class="btn btn-primary" data-ng-click="activate()"><i
+                    <button id="save" type="button" class="btn btn-primary" wz-next ><i
                             class="fa fa-check-sign " has-permission='ACTIVATE_GROUP'></i>{{ 'label.button.activate' | translate }}
                     </button>
                 </div>
+
             </div>
         </form>
-    </div>
-        </div>
-    </div>
+            </wz-step>
+            <wz-step ng-if="isEntityDatatables" ng-repeat="datatable in datatables" wz-title="{{datatable.registeredTableName}}">
+                <div class="card-content">
+                    <form class="form-horizontal">
+                        <div ng-show="submittedDatatables.length>0" uib-alert type="success">
+                            <span ng-repeat="table in submittedDatatables"><i class="fa fa-check"></i>Entry in ` {{table}} ` has been made successfully. If the inputs are changed, the datatable entries will be updated.<br></span>
+                        </div>
+                        <api-validate></api-validate>
+                        <fieldset>
+                            <!--<legend>{{datatable.registeredTableName}}</legend>-->
+                            <div class="form-group" ng-repeat="columnHeader in datatable.columnHeaders">
+                                <label class="control-label col-sm-3">{{ columnHeader.columnName | prettifyDataTableColumn }}
+                                    <span ng-show="!columnHeader.isColumnNullable" class="required">*</span>
+                                </label>
+                                <div class="col-sm-3">
+                                    <input ng-show="fieldType(columnHeader.columnDisplayType) == 'TEXT'" type="text"
+                                           ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]" class="form-control"/>
+                                    <input ng-show="fieldType(columnHeader.columnDisplayType) == 'DATE'" type="text"
+                                           datepicker-pop="dd MMMM yyyy" ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].dateType.date"
+                                           is-open="opened{{$index}}" class="form-control"/>
+                                    <div ng-show="fieldType(columnHeader.columnDisplayType) == 'DATETIME'" class="form-inline">
+                                        <div class="form-group">
+                                            <input type="text" datepicker-pop="dd MMMM yyyy"
+                                                   ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].dateTimeType.date"
+                                                   is-open="opened{{$index}}" class="form-control"/>
+                                        </div>
+                                        <div class="form-group">
+                                            <input type="time" placeholder="HH:MM:SS"
+                                                   ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].dateTimeType.time" class="form-control"/>
+                                        </div>
+                                    </div>
+                                    <div ng-show="fieldType(columnHeader.columnDisplayType) == 'BOOLEAN'">
+                                        <label class="radio-inline">
+                                            <input type="radio" ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                                   value="true"/>
+                                            {{'label.input.true' | translate}}
+                                        </label>
+                                        <label class="radio-inline">
+                                            <input type="radio" ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                                   value="false"/>
+                                            {{'label.input.false' | translate}}
+                                        </label>
+                                    </div>
+                                    <span data-ng-switch on="columnHeader.columnDisplayType">
+		                  <select ng-show="fieldType(columnHeader.columnDisplayType) == 'SELECT'"
+                                  data-ng-switch-when="CODELOOKUP"
+                                  ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                  ng-options="columnValue.id as columnValue.value for columnValue in columnHeader.columnValues"
+                                  value="{{columnValue.id}}" class="form-control">
+		                     <option value="">{{'label.selectone' | translate}}</option>
+		                  </select>
+		                  <select ng-show="fieldType(columnHeader.columnDisplayType) == 'SELECT'"
+                                  data-ng-switch-when="CODEVALUE"
+                                  ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                  ng-options="columnValue.value as columnValue.value for columnValue in columnHeader.columnValues"
+                                  value="{{columnValue.id}}" class="form-control">
+		                     <option value="">{{'label.selectone' | translate}}</option>
+		                  </select>
+		               </span>
+                                </div>
+                            </div>
+                            <div class="pull-right" ng-if="!$last">
+                                <button id="save4" type="submit" class="btn btn-primary" wz-next>
+                                    {{'label.button.proceed' | translate}}
+                                </button>
+                            </div>
+                            <div class="col-md-offset-5" ng-if="$last">
+                                    <a id="cancel" href="#/viewgroup/{{editGroup.id}}" class="btn btn-default">{{'label.button.cancel' | translate}}</a>
+                                    <button id="save" type="button" class="btn btn-primary" wz-next><i
+                                            class="fa fa-check-sign " has-permission='ACTIVATE_GROUP'></i>{{ 'label.button.activate' | translate }}
+                                    </button>
+                            </div>
+                        </fieldset>
+                    </form>
+                </div>
+            </wz-step>
+            </div>
+    </wizard>
 </div>

app/views/loans/loanaccountactions.html

@@ -5,13 +5,18 @@
             <li class="active">{{'label.anchor.'+action | translate}}</li>
         </ul>
     </div>
-    <form class="form-horizontal card well" name="loanactionform" novalidate="" ng-submit="submit()">
+    <wizard on-finish="submitDatatable()" current-step = "step" class="card well">
+        <wz-step wz-title="{{ title | translate}}">
+    <form class="form-horizontal" name="loanactionform" novalidate="" >
         <fieldset>
+            <div ng-show="submittedDatatables.length > 0" uib-alert type="success">
+                <span ng-repeat="table in submittedDatatables"><i class="fa fa-check"></i>Entry in ` {{table}} ` has been made successfully. If the inputs are changed, the datatable entries will be updated.<br></span>
+            </div>
             <api-validate></api-validate>
             <table width="100%">
                 <tr>
                     <td>
-                        <legend>{{ title | translate}}</legend>
+                        <!--<legend>{{ title | translate}}</legend>-->
                     </td>
                     <td ng-show="addDisburseDetails" align="right">
                         <legend>
@@ -37,7 +42,7 @@
 
                 <div class="col-sm-3">
                     <input id="expectedDisbursementDate" sort type="text" class="form-control"
-                           datepicker-pop="dd MMMM yyyy" ng-model="expectedDisbursementDate"
+                           datepicker-pop="dd MMMM yyyy" ng-model="form.expectedDisbursementDate"
                            min="'2000-01-01'" max="restrictDate"/>
                 </div>
             </div>
@@ -363,28 +368,128 @@
                 </tr>
                 </tbody>
             </table>
-            <div class="form-group" ng-show="showDelete || showwaiveforspecicficduedate">
-                <label class="control-label col-sm-2">{{ 'label.areyousure' | translate}}</label>
+            <div class="">
+                <button id="save1"  wz-next class="btn btn-primary pull-right" ng-show="isEntityDatatables">
+                    {{'label.button.proceed' | translate}}
+                </button>
+                <div ng-hide="isEntityDatatables">
+                    <div class="form-group" ng-show="showDelete || showwaiveforspecicficduedate">
+                        <label class="control-label col-sm-2 col-md-offset-10">{{ 'label.areyousure' | translate}}</label>
+                    </div>
+                    <div class="col-md-offset-2 col-md-offset-10" ng-show="showDelete || showwaiveforspecicficduedate">
+                        <button type="reset" ng-click="cancel()" class="btn btn-default">{{ 'label.button.cancel' |
+                            translate}}
+                        </button>
+                        <button type="submit" has-permission='{{taskPermissionName}}' wz-next
+                                class="btn btn-primary">{{
+                            'label.button.confirm' |
+                            translate}}
+                        </button>
+                    </div>
+                    <div class="col-md-offset-2 col-md-offset-10" ng-hide="showDelete || showwaiveforspecicficduedate">
+                        <button id="cancel" type="reset" class="btn btn-default" ng-click="cancel()">{{ 'label.button.cancel' |
+                            translate}}
+                        </button>
+                        <button id="save" type="submit" has-permission='{{taskPermissionName}}' wz-next class="btn btn-primary">{{
+                            'label.button.save' | translate}}
+                        </button>
+                    </div>
+                </div>
             </div>
-            <div class="col-md-offset-2" ng-show="showDelete || showwaiveforspecicficduedate">
-                <button type="reset" ng-click="cancel()" class="btn btn-default">{{ 'label.button.cancel' |
-                    translate}}
-                </button>
-                <button type="submit" has-permission='{{taskPermissionName}}' ng-click="submit()"
-                        class="btn btn-primary">{{
-                    'label.button.confirm' |
-                    translate}}
-                </button>
-            </div>
-            <div class="col-md-offset-2" ng-hide="showDelete || showwaiveforspecicficduedate">
-                <button id="cancel" type="reset" class="btn btn-default" ng-click="cancel()">{{ 'label.button.cancel' |
-                    translate}}
-                </button>
-                <button id="save" type="submit" has-permission='{{taskPermissionName}}' class="btn btn-primary">{{
-                    'label.button.save' | translate}}
-                </button>
-            </div>
-
         </fieldset>
     </form>
+        </wz-step>
+        <wz-step ng-if="isEntityDatatables" ng-repeat="datatable in datatables" wz-title="{{datatable.registeredTableName}}">
+            <div class="card-content">
+                <form class="form-horizontal">
+                    <div ng-show="submittedDatatables.length>0" uib-alert type="success">
+                        <span ng-repeat="table in submittedDatatables"><i class="fa fa-check"></i>Entry in ` {{table}} ` has been made successfully. If the inputs are changed, the datatable entries will be updated.<br></span>
+                    </div>
+                    <api-validate></api-validate>
+                    <fieldset>
+                        <!--<legend>{{datatable.registeredTableName}}</legend>-->
+                        <div class="form-group" ng-repeat="columnHeader in datatable.columnHeaders">
+                            <label class="control-label col-sm-3">{{ columnHeader.columnName | prettifyDataTableColumn }}
+                                <span ng-show="!columnHeader.isColumnNullable" class="required">*</span>
+                            </label>
+                            <div class="col-sm-3">
+                                <input ng-show="fieldType(columnHeader.columnDisplayType) == 'TEXT'" type="text"
+                                       ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]" class="form-control"/>
+                                <input ng-show="fieldType(columnHeader.columnDisplayType) == 'DATE'" type="text"
+                                           datepicker-pop="dd MMMM yyyy" ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].dateType.date"
+                                       is-open="opened{{$index}}" class="form-control"/>
+                                <div ng-show="fieldType(columnHeader.columnDisplayType) == 'DATETIME'" class="form-inline">
+                                    <div class="form-group">
+                                        <input type="text" datepicker-pop="dd MMMM yyyy"
+                                               ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].dateTimeType.date"
+                                               is-open="opened{{$index}}" class="form-control"/>
+                                    </div>
+                                    <div class="form-group">
+                                        <input type="time" placeholder="HH:MM:SS"
+                                               ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].dateTimeType.time" class="form-control"/>
+                                    </div>
+                                </div>
+                                <div ng-show="fieldType(columnHeader.columnDisplayType) == 'BOOLEAN'">
+                                    <label class="radio-inline">
+                                        <input type="radio" ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                               value="true"/>
+                                        {{'label.input.true' | translate}}
+                                    </label>
+                                    <label class="radio-inline">
+                                        <input type="radio" ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                               value="false"/>
+                                        {{'label.input.false' | translate}}
+                                    </label>
+                                </div>
+                                <span data-ng-switch on="columnHeader.columnDisplayType">
+		                  <select ng-show="fieldType(columnHeader.columnDisplayType) == 'SELECT'"
+                                  data-ng-switch-when="CODELOOKUP"
+                                  ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                  ng-options="columnValue.id as columnValue.value for columnValue in columnHeader.columnValues"
+                                  value="{{columnValue.id}}" class="form-control">
+		                     <option value="">{{'label.selectone' | translate}}</option>
+		                  </select>
+		                  <select ng-show="fieldType(columnHeader.columnDisplayType) == 'SELECT'"
+                                  data-ng-switch-when="CODEVALUE"
+                                  ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                  ng-options="columnValue.value as columnValue.value for columnValue in columnHeader.columnValues"
+                                  value="{{columnValue.id}}" class="form-control">
+		                     <option value="">{{'label.selectone' | translate}}</option>
+		                  </select>
+		               </span>
+                            </div>
+                        </div>
+                        <div class="pull-right" ng-if="!$last">
+                            <button id="save4" type="submit" class="btn btn-primary" wz-next>
+                                {{'label.button.proceed' | translate}}
+                            </button>
+                        </div>
+                        <div class="col-md-offset-5" ng-if="$last">
+                            <div class="form-group" ng-show="showDelete || showwaiveforspecicficduedate">
+                                <label class="control-label col-sm-2">{{ 'label.areyousure' | translate}}</label>
+                            </div>
+                            <div class="col-md-offset-2" ng-show="showDelete || showwaiveforspecicficduedate">
+                                <button type="reset" ng-click="cancel()" class="btn btn-default">{{ 'label.button.cancel' |
+                                    translate}}
+                                </button>
+                                <button type="submit" has-permission='{{taskPermissionName}}' wz-next
+                                        class="btn btn-primary">{{
+                                    'label.button.confirm' |
+                                    translate}}
+                                </button>
+                            </div>
+                            <div class="col-md-offset-2" ng-hide="showDelete || showwaiveforspecicficduedate">
+                                <button id="cancel" type="reset" class="btn btn-default" ng-click="cancel()">{{ 'label.button.cancel' |
+                                    translate}}
+                                </button>
+                                <button id="save" type="submit" has-permission='{{taskPermissionName}}' wz-next class="btn btn-primary">{{
+                                    'label.button.save' | translate}}
+                                </button>
+                            </div>
+                        </div>
+                    </fieldset>
+                </form>
+            </div>
+        </wz-step>
+    </wizard>
 </div>

app/views/organization/entitydatatablechecks/entitydatatablechecks.html

@@ -3,8 +3,8 @@
         <li><a href="#/organization">{{'label.anchor.organization' | translate}}</a></li>
         <li class="active">{{'label.anchor.entitydatatablechecks' | translate}}</li>
     </ul>
-
-    <input ng-model="filterText" type="text" class="form-control" ng-keyup="onFilter()" placeholder="{{'label.input.filterbyname' | translate}}">
+<div class="card well">
+    <input ng-model="filterText" type="text" class="span form-control" ng-keyup="onFilter()" placeholder="{{'label.input.filterbyname' | translate}}">
     <a data-ng-click="createDatatableCheck()" class="btn btn-primary pull-right" has-permission='CREATE_ENTITY_DATATABLE_CHECK'><i
             class="fa fa-plus"></i>&nbsp;{{'label.button.createdatatablecheck' | translate}}</a>
     <table class="table">
@@ -159,4 +159,5 @@
             </div>
         </form>
     </script>
+</div>
 </div>

app/views/products/createshareproduct.html

@@ -1,125 +1,220 @@
-<div class="content-container">
-<ul class="breadcrumb">
-    <li><a href="#/products">{{'label.anchor.products' | translate}}</a></li>
-    <li><a href="#/shareproducts">{{'label.anchor.shareproducts' | translate}}</a></li>
-    <li class="active">{{'label.anchor.createshareproduct' | translate}}</li>
-</ul>
-<form name="createshareproductform" novalidate="" class="card form-horizontal well" ng-controller="CreateShareProductController" rc-submit="submit()">
-<api-validate></api-validate>
-<fieldset>
-<h3>{{ 'label.heading.details' | translate }}</h3>
-<hr>
-<div class="form-group">
-    <label class="control-label col-sm-2">{{ 'label.input.productname' | translate }}<span class="required">*</span></label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.shareproductname' | translate}}"></i>
-    <div class="col-sm-3">
-        <input ng-autofocus="true" id="name" class="form-control" name="name" type="text" ng-model="formData.name"
-               required late-validate/>
-    </div>
-    <div class="col-sm-3">
-        <form-validate valattributeform="createshareproductform" valattribute="name"/>
-    </div>
-</div>
-<div class="form-group">
-    <label class="control-label col-sm-2">{{ 'label.input.product.shortname' | translate }}<span class="required">*</span></label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.shareproductshortname' | translate}}"></i>
-    <div class="col-sm-3">
-        <input type="text" id="shortName" name="shortName" class="form-control" ng-model="formData.shortName"
-               maxlength="4" required late-validate/>
-    </div>
-    <div class="col-sm-3">
-        <form-validate valattributeform="createshareproductform" valattribute="shortName"/>
-    </div>
-</div>
-<div class="form-group">
-    <label class="control-label col-sm-2">{{ 'label.input.description' | translate }}<span class="required">*</span></label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.shareproductdescription' | translate}}"></i>
-    <div class="col-sm-3">
-        <textarea rows="2" id="description" name="description" class="form-control" ng-model="formData.description"
-                  required late-validate/></textarea>
-    </div>
-    <div class="col-sm-3">
-        <form-validate valattributeform="createshareproductform" valattribute="description"/>
-    </div>
-</div>
-<h3>{{ 'label.heading.currency' | translate }}</h3>
-<hr>
-<div class="form-group">
-    <label class="control-label col-sm-2">{{ 'label.input.currency' | translate }}<span class="required">*</span></label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.currency' | translate}}"></i>
-    <div class="col-sm-2">
-        <select id="currencyCode" ng-model="formData.currencyCode" class="form-control"
-                ng-options="currency.code as currency.name for currency in product.currencyOptions"
-                value="{{currency.code}}"/>
-    </div>
-    <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.decimalplaces' | translate }}<span class="required">*</span></label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.shareproductdecimalplaces' | translate}}"></i>
-    <div class="col-sm-2">
-        <input type="text" id="digitsAfterDecimal" name="decimalplace" class="form-control"
-               ng-model="formData.digitsAfterDecimal" required late-validate/>
-    </div>
-    <div class="col-sm-2">
-        <form-validate valattributeform="createshareproductform" valattribute="decimalplace"/>
-    </div>
-</div>
-<div class="form-group">
-    <label class="control-label col-sm-2">{{ 'label.input.multiplesof' | translate }}<span class="required">*</span></label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.multiplesof' | translate}}"></i>
-    <div class="col-sm-2">
-        <input type="text" id="inMultiplesOf" class="form-control" name="multiplesof" ng-model="formData.inMultiplesOf"
-               required late-validate/>
-    </div>
-    <div class="col-sm-2">
-        <form-validate valattributeform="createshareproductform" valattribute="multiplesof"/>
-    </div>
-</div>
 
-<h3>{{ 'label.heading.terms' | translate }}</h3>
-<hr>
-<div class="form-group">
-    <label class="control-label col-sm-2">{{ 'label.input.totalnumberofshares' | translate }}<span class="required">*</span></label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.totalshares' | translate}}"></i>
-    <div class="col-sm-2">
-        <input id="totalnumberofshares" name="totalnumberofshares"  number-format class="form-control"
-               ng-model="formData.totalShares" required late-validate/>
-    </div>
-    <div class="col-sm-2">
-        <form-validate valattributeform="createshareproductform" valattribute="totalnumberofshares"/>
-    </div>
+<div class="content-container" ng-controller="CreateShareProductController">
+    <ul class="breadcrumb">
+        <li><a href="#/products">{{'label.anchor.products' | translate}}</a></li>
+        <li><a href="#/shareproducts">{{'label.anchor.shareproducts' | translate}}</a></li>
+        <li class="active">{{'label.anchor.createshareproduct' | translate}}</li>
+    </ul>
+    <wizard current-step="step" on-finish="submit()" class="card well">
+        <wz-step wz-title="{{ 'label.heading.details' | translate }}">
+            <form name="Details" novalidate="" class="form-horizontal">
+                <api-validate></api-validate>
+                <fieldset>
+                    <!--<h3>{{ 'label.heading.details' | translate }}</h3>-->
+                    <hr>
+                    <div class="form-group">
+                        <label class="control-label col-sm-2">{{ 'label.input.productname' | translate }}<span
+                                class="required">*</span></label>
+                        <i class="fa fa-question-circle col-sm-1"
+                           uib-tooltip="{{'label.tooltip.shareproductname' | translate}}"></i>
+                        <div class="col-sm-3">
+                            <input ng-autofocus="true" id="name" class="form-control" name="name" type="text"
+                                   ng-model="formData.name"
+                                   required late-validate/>
+                        </div>
+                        <div class="col-sm-3">
+                            <form-validate valattributeform="Details" valattribute="name"/>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="control-label col-sm-2">{{ 'label.input.product.shortname' | translate }}<span
+                                class="required">*</span></label>
+                        <i class="fa fa-question-circle col-sm-1"
+                           uib-tooltip="{{'label.tooltip.shareproductshortname' | translate}}"></i>
+                        <div class="col-sm-3">
+                            <input type="text" id="shortName" name="shortName" class="form-control"
+                                   ng-model="formData.shortName"
+                                   maxlength="4" required late-validate/>
+                        </div>
+                        <div class="col-sm-3">
+                            <form-validate valattributeform="Details" valattribute="shortName"/>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="control-label col-sm-2">{{ 'label.input.description' | translate }}</label>
+                        <i class="fa fa-question-circle col-sm-1"
+                           uib-tooltip="{{'label.tooltip.shareproductdescription' | translate}}"></i>
+                        <div class="col-sm-3">
+                            <textarea rows="2" id="description" name="description" class="form-control"
+                                      ng-model="formData.description"></textarea>
+                        </div>
+                        <div class="col-sm-3">
+                            <form-validate valattributeform="Details" valattribute="description"/>
+                        </div>
+                    </div>
+                    <hr>
+                    <button class="btn btn-default pull-left" wz-previous disabled><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
+                    </button>
+                    <button class="btn btn-default pull-right" wz-next>Next&nbsp;&nbsp;<i class="fa fa-arrow-right"></i>
+                    </button>
+                </fieldset>
+            </form>
+        </wz-step>
+        <wz-step wz-title="{{'label.heading.currency' | translate}}">
+            <form name="Currency" novalidate="" class="form-horizontal">
+                <api-validate></api-validate>
+                <fieldset>
+                    <!--<h3>{{ 'label.heading.currency' | translate }}</h3>-->
+                    <hr>
+                    <div class="form-group">
+                        <label class="control-label col-sm-2">{{ 'label.input.currency' | translate }}<span
+                                class="required">*</span></label>
+                        <i class="fa fa-question-circle col-sm-1"
+                           uib-tooltip="{{'label.tooltip.currency' | translate}}"></i>
+                        <div class="col-sm-2">
+                            <select id="currencyCode" ng-model="formData.currencyCode" class="form-control"
+                                    ng-options="currency.code as currency.name for currency in product.currencyOptions"
+                                    ng-change="shareproduct.currency.name = formValue(product.currencyOptions,formData.currencyCode,'code','name')"
+                                    value="{{currency.code}}">
+                            </select>
+                        </div>
+                        <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.decimalplaces' | translate
+                            }}<span class="required">*</span></label>
+                        <i class="fa fa-question-circle col-sm-1"
+                           uib-tooltip="{{'label.tooltip.shareproductdecimalplaces' | translate}}"></i>
+                        <div class="col-sm-2">
+                            <input type="text" id="digitsAfterDecimal" name="decimalplace" class="form-control"
+                                   ng-model="formData.digitsAfterDecimal" required late-validate/>
+                        </div>
+                        <div class="col-sm-2">
+                            <form-validate valattributeform="Currency" valattribute="decimalplace"/>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="control-label col-sm-2">{{ 'label.input.multiplesof' | translate }}<span
+                                class="required">*</span></label>
+                        <i class="fa fa-question-circle col-sm-1"
+                           uib-tooltip="{{'label.tooltip.multiplesof' | translate}}"></i>
+                        <div class="col-sm-2">
+                            <input type="text" id="inMultiplesOf" class="form-control" name="multiplesof"
+                                   ng-model="formData.inMultiplesOf"
+                                   required late-validate/>
+                        </div>
+                        <div class="col-sm-2">
+                            <form-validate valattributeform="Currency" valattribute="multiplesof"/>
+                        </div>
+                    </div>
+                    <hr>
+                    <button class="btn btn-default pull-left" wz-previous><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
+                    </button>
+                    <button class="btn btn-default pull-right" wz-next>Next&nbsp;&nbsp;<i class="fa fa-arrow-right"></i>
+                    </button>
+                </fieldset>
+            </form>
+        </wz-step>
+        <wz-step wz-title="{{'label.heading.terms' | translate}}">
+            <form name="Terms" novalidate="" class="form-horizontal">
+                <api-validate></api-validate>
+                <fieldset>
+                    <!--<h3>{{ 'label.heading.terms' | translate }}</h3>-->
+                    <hr>
+                    <div class="form-group">
+                        <label class="control-label col-sm-2">{{ 'label.input.totalnumberofshares' | translate }}<span
+                                class="required">*</span></label>
+                        <i class="fa fa-question-circle col-sm-1"
+                           uib-tooltip="{{'label.tooltip.totalshares' | translate}}"></i>
+                        <div class="col-sm-2">
+                            <input id="totalnumberofshares" name="totalnumberofshares" number-format
+                                   class="form-control"
+                                   ng-model="formData.totalShares" required late-validate/>
+                        </div>
+                        <div class="col-sm-2">
+                            <form-validate valattributeform="Terms" valattribute="totalnumberofshares"/>
+                        </div>
 
-    <label class="control-label col-sm-2">{{ 'label.input.totalsharestobeissue' | translate }}<span class="required">*</span></label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.totalsharestobeissued' | translate}}"></i>
+                        <label class="control-label col-sm-2">{{ 'label.input.totalsharestobeissue' | translate
+                            }}<span class="required">*</span></label>
+                        <i class="fa fa-question-circle col-sm-1"
+                           uib-tooltip="{{'label.tooltip.totalsharestobeissued' | translate}}"></i>
+                        <div class="col-sm-2">
+                            <input ng-autofocus="true" type="text" id="totalsharestobeissued" name="totalsharestobeissued"
+                                   ng-model="formData.sharesIssued"
+                                   number-format class="form-control" ng-change = "shareCapitaValue()"/>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="control-label col-sm-2">{{ 'label.input.nominalprice' | translate }}<span
+                                class="required">*</span></label>
+                        <i class="fa fa-question-circle col-sm-1"
+                           uib-tooltip="{{'label.tooltip.nominalprice' | translate}}"></i>
+                        <div class="col-sm-2">
+                            <input id="nominalprice" name="nominalprice" number-format class="form-control"
+                                   ng-model="formData.unitPrice" required late-validate  ng-change = "shareCapitaValue()"/>
+                        </div>
+                        <div class="col-sm-2">
+                            <form-validate valattributeform="Terms" valattribute="nominalprice"/>
+                        </div>
 
-    <div class="col-sm-2">
-        <input ng-autofocus="true"type="text" id="totalsharestobeissued" name="totalsharestobeissued" ng-model="formData.sharesIssued" ng-change = "shareCapitaValue()" 
-               number-format class="form-control"/>
-    </div>
-</div>
+                        <label class="control-label col-sm-2">{{ 'label.input.capitalvalue' | translate }}</label>
+                        <i class="fa fa-question-circle col-sm-1"
+                           uib-tooltip="{{'label.tooltip.capitalvalue' | translate}}"></i>
 
-<div class="form-group">
-    <label class="control-label col-sm-2">{{ 'label.input.nominalprice' | translate }}<span class="required">*</span></label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.nominalprice' | translate}}"></i>
-    <div class="col-sm-2">
-        <input id="nominalprice" name="nominalprice"  number-format class="form-control"
-               ng-model="formData.unitPrice" ng-change = "shareCapitaValue()"  required late-validate/>
-    </div>
-    <div class="col-sm-2">
-        <form-validate valattributeform="createshareproductform" valattribute="nominalprice"/>
-    </div>
+                        <div class="col-sm-2">
+                            <input type="text" id="capitalvalue" name="capitalvaue" ng-model="formData.shareCapital"
+                              number-format class="form-control" maxlength="4" disabled/>
+                        </div>
+                    </div>
+                    <hr>
+                    <button class="btn btn-default pull-left" wz-previous><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
+                    </button>
+                    <button class="btn btn-default pull-right" wz-next>Next&nbsp;&nbsp;<i class="fa fa-arrow-right"></i>
+                    </button>
+                </fieldset>
+            </form>
+        </wz-step>
+        <wz-step wz-title="{{'label.heading.settings' | translate}}">
+            <form name="Settings" novalidate="" class="form-horizontal">
+                <api-validate></api-validate>
+                <fieldset>
+                    <!--<h3>{{ 'label.heading.settings' | translate }}</h3>-->
 
-    <label class="control-label col-sm-2">{{ 'label.input.capitalvalue' | translate }}</label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.capitalvalue' | translate}}"></i>
+                    <hr>
 
-    <div class="col-sm-2">
-        <input type="text" id="capitalvalue" name="capitalvaue" ng-model="formData.shareCapital" 
-        number-format class="form-control" maxlength="4" disabled/>
-    </div>
-</div>
+                    <div class="form-group">
+                        <label class="control-label col-sm-3">{{ 'label.input.sharesperclient' | translate }}</label>
+                        <i class="fa fa-question-circle col-sm-1"
+                           uib-tooltip="{{'label.tooltip.sharesperclient' | translate}}"></i>
 
-<h3>{{ 'label.heading.settings' | translate }}</h3>
+                        <div class="col-sm-2">
+                            <input id="minimumshares" placeholder="{{'label.input.minimum' | translate}}" type="text"
+                                   class="form-control" ng-model="formData.minimumShares">
+                        </div>
+                        <div class="col-sm-2">
+                            <input type="text" id="nominalsharesperclient"
+                                   placeholder="{{'label.input.default' | translate}}"
+                                   name="interestRatePerPeriod" class="form-control" ng-model="formData.nominalShares"
+                                   required/>
+                        </div>
+                        <div class="col-sm-2">
+                            <input id="maximumshares" placeholder="{{'label.input.maximum' | translate}}" type="text"
+                                   class="form-control" ng-model="formData.maximumShares">
+                        </div>
+                        <div class="col-sm-2">
+                            <form-validate valattributeform="Terms" valattribute="nominalsharesperclient"/>
+                        </div>
+                    </div>
 
-<hr>
+                    <div class="form-group">
+                        <label class="control-label col-sm-3">{{ 'label.input.minimumactiveperiod' | translate
+                            }}</label>
+                        <i class="fa fa-question-circle col-sm-1"
+                           uib-tooltip="{{'label.tooltip.minimumactiveperiod' | translate}}"></i>
+                        <div class="col-sm-2">
+                            <input id="minimumactiveperiod" type="text" class="form-control"
+                                   number-format ng-model="formData.minimumActivePeriodForDividends">
+                        </div>
 
+<<<<<<< 3d8ceda40f8225a11b2b61f31d6b24ed458f0700
 <div class="form-group">
     <label class="control-label col-sm-3">{{ 'label.input.sharesperclient' | translate }}<span class="required">*</span></label>
     <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.sharesperclient' | translate}}"></i>
@@ -140,209 +235,437 @@
         <form-validate valattributeform="createshareproductform" valattribute="nominalsharesperclient"/>
     </div>
 </div>
+=======
+                        <div class="col-sm-2">
+                            <select id="minimumactiveperiodFrequencyType"
+                                    ng-model="formData.minimumactiveperiodFrequencyType"
+                                    class="form-control"
+                                    ng-options="type.id as type.value for type in product.minimumActivePeriodFrequencyTypeOptions"
+                                    ng-change="shareproduct.minimumActivePeriod = formValue(product.minimumActivePeriodFrequencyTypeOptions,formData.minimumactiveperiodFrequencyType)"
+                                    value="{{type.id}}">
+                                <option class="displaynone" value="">{{'label.selectone' | translate}}</option>
+                            </select>
+                        </div>
+                    </div>
 
-<div class="form-group">
-    <label class="control-label col-sm-3">{{ 'label.input.minimumactiveperiod' | translate }}</label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.minimumactiveperiod' | translate}}"></i>
-    <div class="col-sm-2">
-        <input id="minimumactiveperiod" type="text" class="form-control"
-               number-format ng-model="formData.minimumActivePeriodForDividends">
-    </div>
+                    <div class="form-group">
+                        <label class="control-label col-sm-3">{{ 'label.input.lockinPeriodFrequency' | translate
+                            }}</label>
+                        <i class="fa fa-question-circle col-sm-1"
+                           uib-tooltip="{{'label.tooltip.shareproductlockinPeriodFrequency' | translate}}"></i>
+                        <div class="col-sm-2">
+                            <input id="lockinPeriodFrequency" type="text" class="form-control"
+                                   ng-model="formData.lockinPeriodFrequency">
+                        </div>
+                        <div class="col-sm-2">
+                            <select id="lockinPeriodFrequencyType" ng-model="formData.lockinPeriodFrequencyType"
+                                    class="form-control"
+                                    ng-options="type.id as type.value for type in product.lockinPeriodFrequencyTypeOptions"
+                                    ng-change="shareproduct.lockinPeriod = formValue(product.lockinPeriodFrequencyTypeOptions,formData.lockinPeriodFrequencyType)"
+                                    value="{{type.id}}">
+                                <option class="displaynone" value="">{{'label.selectone' | translate}}</option>
+                            </select>
+                        </div>
+                    </div>
+>>>>>>> Entity Datatable UI & Wizard Screens
 
-    <div class="col-sm-2">
-        <select id="minimumactiveperiodFrequencyType" ng-model="formData.minimumactiveperiodFrequencyType"
-                class="form-control"
-                ng-options="type.id as type.value for type in product.minimumActivePeriodFrequencyTypeOptions"
-                value="{{type.id}}">
-            <option class="displaynone" value="">{{'label.selectone' | translate}}</option>
-        </select>
-    </div>
-</div>
-
-<div class="form-group">
-    <label class="control-label col-sm-3">{{ 'label.input.lockinPeriodFrequency' | translate }}</label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.shareproductlockinPeriodFrequency' | translate}}"></i>
-    <div class="col-sm-2">
-        <input id="lockinPeriodFrequency" type="text" class="form-control"
-               ng-model="formData.lockinPeriodFrequency">
-    </div>
-    <div class="col-sm-2">
-        <select id="lockinPeriodFrequencyType" ng-model="formData.lockinPeriodFrequencyType"
-                class="form-control"
-                ng-options="type.id as type.value for type in product.lockinPeriodFrequencyTypeOptions"
-                value="{{type.id}}">
-            <option class="displaynone" value="">{{'label.selectone' | translate}}</option>
-        </select>
-    </div>
-</div>
-
-<div class="form-group">
-    <label class="control-label col-sm-3">{{ 'label.input.allowdividendsforinactiveclients' | translate }}</label>
-    <i class="fa fa-question-circle col-sm-1" uib-tooltip="{{'label.tooltip.shareproductallowdividends' | translate}}"></i>
-    <div class="col-sm-2">
-        <input id="withdrawalFeeForTransfers" type="checkbox" ng-model="formData.allowDividendCalculationForInactiveClients"
-               ng-true-value="true" ng-false-value="false">
-    </div>
-</div>
-
-<h3>{{ 'label.heading.marketprice' | translate }}</h3>
-<hr>
-
-<div class="form-group">
-    <div class="col-sm-2">
-        <label class="bolder" >{{'label.input.marketpriceperiods' | translate}}
-            &nbsp;<i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.marketpriceaddition' | translate}}"></i>
-        </label>
-    </div>
-    <div class="col-sm-1">
-        <input id="add" data-ng-click="addMarketPricePeriod()" type="button"  class="btn btn-primary" name="add" value="{{'label.button.add' | translate}}" />
-    </div>
-</div>
-
-<BR>
-<table class="table width50">
-    <tr class="graybg" class="width50">
-        <th>{{'label.heading.fromdate' | translate}}
-            &nbsp;<i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.marketpricestartdate' | translate}}"></i></th>
-        <th>{{'label.heading.sharenominalprice' | translate}}
-            &nbsp;<i class="fa fa-question-circle" uib-tooltip="{{'label.tooltip.marketprice' | translate}}"></i></th>
-        <th> {{'label.heading.actions' | translate}}</th>
-    </tr>
-    <tr ng-repeat="marketpriceperiod in formData.marketPricePeriods">
-        <td>
-            <ng-form name="fromDate{{$index}}">
-                <input type="text" id="fromDate1" name="fromDate1" datepicker-pop="dd MMMM yyyy"
-                       ng-model="marketpriceperiod.fromDate" is-open="opened" min="'2000-01-01'" max="restrictDate"
-                       class="form-control" required/>
-                <span class="error" ng-show="visitValidation&&fromDate{{$index}}.fromDate1.$error.required">{{ 'label.requirefield' | translate }}</span>
-            </ng-form>
-        </td>
-        <td>
-            <ng-form name="shareValue{{$index}}">
-                <input id="shareValue" name="shareValue" class="form-control" type="text"
-                       ng-model="marketpriceperiod.shareValue" number-format required/>
-                <span class="error" ng-show="visitValidation&&shareValue{{$index}}.shareValue.$error.required">{{ 'label.requirefield' | translate }}</span>
-            </ng-form>
-        </td>
-        <td>
-            <a ng-click="deleteMarketPricePeriod($index)"><i class="fa fa-times "></i></a>
-        </td>
-    </tr>
-</table>
-
-<h3>{{ 'label.heading.charges' | translate }}</h3>
-<hr>
-<div class="form-group">
-    <div class="col-sm-3">
-        <select ng-model="chargeId" class="form-control"
-                ng-options="charge.id as ((charge.name+' '+'('+charge.currency.name+')')) for charge in product.chargeOptions|filter:formData.currencyCode:strict"
-                value="{{charge.id}}">
-            <option class="displaynone" value="">{{'label.selectcharge' | translate}}</option>
-        </select>
-    </div>
-    <div class="col-sm-1">
-        <a class="btn btn-primary" ng-click="chargeSelected(chargeId)">{{ 'label.button.add' | translate }}</a>
-    </div>
-</div>
-<div class="form-group col-md-12">
-    <table class="table">
-        <tr class="graybg">
-            <th>{{'label.heading.name' | translate}}</th>
-            <th>{{'label.heading.type' | translate}}</th>
-            <th></th>
-            <th>{{'label.heading.amount' | translate}}</th>
-            <th></th>
-            <th>{{'label.heading.collectedon' | translate}}</th>
-            <th></th>
-            <th>{{'label.heading.actions' | translate}}</th>
-        </tr>
-        <tr ng-repeat="charge in charges">
-            <td>{{charge.name}},{{charge.currency.displaySymbol}}</td>
-            <td>{{charge.chargeCalculationType.value}}</td>
-            <td></td>
-            <td>{{charge.amount|number}}</td>
-            <td></td>
-            <td>{{charge.chargeTimeType.value}}</td>
-            <td></td>
-            <td><a href="" ng-click="deleteCharge($index)"><i class="fa fa-times "></i></a></td>
-        </tr>
-    </table>
-</div>
-
-    <h3>{{ 'label.heading.accounting' | translate }}</h3>
-    <hr>
-    <div class="radio-inline">
-        <label>
-            <input type="radio" ng-model="formData.accountingRule" value="1">{{'label.input.none' |translate}}
-        </label>
-    </div>
-    <div class="radio-inline">
-        <label>
-            <input type="radio" ng-model="formData.accountingRule" value="2">{{'label.input.cash' |translate}}
-        </label>
-    </div>
-    <hr>
-
-    <div class="col-md-12" ng-show="formData.accountingRule==2">
-        <div class="form-group">
-            <h4>{{"label.heading.assets" | translate}}</h4>
-            <label class="control-label col-sm-2">{{ 'label.input.sharereference' | translate }}</label>
-            <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.sharereference' | translate}}"></i>
-            <div class="col-sm-3">
-                <select id="shareReferenceId" ng-model="formData.shareReferenceId"
-                        chosen="assetAccountOptions"
-                        ng-options="assetAccount.id as assetAccount.name for assetAccount in assetAccountOptions"
-                        value="{{assetAccount.id}}">
-                </select>
-            </div>
-        </div>
-        <hr>
-        <div class="form-group">
-            <h4>{{"label.heading.liabilities" | translate}}</h4>
-            <label class="control-label col-sm-2">{{ 'label.input.sharecontrol' | translate }}</label>
-            <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.sharecontrol' | translate}}"></i>
-            <div class="col-sm-3">
-                <select id="shareSuspenseId" ng-model="formData.shareSuspenseId"
-                        chosen="liabilityAccountOptions"
-                        ng-options="liabilityAccount.id as liabilityAccount.name for liabilityAccount in liabilityAccountOptions"
-                        value="{{liabilityAccount.id}}">
-                </select>
-            </div>
-        </div>
-        <hr>
-        <div class="form-group">
-            <h4>{{"label.heading.shareequity" | translate}}</h4>
-            <label class="control-label col-sm-2">{{ 'label.input.equity' | translate }}</label>
-            <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.equityaccount' | translate}}"></i>
-            <div class="col-sm-3">
-                <select id="shareEquityId" ng-model="formData.shareEquityId"
-                        chosen="equityAccountOptions"
-                        ng-options="expenseAccount.id as expenseAccount.name for expenseAccount in equityAccountOptions"
-                        value="{{expenseAccount.id}}">
-                </select>
-            </div>
-        </div>
-        <hr>
-        <div class="form-group">
-            <h4>{{"label.heading.income" | translate}}</h4>
-            <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}</label>
-            <i class="fa fa-question-circle col-sm-1 " uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}"></i>
-            <div class="col-sm-3">
-                <select id="incomeFromFeeAccountId" ng-model="formData.incomeFromFeeAccountId"
-                        chosen="incomeAccountOptions"
-                        ng-options="incomeAccount.id as incomeAccount.name for incomeAccount in incomeAccountOptions"
-                        value="{{incomeAccount.id}}">
-                </select>
-            </div>
-        </div>
-    </div>
-
-<div class="col-md-offset-5 paddedtop">
-    <button id="cancel" type="reset" class="btn btn-warning" ng-click="cancel()">{{'label.button.cancel' | translate}}</button>
-    <button id="save" type="submit" class="btn btn-primary" has-permission='CREATE_SAVINGSPRODUCT'>{{'label.button.save'
-        | translate}}
-    </button>
-</div>
-</fieldset>
-</form>
+                    <div class="form-group">
+                        <label class="control-label col-sm-3">{{ 'label.input.allowdividendsforinactiveclients' |
+                            translate }}</label>
+                        <i class="fa fa-question-circle col-sm-1"
+                           uib-tooltip="{{'label.tooltip.shareproductallowdividends' | translate}}"></i>
+                        <div class="col-sm-2">
+                            <input id="withdrawalFeeForTransfers" type="checkbox"
+                                   ng-model="formData.allowDividendCalculationForInactiveClients">
+                        </div>
+                    </div>
+                    <hr>
+                    <button class="btn btn-default pull-left" wz-previous><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
+                    </button>
+                    <button class="btn btn-default pull-right" wz-next>Next&nbsp;&nbsp;<i class="fa fa-arrow-right"></i>
+                    </button>
+                </fieldset>
+            </form>
+        </wz-step>
+        <wz-step wz-title="{{'label.heading.marketprice' | translate}}">
+            <form name="marketprice" novalidate="" class="form-horizontal">
+                <api-validate></api-validate>
+                <fieldset>
+                    <h3>{{ 'label.heading.marketprice' | translate }}</h3>
+                    <hr>
+
+                    <div class="form-group">
+                        <div class="col-sm-2">
+                            <label class="bolder">{{'label.input.marketpriceperiods' | translate}}
+                                &nbsp;<i class="fa fa-question-circle"
+                                         uib-tooltip="{{'label.tooltip.marketpriceaddition' | translate}}"></i>
+                            </label>
+                        </div>
+                        <div class="col-sm-1">
+                            <input id="add" data-ng-click="addMarketPricePeriod()" type="button" class="btn btn-primary"
+                                   name="add" value="{{'label.button.add' | translate}}"/>
+                        </div>
+                    </div>
+
+                    <BR>
+                    <table class="table width50">
+                        <tr class="graybg" class="width50">
+                            <th>{{'label.heading.fromdate' | translate}}
+                                &nbsp;<i class="fa fa-question-circle"
+                                         uib-tooltip="{{'label.tooltip.marketpricestartdate' | translate}}"></i></th>
+                            <th>{{'label.heading.sharenominalprice' | translate}}
+                                &nbsp;<i class="fa fa-question-circle"
+                                         uib-tooltip="{{'label.tooltip.marketprice' | translate}}"></i></th>
+                            <th> {{'label.heading.actions' | translate}}</th>
+                        </tr>
+                        <tr ng-repeat="marketpriceperiod in formData.marketPricePeriods">
+                            <td>
+                                <ng-form name="fromDate{{$index}}">
+                                    <input type="text" id="fromDate1" name="fromDate1" datepicker-pop="dd MMMM yyyy"
+                                           ng-model="marketpriceperiod.fromDate" is-open="opened" min="'2000-01-01'"
+                                           max="restrictDate"
+                                           class="form-control" required/>
+                                    <span class="error"
+                                          ng-show="visitValidation&&fromDate{{$index}}.fromDate1.$error.required">{{ 'label.requirefield' | translate }}</span>
+                                </ng-form>
+                            </td>
+                            <td>
+                                <ng-form name="shareValue{{$index}}">
+                                    <input id="shareValue" name="shareValue" class="form-control" type="text"
+                                           ng-model="marketpriceperiod.shareValue" number-format required/>
+                                    <span class="error"
+                                          ng-show="visitValidation&&shareValue{{$index}}.shareValue.$error.required">{{ 'label.requirefield' | translate }}</span>
+                                </ng-form>
+                            </td>
+                            <td>
+                                <a ng-click="deleteMarketPricePeriod($index)"><i class="fa fa-times "></i></a>
+                            </td>
+                        </tr>
+                    </table>
+                    <hr>
+                    <button class="btn btn-default pull-left" wz-previous><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
+                    </button>
+                    <button class="btn btn-default pull-right" wz-next>Next&nbsp;&nbsp;<i class="fa fa-arrow-right"></i>
+                    </button>
+                </fieldset>
+            </form>
+        </wz-step>
+        <wz-step wz-title="{{'label.heading.charges' | translate}}">
+            <form name="Charges" novalidate="" class="form-horizontal">
+                <api-validate></api-validate>
+                <fieldset>
+                    <!--<h3>{{ 'label.heading.charges' | translate }}</h3>-->
+                    <hr>
+                    <div class="form-group">
+                        <div class="col-sm-3">
+                            <select ng-model="chargeId" class="form-control"
+                                    ng-options="charge.id as ((charge.name+' '+'('+charge.currency.name+')')) for charge in product.chargeOptions|filter:formData.currencyCode:strict"
+                                    value="{{charge.id}}">
+                                <option class="displaynone" value="">{{'label.selectcharge' | translate}}</option>
+                            </select>
+                        </div>
+                        <div class="col-sm-1">
+                            <a class="btn btn-primary" ng-click="chargeSelected(chargeId)">{{ 'label.button.add' |
+                                translate }}</a>
+                        </div>
+                    </div>
+                    <div class="form-group col-md-12">
+                        <table class="table">
+                            <tr class="graybg">
+                                <th>{{'label.heading.name' | translate}}</th>
+                                <th>{{'label.heading.type' | translate}}</th>
+                                <th></th>
+                                <th>{{'label.heading.amount' | translate}}</th>
+                                <th></th>
+                                <th>{{'label.heading.collectedon' | translate}}</th>
+                                <th></th>
+                                <th>{{'label.heading.actions' | translate}}</th>
+                            </tr>
+                            <tr ng-repeat="charge in charges">
+                                <td>{{charge.name}},{{charge.currency.displaySymbol}}</td>
+                                <td>{{charge.chargeCalculationType.value}}</td>
+                                <td></td>
+                                <td>{{charge.amount|number}}</td>
+                                <td></td>
+                                <td>{{charge.chargeTimeType.value}}</td>
+                                <td></td>
+                                <td><a href="" ng-click="deleteCharge($index)"><i class="fa fa-times "></i></a></td>
+                            </tr>
+                        </table>
+                    </div>
+                    <hr>
+                    <button class="btn btn-default pull-left" wz-previous><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
+                    </button>
+                    <button class="btn btn-default pull-right" wz-next>Next&nbsp;&nbsp;<i class="fa fa-arrow-right"></i>
+                    </button>
+                </fieldset>
+            </form>
+        </wz-step>
+        <wz-step wz-title="{{'label.heading.accounting' | translate}}">
+            <form name="Accounting" novalidate="" class="form-horizontal">
+                <api-validate></api-validate>
+                <fieldset>
+                    <!--<h3>{{ 'label.heading.accounting' | translate }}</h3>-->
+                    <hr>
+                    <div class="radio-inline">
+                        <label>
+                            <input type="radio" ng-model="formData.accountingRule" value="1">{{'label.input.none'
+                            |translate}}
+                        </label>
+                    </div>
+                    <div class="radio-inline">
+                        <label>
+                            <input type="radio" ng-model="formData.accountingRule" value="2">{{'label.input.cash'
+                            |translate}}
+                        </label>
+                    </div>
+                    <hr>
+
+                    <div class="col-md-12" ng-show="formData.accountingRule==2">
+                        <div class="form-group">
+                            <h4>{{"label.heading.assets" | translate}}</h4>
+                            <label class="control-label col-sm-2">{{ 'label.input.sharereference' | translate }}</label>
+                            <i class="fa fa-question-circle col-sm-1 "
+                               uib-tooltip="{{'label.tooltip.sharereference' | translate}}"></i>
+                            <div class="col-sm-3">
+                                <select id="shareReferenceId" ng-model="formData.shareReferenceId"
+                                        chosen="assetAccountOptions"
+                                        ng-options="assetAccount.id as assetAccount.name for assetAccount in assetAccountOptions"
+                                        ng-change="shareproduct.accountingMappings.shareReferenceId.name = formValue(assetAccountOptions,formData.shareReferenceId,'id','name')"
+                                        value="{{assetAccount.id}}">
+                                </select>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="form-group">
+                            <h4>{{"label.heading.liabilities" | translate}}</h4>
+                            <label class="control-label col-sm-2">{{ 'label.input.sharecontrol' | translate }}</label>
+                            <i class="fa fa-question-circle col-sm-1 "
+                               uib-tooltip="{{'label.tooltip.sharecontrol' | translate}}"></i>
+                            <div class="col-sm-3">
+                                <select id="shareSuspenseId" ng-model="formData.shareSuspenseId"
+                                        chosen="liabilityAccountOptions"
+                                        ng-options="liabilityAccount.id as liabilityAccount.name for liabilityAccount in liabilityAccountOptions"
+                                        ng-change="shareproduct.accountingMappings.shareSuspenseId.name = formValue(liabilityAccountOptions,formData.shareSuspenseId,'id','name')"
+                                        value="{{liabilityAccount.id}}">
+                                </select>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="form-group">
+                            <h4>{{"label.heading.shareequity" | translate}}</h4>
+                            <label class="control-label col-sm-2">{{ 'label.input.equity' | translate }}</label>
+                            <i class="fa fa-question-circle col-sm-1 "
+                               uib-tooltip="{{'label.tooltip.equityaccount' | translate}}"></i>
+                            <div class="col-sm-3">
+                                <select id="shareEquityId" ng-model="formData.shareEquityId"
+                                        chosen="equityAccountOptions"
+                                        ng-options="expenseAccount.id as expenseAccount.name for expenseAccount in equityAccountOptions"
+                                        ng-change="shareproduct.accountingMappings.shareEquityId.name = formValue(equityAccountOptions,formData.shareEquityId,'id','name')"
+                                        value="{{expenseAccount.id}}">
+                                </select>
+                            </div>
+                        </div>
+                        <hr>
+                        <div class="form-group">
+                            <h4>{{"label.heading.income" | translate}}</h4>
+                            <label class="control-label col-sm-2">{{ 'label.input.incomefromfees' | translate }}</label>
+                            <i class="fa fa-question-circle col-sm-1 "
+                               uib-tooltip="{{'label.tooltip.incomefromfees' | translate}}"></i>
+                            <div class="col-sm-3">
+                                <select id="incomeFromFeeAccountId" ng-model="formData.incomeFromFeeAccountId"
+                                        chosen="incomeAccountOptions"
+                                        ng-options="incomeAccount.id as incomeAccount.name for incomeAccount in incomeAccountOptions"
+                                        ng-change="shareproduct.accountingMappings.incomeFromFeeAccountId.name = formValue(incomeAccountOptions,formData.incomeFromFeeAccountId,'id','name')"
+                                        value="{{incomeAccount.id}}">
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <hr>
+                    <button class="btn btn-default pull-left" wz-previous><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
+                    </button>
+                    <button class="btn btn-default pull-right" wz-next>Next&nbsp;&nbsp;<i class="fa fa-arrow-right"></i>
+                    </button>
+                </fieldset>
+            </form>
+        </wz-step>
+        <wz-step wz-title="Preview">
+            <form name="Preview" novalidate="" class="form-horizontal">
+                <fieldset>
+                    <api-validate></api-validate>
+                    <br>
+                    <br>
+                    <h3>{{shareproduct.name}}</h3>
+                    <hr>
+                    <table width="100%">
+                        <tr class="bottomborder">
+                            <td colspan="4">
+                                <strong>{{'label.heading.details' | translate}}</strong>
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{'label.heading.description' | translate}}</td>
+                            <td colspan="3">{{shareproduct.description}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{'label.heading.shortname' | translate}} :</td>
+                            <td colspan="3">{{shareproduct.shortName}}</td>
+                        </tr>
+                        <tr>
+                            <td colspan="4"><br/></td>
+                        </tr>
+                        <tr class="bottomborder">
+                            <td colspan="4"><strong>{{'label.heading.items' | translate}}</strong></td>
+                        </tr>
+                        <tr>
+                            <td>{{'label.heading.currency' | translate}}</td>
+                            <td colspan="3">{{shareproduct.currency.name}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{'label.heading.decimalplaces' | translate}}</td>
+                            <td colspan="3">{{shareproduct.digitsAfterDecimal}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{'label.heading.currencyinmultiplesof' | translate}}</td>
+                            <td colspan="3">{{shareproduct.inMultiplesOf}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{'label.heading.totalshares' | translate}}</td>
+                            <td colspan="3">{{shareproduct.totalShares|number}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{'label.heading.totalsharestobeissued' | translate}}</td>
+                            <td colspan="3">{{shareproduct.sharesIssued|number}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{'label.heading.sharenominalprice' | translate}}</td>
+                            <td colspan="3">{{shareproduct.unitPrice|number}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{'label.heading.sharecapitalvalue' | translate}}</td>
+                            <td colspan="3">{{shareproduct.shareCapital|number}}</td>
+                        </tr>
+                        <tr>
+                            <td colspan="4"><br/></td>
+                        </tr>
+                        <tr class="bottomborder">
+                            <td colspan="4"><strong>{{'label.heading.settings' | translate}}</strong></td>
+                        </tr>
+
+                        <tr>
+                            <td>{{'label.heading.shareperclient' | translate}}:</td>
+                            <td colspan="3">{{shareproduct.nominalShares|number}}&nbsp;&nbsp;&nbsp;(
+                                Min:{{shareproduct.minimumShares|number}}&nbsp;, Max
+                                :{{shareproduct.maximumShares|number}} )
+                            </td>
+                        </tr>
+
+                        <tr>
+                            <td>{{'label.heading.minimumactiveperiod' | translate}}</td>
+                            <td colspan="3">{{shareproduct.minimumActivePeriodForDividends}}
+                                {{shareproduct.minimumActivePeriod}}
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{'label.heading.lockinPeriodFrequency' | translate}}</td>
+                            <td colspan="3">{{shareproduct.lockinPeriodFrequency}} {{shareproduct.lockinPeriod}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{'label.heading.allowdividendsforinactiveclients' | translate}}</td>
+                            <td colspan="3">{{shareproduct.allowDividendCalculationForInactiveClients}}</td>
+                        </tr>
+                        <tr>
+                            <td colspan="4"><br/></td>
+                        </tr>
+                        <tr class="bottomborder">
+                            <td colspan="4"><strong>{{'label.heading.marketprice' | translate}}</strong></td>
+                        </tr>
+                        <tr class="bottomborder graybg">
+                            <td>{{'label.heading.fromdate' | translate}}</td>
+                            <td>{{'label.heading.sharenominalprice' | translate}}</td>
+                        </tr>
+                        <tr ng-repeat="marketPriceData in shareproduct.marketPricePeriods">
+                            <td>{{marketPriceData.fromDate|DateFormat}}</td>
+                            <td>{{marketPriceData.shareValue|FormatNumber}}</td>
+                        </tr>
+
+                        <tr>
+                            <td colspan="4"><br/></td>
+                        </tr>
+                        <tr>
+                            <td colspan="4"><strong>{{'label.heading.charges' | translate}}</strong></td>
+                        </tr>
+                        <tr class="bottomborder graybg">
+                            <td>{{'label.heading.name' | translate}}</td>
+                            <td>{{'label.heading.type' | translate}}</td>
+                            <td>{{'label.heading.amount' | translate}}</td>
+                            <td>{{'label.heading.collectedon' | translate}}</td>
+                        </tr>
+                        <tr ng-repeat="charge in charges">
+                            <td>{{charge.name}}</td>
+                            <td>{{charge.chargeCalculationType.value}}</td>
+                            <td>{{charge.amount|number}}</td>
+                            <td>{{charge.chargeTimeType.value}}</td>
+                        </tr>
+                        <tr>
+                            <td colspan="4"><br></td>
+                        </tr>
+                        <tr class="bottomborder">
+                            <td><strong>{{'label.heading.accounting' | translate}}</strong></td>
+                            <td colspan="3" ng-hide="formData.accountingRule == 2">None</td>
+                        </tr>
+                        <tr>
+                            <td colspan="4" ng-show="formData.accountingRule == 2">
+                                <table width="100%">
+                                    <tr>
+                                        <td>{{'label.heading.sharereference' | translate}}({{'label.heading.assets' |
+                                            translate}})
+                                        </td>
+                                        <td colspan="3">{{shareproduct.accountingMappings.shareReferenceId.name}}</td>
+                                    </tr>
+                                    <tr>
+                                        <td>{{'label.heading.sharecontrol' | translate}}({{'label.heading.liabilities' |
+                                            translate}})
+                                        </td>
+                                        <td colspan="3">{{shareproduct.accountingMappings.shareSuspenseId.name}}</td>
+                                    </tr>
+                                    <tr>
+                                        <td>{{'label.heading.shareequity' | translate}}({{'label.heading.equity' |
+                                            translate}})
+                                        </td>
+                                        <td colspan="3">{{shareproduct.accountingMappings.shareEquityId.name}}</td>
+                                    </tr>
+                                    <tr>
+                                        <td>{{'label.heading.incomefromfee' | translate}}({{'label.heading.income' |
+                                            translate}})
+                                        </td>
+                                        <td colspan="3">
+                                            {{shareproduct.accountingMappings.incomeFromFeeAccountId.name}}
+                                        </td>
+                                    </tr>
+                                </table>
+                            </td>
+                        </tr>
+                    </table>
+                    <br>
+                    <br>
+                    <div class="col-md-offset-5 paddedtop">
+                        <button id="cancel" type="reset" class="btn btn-warning" ng-click="cancel()">
+                            {{'label.button.cancel' | translate}}
+                        </button>
+                        <button id="save" type="submit" class="btn btn-primary" has-permission='CREATE_SAVINGSPRODUCT'
+                                wz-next>{{'label.button.createshareproduct'
+                            | translate}}
+                        </button>
+                    </div>
+                    <hr>
+                    <button class="btn btn-default pull-left" wz-previous><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
+                    </button>
+                    <button class="btn btn-default pull-right" disabled>Next&nbsp;&nbsp;<i
+                            class="fa fa-arrow-right"></i></button>
+                </fieldset>
+            </form>
+        </wz-step>
+    </wizard>
 </div>

app/views/products/viewsavingproduct.html

@@ -14,7 +14,7 @@
             </div>
         </div>
     </legend>
-    <table class="table" width="100%">
+    <table width="100%">
         <tr>
             <td colspan="4">
                 <strong>{{'label.heading.details' | translate}}</strong>

app/views/savings/new_saving_account_application.html

@@ -1,303 +1,565 @@
 <div class="content-container" ng-controller="CreateSavingAccountController">
     <ul class="breadcrumb">
         <li ng-show="centerEntity"><a href="#/viewcenter/{{groupId}}"><strong>'{{groupName}}'</strong></a></li>
-        <li ng-show="groupName&&!centerEntity"><a href="#/viewgroup/{{groupId}}"><strong>'{{groupName}}'</strong></a></li>
+        <li ng-show="groupName&&!centerEntity"><a href="#/viewgroup/{{groupId}}"><strong>'{{groupName}}'</strong></a>
+        </li>
         <li ng-show="clientName"><a href="#/viewclient/{{clientId}}"><strong>'{{clientName}}'</strong></a></li>
         <li class="active">{{'label.anchor.savingapplication' | translate}}</li>
     </ul>
-<div class="card">
-    <div class="content">
-        <div class="toolbar">
-            <h4>{{ 'label.heading.savingapplication' | translate }}</h4>
-        </div>
-        <br/>
-        <form name="newsavingccountform" novalidate="" class="form-inline" rc-submit="submit()">
-            <api-validate></api-validate>
-        <fieldset>
-        <table class="table width100">
-            <tr>
-                <td class="width14">
-                    <label>{{ 'label.input.product' | translate }}<span class="required">*</span>:&nbsp;</label>
-                </td>
-                <td class="width36 paddedbottom10">
-                    <select id="productId" ng-model="formData.productId"
-                            ng-options="product.id as product.name for product in products" value="{{product.id}}"
-                            ng-change="changeProduct()" class="form-control width170px" required="required">
-                        <option style="display:none" value="">{{'label.selectsavingproduct' | translate}}</option>
-                    </select>
-                </td>
-                <td class="width14">
-                    <label ng-show="formData.productId" class="control-label">{{ 'label.input.submittedon' | translate
-                        }}&nbsp;<span class="required">*</span></label>
-                </td>
-                <td class="width36 paddedbottom10">
-                    <input ng-show="formData.productId" id="submittedOnDate" sort type="text" datepicker-pop="dd MMMM yyyy"
-                           ng-model="date.submittedOnDate" is-open="opened" min="minDate" max="restrictDate"
-                           class="form-control"/>
-                </td>
-            </tr>
-            <tr ng-show="formData.productId">
-                <td class="width14">
-                    <label>{{ 'label.input.fieldofficer' | translate }}:&nbsp;</label>
-                </td>
-                <td class="width36 paddedbottom10">
-                    <select id="fieldOfficerId" ng-model="formData.fieldOfficerId" class="form-control width170px"
-                            ng-options="fieldOfficer.id as fieldOfficer.displayName for fieldOfficer in fieldOfficers"
-                            value="{{fieldOfficer.id}}" class="form-control">
-                        <option value="">{{'label.selectfieldofficer' | translate}}</option>
-                    </select>
-                </td>
-                <td class="width14">
-                    <label ng-show="formData.productId" class="control-label">{{ 'label.input.externalid' | translate
-                        }}</label>
-                </td>
-                <td class="width36 paddedbottom10">
-                    <input ng-show="formData.productId" id="externalId" ng-model="formData.externalId" class="form-control"/>
-                </td>
-            </tr>
-        </table>
-        <hr data-ng-show="formData.productId"/>
-        <label ng-show="data"><strong>{{ 'label.heading.terms' | translate }}</strong></label>
-
-        <div ng-show="data">
-            <table class="table width100">
-                <tr>
-                    <td class="width14"><label class="control-label">{{ 'label.heading.currency' | translate }}</label>
-                    </td>
-                    <td class="width36">
-                        <label><b>{{data.currency.name}}({{data.currency.displaySymbol}})</b></label>
-                    </td>
-                    <td class="width14"><label class="control-label">{{ 'label.heading.decimalplaces' | translate}}</label>
-                    </td>
-                    <td class="width36">
-                        <label><b>{{data.currency.decimalPlaces}}</b></label>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="width14">
-                        <label class="control-label">{{ 'label.input.nominalannualinterestrate' | translate
-                            }}&nbsp;<span class="required">*</span></label>
-                    </td>
-
-                    <td class="width36 paddedbottom10">
-                        <input id="nominalAnnualInterestRate" type="text"
-                               name="nominalannualinterestrate"
-                               ng-model="formData.nominalAnnualInterestRate" class="form-control"
-                               number-format required late-Validate/>
-                        <form-validate valattributeform="newsavingccountform"
-                                       valattribute="nominalannualinterestrate"/>
-                    </td>
-                    <td class="width14">
-                        <label class="control-label">{{ 'label.input.interestcompoundingperiod' | translate
-                            }}&nbsp;<span class="required">*</span></label>
-                    </td>
-                    <td class="width36 paddedbottom10">
-                        <select id="interestCompoundingPeriodType"
-                                ng-model="formData.interestCompoundingPeriodType"
-                                ng-options="type.id as type.value for type in data.interestCompoundingPeriodTypeOptions"
-                                value="{{type.id}}" class="form-control width170px"></select>
-                    </td>
-
-                </tr>
-                <tr>
-                    <td class="width14">
-                        <label class="control-label">{{ 'label.input.currencyinmultiplesof' | translate }}&nbsp;</label></td>
-                    </td>
-                    <td class="width36 paddedbottom10">
-                        <input type="text" value="{{data.currency.inMultiplesOf}}"
-                               class="form-control" readonly/>
-                    </td>
-                    <td class="width14">
-                        <label class="control-label">{{ 'label.input.interestpostingperiod' | translate }}&nbsp;<span
-                                class="required">*</span></label></td>
-                    <td class="width36 paddedbottom10">
-                        <select id="interestPostingPeriodType" ng-model="formData.interestPostingPeriodType"
-                                ng-options="type.id as type.value for type in data.interestPostingPeriodTypeOptions"
-                                value="{{type.id}}" class="form-control width170px">
-                        </select></td>
-
-                </tr>
-                <tr>
-                    <td class="width14"><label class="control-label">{{ 'label.input.interestcalculatedusing' | translate }}&nbsp;<span
-                            class="required">*</span></label></td>
-                    <td class="width36 paddedbottom10">
-                        <select id="interestCalculationType"
-                                ng-model="formData.interestCalculationType"
-                                ng-options="type.id as type.value for type in data.interestCalculationTypeOptions"
-                                value="{{type.id}}" class="form-control width170px">
-                        </select></td>
-                    <td class="width14"><label class="control-label">{{ 'label.input.daysinyears' | translate }}&nbsp;<span
-                            class="required">*</span></label></td>
-                    <td class="width36 paddedbottom10">
-                        <select id="interestCalculationDaysInYearType"
-                                ng-model="formData.interestCalculationDaysInYearType"
-                                ng-options="type.id as type.value for type in data.interestCalculationDaysInYearTypeOptions"
-                                value="{{type.id}}" class="form-control width170px">
-                        </select>
-                    </td>
-                </tr>
-                <tr>
-                    <td class="width14">
-                        <label class="control-label">{{ 'label.input.minimumopeningbalance' | translate }}&nbsp;</label>
-                    </td>
-                    <td class="width36 paddedbottom10">
-                        <input id="minRequiredOpeningBalance" type="text"
-                               ng-model="formData.minRequiredOpeningBalance" class="form-control" number-format>
-                    </td>
-                    <td class="width14">
-                        <label class="control-label">{{ 'label.input.lockinPeriodFrequency' | translate }}</label>
-                    </td>
-                    <td class="width36 paddedbottom10">
-                        <div class="form-inline">
-                            <input id="lockinPeriodFrequency" type="text" class="form-control"
-                                   ng-model="formData.lockinPeriodFrequency">&nbsp;
-                            <select id="lockinPeriodFrequencyType" ng-model="formData.lockinPeriodFrequencyType"
-                                    class="form-control width170px"
-                                    ng-options="type.id as type.value for type in data.lockinPeriodFrequencyTypeOptions"
-                                    value="{{type.id}}">
-                                <option value="">{{'label.selectone' | translate}}</option>
+    <wizard current-step="step" on-finish="submit()" class="card well">
+        <wz-step wz-title="{{'label.heading.details' | translate}}">
+            <form name="Details" novalidate="" class="form-horizontal">
+                <fieldset>
+                    <api-validate></api-validate>
+                    <!--<h3>{{'label.heading.details' | translate}}</h3>-->
+                    <hr>
+                    <div class="form-group">
+                        <label class="control-label col-sm-2">{{ 'label.input.product' | translate }}<span
+                                class="required">*</span>:&nbsp;</label>
+                        <div class="col-sm-2">
+                            <select id="productId" ng-model="formData.productId"
+                                    ng-options="product.id as product.name for product in products"
+                                    value="{{product.id}}"
+                                    ng-change="changeProduct()" class="form-control width170px" required="required">
+                                <option style="display:none" value="">{{'label.selectsavingproduct' | translate}}
+                                </option>
                             </select>
                         </div>
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan="2" class="paddedbottom10 paddedtop">
-                        <input type="checkbox" ng-model="formData.withdrawalFeeForTransfers">&nbsp;
-                        <label class="control-label">{{ 'label.input.applywithdrawalfeefortransfers' | translate }}&nbsp;</label>
-                    </td>
-                    <td class="width14"></td>
-                    <td class="width36 paddedbottom10"></td>
-                </tr>
-                <tr>
-                    <td colspan="2" class="paddedbottom10">
-                        <input type="checkbox" ng-model="formData.allowOverdraft"> &nbsp;<span
-                            class="control-label">{{ 'label.input.allowoverdraft' | translate }}&nbsp;</span>
-                    </td>
-                    <td class="width14" ng-show="formData.allowOverdraft">
-                        <label class="control-label">{{ 'label.input.overdraftlimit' | translate
-                            }}&nbsp;</label></td>
-                    <td class="width36 paddedbottom10" ng-show="formData.allowOverdraft">
-                        <input id="overdraftLimit" type="text" class="form-control"
-                               ng-model="formData.overdraftLimit" number-format>
-                    </td>
-                </tr>
-                <tr ng-show="formData.allowOverdraft">
-                    <td class="width14">
-                        <label class="control-label">{{ 'label.input.nominalannualinterestrateoverdraft' | translate
-                            }}&nbsp;</label></td>
-                    <td class="width36 paddedbottom10">
-                        <input id="nominalAnnualInterestRateOverdraft" type="text"
-                               ng-model="formData.nominalAnnualInterestRateOverdraft">
-                    </td>
-                    <td class="width14">
-                        <label class="control-label">{{ 'label.input.minoverdraftforinterestcalculation' | translate
-                            }}&nbsp;</label></td>
-                    <td class="width36 paddedbottom10">
-                        <input id="minOverdraftForInterestCalculation" type="text"
-                               ng-model="formData.minOverdraftForInterestCalculation" number-format>
-                    </td>
-                </tr>
-                <tr>
-                    <td colspan="2" class="paddedbottom10" ng-hide="formData.allowOverdraft">
-                        <input type="checkbox" ng-model="formData.enforceMinRequiredBalance"> &nbsp;<span
-                            class="control-label">{{ 'label.input.enforceMinRequiredBalance' | translate }}&nbsp;</span>
-                    </td>
-                    <td class="width14" ng-hide="formData.allowOverdraft">
-                        <label class="control-label">{{ 'label.input.minRequiredBalance' | translate
-                            }}&nbsp;</label></td>
-                    <td class="width36 paddedbottom10" ng-hide="formData.allowOverdraft">
-                        <input id="minRequiredBalance" type="text" class="form-control"
-                               ng-model="formData.minRequiredBalance" number-format>
-                    </td>
-                </tr>
-                <tr ng-show="data.minBalanceForInterestCalculation">
-                    <td > {{'label.heading.minbalanceforinterestcalculation' | translate}}</td>
-                    <td>{{data.minBalanceForInterestCalculation | number}}</td>
-                </tr>
-                <tr ng-show="data.taxGroup">
-                    <td colspan="2" class="paddedbottom10">
-                        <input type="checkbox" ng-model="formData.withHoldTax"> &nbsp;<span
-                            class="control-label">{{ 'label.input.withholdtax' | translate }}&nbsp;</span>
-                    </td>
-                    <td class="width14" ng-show="formData.withHoldTax">
-                        <label class="control-label">{{ 'label.input.taxgroup' | translate
-                            }}&nbsp;</label></td>
-                    <td class="width36 paddedbottom10" ng-show="formData.withHoldTax">
-                       {{data.taxGroup.name}}
-                    </td>
-                </tr>
-                <tr>
-                    <td class="width14"></td>
-                    <td class="width36 paddedbottom10"></td>
-                    <td class="width14"></td>
-                    <td class="width36 paddedbottom10"></td>
-                </tr>
+                        <label ng-show="formData.productId" class="control-label col-sm-2 col-sm-offset-2">{{
+                            'label.input.submittedon' | translate
+                            }}&nbsp;<span class="required">*</span></label>
 
-            </table>
-            <hr/>
-            <label class="control-label"><h4>{{ 'label.heading.charges' | translate }}</h4></label>
-            <select ng-model="chargeId"
-                    ng-options="charge.id as charge.name for charge in chargeOptions|filter:data.currency.code:strict"
-                    value="{{charge.id}}" class="form-control">
-                <option value="">{{'label.selectcharge' | translate}}</option>
-            </select>
-            <a ng-click="addCharge(chargeId)"><i class="fa fa-plus "></i></a>
-                              <span ng-show="errorchargeevent">
-                                <small class="error">
-                                    {{'label.'+labelchargeerror | translate}}
-                                </small>
-                              </span>
-            <table class="table" width="100%" ng-show="charges.length>0">
-                <tr class="graybg">
-                    <th>{{'label.heading.name' | translate}}</th>
-                    <th>{{'label.heading.type' | translate}}</th>
-                    <th>{{'label.heading.amount' | translate}}</th>
-                    <th>{{'label.heading.collectedon' | translate}}</th>
-                    <th>{{'label.heading.date' | translate}}</th>
-                    <th>{{'label.heading.repaymentsevery' | translate}}</th>
-                    <th>{{'label.heading.actions' | translate}}</th>
-                </tr>
-                <tr ng-repeat="charge in charges">
-                    <td>{{charge.name}},{{charge.currency.displaySymbol}}</td>
-                    <td>{{charge.chargeCalculationType.value}}</td>
-                    <td><input id="charges[{{$index}}].amount" class="input-sm form-control" type="text"
-                               ng-model="charge.amount" number-format
-                               placeholder="{{'label.input.amount' | translate}}"/></td>
-                    <td>{{charge.chargeTimeType.value}}</td>
-                    <td ng-switch on="charge.chargeTimeType.value">
-                        <input id="charges[{{$index}}].feeOnMonthDay" class="input-medium form-control" readonly
-                               class="date-disable" type="text" datepicker-pop="dd MMMM"
-                               ng-model="charge.feeOnMonthDay" is-open="opened" ng-switch-when='Annual Fee'/>
-                        <input id="charges[{{$index}}].dueDate" class="input-medium form-control" readonly
-                               class="date-disable" type="text" datepicker-pop="dd MMMM yyyy"
-                               ng-model="charge.dueDate" is-open="opened" ng-switch-when='Specified due date'/>
-                        <input readonly class="date-disable" class="input-medium form-control" readonly
-                               class="date-disable" type="text" datepicker-pop="dd MMMM"
-                               ng-model="charge.feeOnMonthDay" is-open="opened" ng-switch-when='Monthly Fee'/>
-                        <input id="charges[{{$index}}].dueDate" class="input-medium form-control"
-                               datepicker-pop="dd MMMM yyyy" ng-model="charge.dueDate"
-                               is-open="opened" ng-switch-when='Weekly Fee'/>
-                    </td>
-                    <td ng-switch on="charge.chargeTimeType.value">
-                        <input id="charges[{{$index}}].feeInterval" class="input-sm form-control" type="text"
-                               ng-model="charge.feeInterval" ng-switch-when='Monthly Fee'/>
-                        <input id="charges[{{$index}}].feeInterval" class="input-sm form-control" type="text"
-                               ng-model="charge.feeInterval" ng-switch-when='Weekly Fee'/>
-                    </td>
-                    <td><a ng-click="deleteCharge($index)"><i class="fa fa-times "></i></a></td>
-                </tr>
-            </table>
-        </div>
-        <div class="col-md-offset-6">
-            <button id="cancel" ng-click="cancel()" class="btn btn-default">{{ 'label.button.cancel' | translate }}</button>
-            <button id="save" type="submit" class="btn btn-primary" ng-show="data" has-permission='CREATE_SAVINGSACCOUNT'>{{
-                'label.button.save' | translate
-                }}
-            </button>
-        </div>
+                        <div class="col-sm-2">
+                            <input ng-show="formData.productId" id="submittedOnDate" sort type="text"
+                                   datepicker-pop="dd MMMM yyyy"
+                                   ng-model="date.submittedOnDate" is-open="opened" min="minDate" max="restrictDate"
+                                   class="form-control"/>
+                        </div>
+                    </div>
+                    <div class="form-group" data-ng-show="formData.productId">
+                        <label class="control-label col-sm-2">{{ 'label.input.fieldofficer' | translate
+                            }}:&nbsp;</label>
+                        <div class="col-sm-2">
+                            <select id="fieldOfficerId" ng-model="formData.fieldOfficerId"
+                                    class="form-control width170px"
+                                    ng-options="fieldOfficer.id as fieldOfficer.displayName for fieldOfficer in fieldOfficers"
+                                    ng-change="savingdetails.fieldOfficerName = formValue(fieldOfficers,formData.fieldOfficerId,'id','displayName')"
+                                    value="{{fieldOfficer.id}}" class="form-control">
+                                <option value="">{{'label.selectfieldofficer' | translate}}</option>
+                            </select>
+                        </div>
+                        <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.externalid' | translate
+                            }}</label>
+                        <div class="col-sm-2">
+                            <input ng-show="formData.productId" id="externalId" ng-model="formData.externalId"
+                                   class="form-control"/>
+                        </div>
+                    </div>
+                    <hr>
+                    <button class="btn btn-default pull-left" wz-previous disabled><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
+                    </button>
+                    <button class="btn btn-default pull-right" wz-next>Next&nbsp;&nbsp;<i class="fa fa-arrow-right"></i>
+                    </button>
+                </fieldset>
+            </form>
+        </wz-step>
+        <wz-step wz-title="{{'label.heading.terms' | translate}}"  wz-disabled="{{disabled}}">
+            <form name="Terms" novalidate="" class="form-horizontal">
+                <fieldset>
+                    <api-validate></api-validate>
+                    <!--<h3>{{ 'label.heading.terms' | translate }}</h3>-->
+                    <hr>
+                    <div class="form-group">
+                        <label class="control-label col-sm-2">{{ 'label.heading.currency' | translate }}</label>
+                        <label class="control-label col-sm-2"><b>{{data.currency.name}}({{data.currency.displaySymbol}})</b></label>
+                        <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.heading.decimalplaces' |
+                            translate}}</label>
+                        <label class="control-label col-sm-2"><b>{{data.currency.decimalPlaces}}</b></label>
+                    </div>
+                    <div class="form-group">
+                        <label class="control-label col-sm-2">{{ 'label.input.nominalannualinterestrate' | translate
+                            }}&nbsp;<span class="required">*</span></label>
+                        <div class="col-sm-2">
+                            <input id="nominalAnnualInterestRate" type="text"
+                                   name="nominalannualinterestrate"
+                                   ng-model="formData.nominalAnnualInterestRate" class="form-control"
+                                   number-format required late-Validate/>
+                        </div>
+                        <div class="col-sm-2">
+                            <form-validate valattributeform="Terms"
+                                           valattribute="nominalannualinterestrate"/>
+                        </div>
+                        <label class="control-label col-sm-2">{{ 'label.input.interestcompoundingperiod' | translate
+                            }}&nbsp;<span class="required">*</span></label>
+                        <div class="col-sm-2">
+                            <select id="interestCompoundingPeriodType"
+                                    ng-model="formData.interestCompoundingPeriodType"
+                                    ng-options="type.id as type.value for type in data.interestCompoundingPeriodTypeOptions"
+                                    ng-change="savingdetails.interestCompoundingPeriodTypeValue = formValue(data.interestCompoundingPeriodTypeOptions,formData.interestCompoundingPeriodType)"
+                                    value="{{type.id}}" class="form-control width170px"></select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="control-label col-sm-2">{{ 'label.input.currencyinmultiplesof' | translate }}&nbsp;</label>
+                        <div class="col-sm-2">
+                            <input type="text" value="{{data.currency.inMultiplesOf}}"
+                                   class="form-control" readonly/>
+                        </div>
 
-        </fieldset>
-        </form>
-    </div>
-</div>
+                        <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.interestpostingperiod' |
+                            translate }}&nbsp;<span
+                                    class="required">*</span></label>
+                        <div class="col-sm-2">
+                            <select id="interestPostingPeriodType" ng-model="formData.interestPostingPeriodType"
+                                    ng-options="type.id as type.value for type in data.interestPostingPeriodTypeOptions"
+                                    ng-change="savingdetails.interestPostingPeriodTypeValue = formValue(data.interestPostingPeriodTypeOptions,formData.interestPostingPeriodType)"
+                                    value="{{type.id}}" class="form-control width170px">
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="control-label col-sm-2">{{ 'label.input.interestcalculatedusing' | translate }}&nbsp;<span
+                                class="required">*</span></label>
+                        <div class="col-sm-2">
+                            <select id="interestCalculationType"
+                                    ng-model="formData.interestCalculationType"
+                                    ng-options="type.id as type.value for type in data.interestPostingPeriodTypeOptions"
+                                    ng-change="savingdetails.interestCalculationTypeValue=formValue(data.interestPostingPeriodTypeOptions,formData.interestCalculationType)"
+                                    value="{{type.id}}" class="form-control width170px">
+                            </select>
+                        </div>
+                        <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.daysinyears' | translate
+                            }}&nbsp;<span
+                                    class="required">*</span></label>
+                        <div class="col-sm-2">
+                            <select id="interestCalculationDaysInYearType"
+                                    ng-model="formData.interestCalculationDaysInYearType"
+                                    ng-options="type.id as type.value for type in data.interestCalculationDaysInYearTypeOptions"
+                                    ng-change="savingdetails.interestCalculationDaysInYearTypeValue = formValue(data.interestCalculationDaysInYearTypeOptions,formData.interestCalculationDaysInYearType)"
+                                    value="{{type.id}}" class="form-control width170px">
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="control-label col-sm-2">{{ 'label.input.minimumopeningbalance' | translate }}&nbsp;</label>
+                        <div class="col-sm-2">
+                            <input id="minRequiredOpeningBalance" type="text"
+                                   ng-model="formData.minRequiredOpeningBalance" class="form-control" number-format>
+                        </div>
+                        <label class="control-label col-sm-2 col-sm-offset-2">{{ 'label.input.lockinPeriodFrequency' |
+                            translate }}</label>
+
+                        <div class="col-sm-4">
+                            <div class="form-inline">
+                                <input id="lockinPeriodFrequency" type="text" class="form-control"
+                                       ng-model="formData.lockinPeriodFrequency">&nbsp;
+                                <select id="lockinPeriodFrequencyType" ng-model="formData.lockinPeriodFrequencyType"
+                                        class="form-control width170px"
+                                        ng-options="type.id as type.value for type in data.lockinPeriodFrequencyTypeOptions"
+                                        ng-change="savingdetails.lockinPeriodFrequencyTypeValue = formValue(data.lockinPeriodFrequencyTypeOptions,formData.lockinPeriodFrequencyType)"
+                                        value="{{type.id}}">
+                                    <option value="">{{'label.selectone' | translate}}</option>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div class="col-sm-4">
+                            <input type="checkbox" ng-model="formData.withdrawalFeeForTransfers">&nbsp;
+                            <label class="control-label">{{ 'label.input.applywithdrawalfeefortransfers' | translate }}&nbsp;</label>
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <div class="col-sm-4">
+                            <input type="checkbox" ng-model="formData.allowOverdraft"> &nbsp;<span
+                                class="control-label">{{ 'label.input.allowoverdraft' | translate }}&nbsp;</span>
+                        </div>
+                        <div class="col-sm-2 col-sm-offset-2" ng-show="formData.allowOverdraft">
+                            <label class="control-label">{{ 'label.input.overdraftlimit' | translate
+                                }}&nbsp;</label></div>
+                        <div class="col-sm-2" ng-show="formData.allowOverdraft">
+                            <input id="overdraftLimit" type="text" class="form-control"
+                                   ng-model="formData.overdraftLimit" number-format>
+                        </div>
+                    </div>
+                    <div class="form-group" ng-show="formData.allowOverdraft">
+                        <div class="col-sm-2">
+                            <label class="control-label">{{ 'label.input.nominalannualinterestrateoverdraft' | translate
+                                }}&nbsp;</label>
+                        </div>
+                        <div class="col-sm-2">
+                            <input id="nominalAnnualInterestRateOverdraft" type="text"
+                                   ng-model="formData.nominalAnnualInterestRateOverdraft">
+                        </div>
+                        <div class="col-sm-2 col-sm-offset-2">
+                            <label class="control-label">{{ 'label.input.minoverdraftforinterestcalculation' | translate
+                                }}&nbsp;</label>
+                        </div>
+                        <div class="col-sm-2">
+                            <input id="minOverdraftForInterestCalculation" type="text"
+                                   ng-model="formData.minOverdraftForInterestCalculation" number-format>
+                        </div>
+                    </div>
+                    <div class="form-control" ng-hide="formData.allowOverdraft">
+                        <div class="col-sm-4">
+                            <input type="checkbox" ng-model="formData.enforceMinRequiredBalance"> &nbsp;<span
+                                class="control-label">{{ 'label.input.enforceMinRequiredBalance' | translate }}&nbsp;</span>
+                        </div>
+                        <div class="col-sm-2 col-sm-offset-2">
+                            <label class="control-label">{{ 'label.input.minRequiredBalance' | translate
+                                }}&nbsp;</label>
+                        </div>
+                        <div class="col-sm-2">
+                            <input id="minRequiredBalance" type="text" class="form-control"
+                                   ng-model="formData.minRequiredBalance" number-format>
+                        </div>
+                    </div>
+                    <div class="form-control" ng-show="data.minBalanceForInterestCalculation">
+                        <div class="col-sm-2"> {{'label.heading.minbalanceforinterestcalculation' | translate}}</div>
+                        <div class="col-sm-2">{{data.minBalanceForInterestCalculation | number}}</div>
+                    </div>
+                    <div class="form-control" ng-show="data.taxGroup">
+                        <div class="col-sm-4">
+                            <input type="checkbox" ng-model="formData.withHoldTax"> &nbsp;<span
+                                class="control-label">{{ 'label.input.withholdtax' | translate }}&nbsp;</span>
+                        </div>
+                        <div class="col-sm-2 col-sm-offset-2" ng-show="formData.withHoldTax">
+                            <label class="control-label">{{ 'label.input.taxgroup' | translate
+                                }}&nbsp;</label>
+                        </div>
+                        <div class="col-sm-2" ng-show="formData.withHoldTax">
+                            {{data.taxGroup.name}}
+                        </div>
+                    </div>
+                    <hr>
+                    <button class="btn btn-default pull-left" wz-previous><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
+                    </button>
+                    <button class="btn btn-default pull-right" wz-next>Next&nbsp;&nbsp;<i class="fa fa-arrow-right"></i>
+                    </button>
+                </fieldset>
+            </form>
+        </wz-step>
+        <wz-step wz-title="{{'label.heading.charges' | translate}}"  wz-disabled="{{disabled}}">
+            <form name="Details" novalidate="" class="form-horizontal">
+                <fieldset>
+                    <api-validate></api-validate>
+                    <!--<h3>{{ 'label.heading.charges' | translate }}</h3>-->
+                    <hr>
+                    <div class="form-group">
+                        <div class="col-sm-3">
+                            <select ng-model="chargeId"
+                                    ng-options="charge.id as charge.name for charge in chargeOptions|filter:data.currency.code:strict"
+                                    value="{{charge.id}}" class="form-control">
+                                <option value="">{{'label.selectcharge' | translate}}</option>
+                            </select>
+                        </div>
+                        <div class="col-sm-1">
+                            <a class="btn btn-primary" ng-click="addCharge(chargeId)"><i class="fa fa-plus "></i>
+                                Add</a>
+                        </div>
+                        <div class="col-sm-2">
+                            <span ng-show="errorchargeevent"><small class="error">{{'label.'+labelchargeerror | translate}}</small></span>
+                        </div>
+                    </div>
+                    <table class="table" width="100%" ng-show="charges.length>0">
+                        <tr class="graybg">
+                            <th>{{'label.heading.name' | translate}}</th>
+                            <th>{{'label.heading.type' | translate}}</th>
+                            <th>{{'label.heading.amount' | translate}}</th>
+                            <th>{{'label.heading.collectedon' | translate}}</th>
+                            <th>{{'label.heading.date' | translate}}</th>
+                            <th>{{'label.heading.repaymentsevery' | translate}}</th>
+                            <th>{{'label.heading.actions' | translate}}</th>
+                        </tr>
+                        <tr ng-repeat="charge in charges">
+                            <td>{{charge.name}},{{charge.currency.displaySymbol}}</td>
+                            <td>{{charge.chargeCalculationType.value}}</td>
+                            <td><input id="charges[{{$index}}].amount" class="input-sm form-control" type="text"
+                                       ng-model="charge.amount" number-format
+                                       placeholder="{{'label.input.amount' | translate}}"/></td>
+                            <td>{{charge.chargeTimeType.value}}</td>
+                            <td ng-switch on="charge.chargeTimeType.value">
+                                <input id="charges[{{$index}}].feeOnMonthDay" class="input-medium form-control" readonly
+                                       class="date-disable" type="text" datepicker-pop="dd MMMM"
+                                       ng-model="charge.feeOnMonthDay" is-open="opened" ng-switch-when='Annual Fee'/>
+                                <input id="charges[{{$index}}].dueDate" class="input-medium form-control" readonly
+                                       class="date-disable" type="text" datepicker-pop="dd MMMM yyyy"
+                                       ng-model="charge.dueDate" is-open="opened" ng-switch-when='Specified due date'/>
+                                <input readonly class="date-disable" class="input-medium form-control" readonly
+                                       class="date-disable" type="text" datepicker-pop="dd MMMM"
+                                       ng-model="charge.feeOnMonthDay" is-open="opened" ng-switch-when='Monthly Fee'/>
+                                <input id="charges[{{$index}}].dueDate" class="input-medium form-control"
+                                       datepicker-pop="dd MMMM yyyy" ng-model="charge.dueDate"
+                                       is-open="opened" ng-switch-when='Weekly Fee'/>
+                            </td>
+                            <td ng-switch on="charge.chargeTimeType.value">
+                                <input id="charges[{{$index}}].feeInterval" class="input-sm form-control" type="text"
+                                       ng-model="charge.feeInterval" ng-switch-when='Monthly Fee'/>
+                                <input id="charges[{{$index}}].feeInterval" class="input-sm form-control" type="text"
+                                       ng-model="charge.feeInterval" ng-switch-when='Weekly Fee'/>
+                            </td>
+                            <td><a ng-click="deleteCharge($index)"><i class="fa fa-times "></i></a></td>
+                        </tr>
+                    </table>
+                    <hr>
+                    <button class="btn btn-default pull-left" wz-previous><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
+                    </button>
+                    <button class="btn btn-default pull-right" wz-next>Next&nbsp;&nbsp;<i class="fa fa-arrow-right"></i>
+                    </button>
+                </fieldset>
+            </form>
+        </wz-step>
+        <wz-step icon="fa fa-circle-o" wz-disabled="{{disabled}}" ng-repeat="datatable in datatables"
+                 wz-title="{{datatable.registeredTableName}}" id="dynamicSteps">
+            <form name="Datatables" class="form-horizontal" ng-submit="submit()">
+                <fieldset>
+                    <api-validate></api-validate>
+                    <!--<h3><strong>{{datatable.registeredTableName}}</strong></h3>-->
+                    <hr/>
+                    <div class="form-group" ng-repeat="columnHeader in datatable.columnHeaderData">
+                        <label class="control-label col-sm-3">{{ columnHeader.columnName | prettifyDataTableColumn }}
+                            <span ng-show="!columnHeader.isColumnNullable" class="required">*</span>
+                        </label>
+
+                        <div class="col-sm-3">
+                            <input ng-show="fieldType(columnHeader.columnDisplayType) == 'TEXT'" type="text"
+                                   ng-model="formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                   class="form-control"/>
+                            <input ng-show="fieldType(columnHeader.columnDisplayType) == 'DATE'" type="text"
+                                   datepicker-pop="dd MMMM yyyy"
+                                   ng-model="formDat.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                   is-open="opened{{$index}}" class="form-control"/>
+                            <div ng-show="fieldType(columnHeader.columnDisplayType) == 'DATETIME'" class="form-inline">
+                                <div class="form-group">
+                                    <input type="text" datepicker-pop="dd MMMM yyyy"
+                                           ng-model="formDat.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].date"
+                                           is-open="opened{{$index}}" class="form-control"/>
+                                </div>
+                                <div class="form-group">
+                                    <input type="time" placeholder="HH:MM:SS"
+                                           ng-model="formDat.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].time"
+                                           class="form-control"/>
+                                </div>
+                            </div>
+                            <div ng-show="fieldType(columnHeader.columnDisplayType) == 'BOOLEAN'">
+                                <label class="radio-inline">
+                                    <input type="radio"
+                                           ng-model="formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                           value="true"/>
+                                    {{'label.input.true' | translate}}
+                                </label>
+                                <label class="radio-inline">
+                                    <input type="radio"
+                                           ng-model="formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                           value="false"/>
+                                    {{'label.input.false' | translate}}
+                                </label>
+                            </div>
+                            <span data-ng-switch on="columnHeader.columnDisplayType">
+                                        <select ng-show="fieldType(columnHeader.columnDisplayType) == 'SELECT'"
+                                                data-ng-switch-when="CODELOOKUP"
+                                                ng-model="formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                                ng-options="columnValue.id as columnValue.value for columnValue in columnHeader.columnValues"
+                                                value="{{columnValue.id}}" class="form-control">
+                                            <option value="">{{'label.selectone' | translate}}</option>
+                                        </select>
+                                        <select ng-show="fieldType(columnHeader.columnDisplayType) == 'SELECT'"
+                                                data-ng-switch-when="CODEVALUE"
+                                                ng-model="formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                                ng-options="columnValue.value as columnValue.value for columnValue in columnHeader.columnValues"
+                                                value="{{columnValue.id}}" class="form-control">
+                                            <option value="">{{'label.selectone' | translate}}</option>
+                                        </select>
+                                    </span>
+                        </div>
+                    </div>
+                    <!--<div class="col-md-offset-5" ng-if="$last">-->
+                    <!--<button id="cancel3" type="reset" class="btn btn-default" ng-click="cancel()">-->
+                    <!--{{'label.button.cancel' | translate}}-->
+                    <!--</button>-->
+                    <!--<button id="save3" type="submit" has-permission='CREATE_LOAN' class="btn btn-primary"-->
+                    <!--ng-show="loanaccountinfo">{{'label.button.save' |-->
+                    <!--translate}}-->
+                    <!--</button>-->
+                    <!--</div>-->
+                    <hr>
+                    <button class="btn btn-default pull-left" wz-previous><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
+                    </button>
+                    <button class="btn btn-default pull-right" wz-next>Next&nbsp;&nbsp;<i
+                            class="fa fa-arrow-right"></i></button>
+                </fieldset>
+            </form>
+        </wz-step>
+        <wz-step wz-title="Review"  ng-if="!disabled">
+            <form name="Preview" class="form-horizontal">
+                <fieldset>
+                    <api-validate></api-validate>
+                    <!--<h3>Review</h3>-->
+                    <hr>
+                    <table width="100%">
+                        <tr class="bottomborder">
+                            <td colspan="7">
+                                <strong>{{'label.heading.details' | translate}}</strong>
+                            </td>
+                        </tr>
+                        <tr class="toppadding">
+                            <td>{{ 'label.input.product' | translate }}</td>
+                            <td colspan="6">{{savingdetails.productName}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'label.input.submittedon' | translate}}</td>
+                            <td colspan="6">{{date.submittedOnDate | DateFormat}}</td>
+                        </tr>
+                        <tr ng-show="formData.fieldOfficerId">
+                            <td>{{ 'label.input.fieldofficer' | translate }}</td>
+                            <td colspan="6">{{savingdetails.fieldOfficerName}}</td>
+                        </tr>
+                        <tr ng-show="formData.externalId">
+                            <td>{{ 'label.input.externalid' | translate}}</td>
+                            <td colspan="6">{{formData.externalId}}</td>
+                        </tr>
+                        <tr>
+                            <td colspan="7"><br></td>
+                        </tr>
+                        <tr class="bottomborder">
+                            <td colspan="7"><strong>{{'label.heading.terms' | translate}}</strong></td>
+                        </tr>
+                        <tr class="toppadding">
+                            <td>{{'label.heading.currency' | translate}}</td>
+                            <td colspan="6">{{data.currency.name}}({{data.currency.displaySymbol}})</td>
+                        </tr>
+                        <tr>
+                            <td>{{'label.heading.decimalplaces' | translate}}</td>
+                            <td colspan="6">{{data.currency.decimalPlaces}}</td>
+                        </tr>
+                        <td>{{ 'label.input.nominalannualinterestrate' | translate}}</td>
+                        <td colspan="6">{{formData.nominalAnnualInterestRate}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{'label.input.interestcompoundingperiod' | translate}}</td>
+                            <td colspan="6">{{savingdetails.interestCompoundingPeriodTypeValue}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'label.input.currencyinmultiplesof' | translate }}</td>
+                            <td colspan="6">{{data.currency.inMultiplesOf}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{'label.input.interestpostingperiod' | translate}}</td>
+                            <td colspan="6">{{savingdetails.interestPostingPeriodTypeValue}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{'label.input.interestcalculatedusing' | translate}}</td>
+                            <td colspan="6">{{savingdetails.interestCalculationTypeValue}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'label.input.daysinyears' | translate }}</td>
+                            <td colspan="6">{{savingdetails.interestCalculationDaysInYearTypeValue}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'label.input.minimumopeningbalance' | translate }}</td>
+                            <td colspan="6">{{formData.minRequiredOpeningBalance}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'label.input.lockinPeriodFrequency' | translate }}</td>
+                            <td colspan="6">{{formData.lockinPeriodFrequency}}
+                                {{savingdetails.lockinPeriodFrequencyTypeValue}}
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'label.input.applywithdrawalfeefortransfers' | translate }}</td>
+                            <td colspan="6">{{formData.withdrawalFeeForTransfers}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{'label.input.allowoverdraft' | translate}}</td>
+                            <td colspan="6">{{formData.allowOverdraft}}</td>
+                        </tr>
+                        <tr ng-show="formData.allowOverdraft">
+                            <td>{{'label.input.overdraftlimit' | translate}}</td>
+                            <td colspan="6">{{formData.overdraftLimit}}</td>
+                        </tr>
+                        <tr ng-show="formData.allowOverdraft">
+                            <td>{{ 'label.input.nominalannualinterestrateoverdraft' | translate}}</td>
+                            <td colspan="6">{{formData.nominalAnnualInterestRateOverdraft}}</td>
+                        </tr>
+                        <tr ng-show="formData.allowOverdraft">
+                            <td>{{ 'label.input.minoverdraftforinterestcalculation' | translate}}</td>
+                            <td colspan="6">{{formData.minOverdraftForInterestCalculation}}</td>
+                        </tr>
+                        <tr ng-hide="formData.allowOverdraft">
+                            <td>{{ 'label.input.enforceMinRequiredBalance' | translate }}</td>
+                            <td colspan="6">{{formData.enforceMinRequiredBalance}}</td>
+                        </tr>
+                        <tr ng-hide="formData.allowOverdraft">
+                            <td>{{ 'label.input.minRequiredBalance' | translate}}</td>
+                            <td colspan="6">{{formData.minRequiredBalance}}</td>
+                        </tr>
+                        <tr ng-show="data.taxGroup">
+                            <td>{{ 'label.input.withholdtax' | translate }}&nbsp;</td>
+                            <td colspan="6">{{formData.withHoldTax}}</td>
+                        </tr>
+                        <tr ng-show="formData.withHoldTax">
+                            <td>{{ 'label.input.taxgroup' | translate}}</td>
+                            <td colspan="6">{{data.taxGroup.name}}</td>
+                        </tr>
+                        <tr>
+                            <td colspan="7"><br></td>
+                        </tr>
+                        <tr class="bottomborder">
+                            <td colspan="7"><strong>{{'label.heading.charges' | translate}}</strong></td>
+                        </tr>
+                        <tr class="graybg bottomborder paddingtop">
+                            <th>{{'label.heading.name' | translate}}</th>
+                            <th>{{'label.heading.type' | translate}}</th>
+                            <th>{{'label.heading.amount' | translate}}</th>
+                            <th>{{'label.heading.collectedon' | translate}}</th>
+                            <th>{{'label.heading.date' | translate}}</th>
+                            <th colspan="2">{{'label.heading.repaymentsevery' | translate}}</th>
+                        </tr>
+                        <tr ng-repeat="charge in charges">
+                            <td>{{charge.name}},{{charge.currency.displaySymbol}}</td>
+                            <td>{{charge.chargeCalculationType.value}}</td>
+                            <td>{{charge.amount}}</td>
+                            <td>{{charge.chargeTimeType.value}}</td>
+                            <td>
+                                {{charge.feeOnMonthDay | DateFormat}}
+                                {{charge.dueDate | DateFormat}}
+                            </td>
+                            <td colspan="2">
+                                {{charge.feeInterval}}
+                            </td>
+                        </tr>
+                    </table>
+                    <br>
+                    <table width="100%" ng-repeat="datatable in datatables">
+                        <tr class="bottomborder toppadding">
+                            <td colspan="7"><strong>{{datatable.registeredTableName}}</strong></td>
+                        </tr>
+                        <tr ng-repeat="columnHeader in datatable.columnHeaderData">
+                            <td colspan="6">{{ columnHeader.columnName | prettifyDataTableColumn }}</td>
+                            <td ng-hide="fieldType(columnHeader.columnDisplayType) == 'DATETIME' || fieldType(columnHeader.columnDisplayType) == 'DATE'">{{formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]}}</td>
+                            <td ng-show="fieldType(columnHeader.columnDisplayType) == 'DATETIME'">{{formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].date | DateFormat}} {{formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].time }}</td>
+                            <td ng-show="fieldType(columnHeader.columnDisplayType) == 'DATE'">{{formData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName] | DateFormat}}</td>
+                        </tr>
+                    </table>
+                    <br>
+                    <br>
+                    <div class="col-md-offset-6">
+                        <button id="cancel" ng-click="cancel()" class="btn btn-warning">{{ 'label.button.cancel' |
+                            translate }}
+                        </button>
+                        <button id="save" type="submit" class="btn btn-primary" ng-show="data"
+                                has-permission='CREATE_SAVINGSACCOUNT' wz-next>{{
+                            'label.button.save' | translate
+                            }}
+                        </button>
+                    </div>
+                    <hr>
+                    <button class="btn btn-default pull-left" wz-previous><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
+                    </button>
+                    <button class="btn btn-default pull-right" disabled>Next&nbsp;&nbsp;<i
+                            class="fa fa-arrow-right"></i></button>
+                </fieldset>
+            </form>
+        </wz-step>
+    </wizard>
 </div>

app/views/savings/saving_account_actions.html

@@ -3,10 +3,15 @@
         <li><a href="#/viewsavingaccount/{{accountId}}">{{'label.anchor.viewsavingaccount' | translate}}</a></li>
         <li class="active">{{action}}</li>
     </ul>
-    <form name="savingccountactionform" novalidate="" class="form-horizontal well card" ng-submit="submit()">
+    <wizard current-step="step" on-finish="submitDatatable()" class="card well">
+        <wz-step wz-title="{{title | translate}}">
+    <form name="savingccountactionform" novalidate="" class="form-horizontal" ng-submit="submit()">
         <fieldset>
+            <div ng-show="submittedDatatables.length > 0" uib-alert type="success">
+                <span ng-repeat="table in submittedDatatables"><i class="fa fa-check"></i>Entry in ` {{table}} ` has been made successfully. If the inputs are changed, the entries will be updated.<br></span>
+            </div>
             <api-validate></api-validate>
-            <legend>{{ title | translate}}</legend>
+            <!--<legend>{{ title | translate}}</legend>-->
 
             <div class="form-group" ng-show="showDateField">
                 <label class="control-label col-sm-2" for="modelName">{{labelName | translate}}<span
@@ -161,20 +166,119 @@
                            ng-model="formData[modelName]" is-open="opened" class="form-control"/>
                 </div>
             </div>
+            <div class="">
+                <button id="save1"  wz-next class="btn btn-primary pull-right" ng-show="isEntityDatatables">
+                    {{'label.button.proceed' | translate}}
+                </button>
+                <div ng-hide="isEntityDatatables">
+                    <div class="form-group" ng-show="showDelete || waiveCharge || inactivateCharge">
+                        <label class="control-label col-sm-2">{{ 'label.areyousure' | translate }}</label>
+                    </div>
+                    <div class="col-md-offset-3" ng-show="showDelete">
+                        <button type="reset" ng-click="submit()" has-permission='{{taskPermissionName}}' class="btn btn-default">{{ 'label.button.confirm' | translate }}</button>
+                        <button type="submit" ng-click="cancel()" class="btn btn-primary">{{ 'label.button.cancel' | translate }}</button>
+                    </div>
 
-            <div class="form-group" ng-show="showDelete || waiveCharge || inactivateCharge">
-                <label class="control-label col-sm-2">{{ 'label.areyousure' | translate }}</label>
+                    <div class="col-md-offset-3" ng-hide="showDelete">
+                        <button id="cancel" ng-click="cancel()" class="btn btn-default">{{ 'label.button.cancel' | translate }}</button>
+                        <button id="save" type="submit" has-permission='{{taskPermissionName}}' class="btn btn-primary">{{ 'label.button.save' | translate }}</button>
+                    </div>
+                </div>
             </div>
-            <div class="col-md-offset-3" ng-show="showDelete">
-                <button type="reset" ng-click="submit()" has-permission='{{taskPermissionName}}' class="btn btn-default">{{ 'label.button.confirm' | translate }}</button>
-                <button type="submit" ng-click="cancel()" class="btn btn-primary">{{ 'label.button.cancel' | translate }}</button>
-            </div>
-
-            <div class="col-md-offset-3" ng-hide="showDelete">
-                <button id="cancel" ng-click="cancel()" class="btn btn-default">{{ 'label.button.cancel' | translate }}</button>
-                <button id="save" type="submit" has-permission='{{taskPermissionName}}' class="btn btn-primary">{{ 'label.button.save' | translate }}</button>
-            </div>
-
         </fieldset>
     </form>
+        </wz-step>
+        <wz-step ng-if="isEntityDatatables" ng-repeat="datatable in datatables" wz-title="{{datatable.registeredTableName}}">
+            <div class="card-content">
+                <form class="form-horizontal">
+                    <div ng-show="submittedDatatables.length>0" uib-alert type="success">
+                        <span ng-repeat="table in submittedDatatables"><i class="fa fa-check"></i>Entry in ` {{table}} ` has been made successfully. If the inputs are changed, the datatable entries will be updated.<br></span>
+                    </div>
+                    <fieldset>
+                        <api-validate></api-validate>
+                        <!--<legend>{{datatable.registeredTableName}}</legend>-->
+                        <div class="form-group" ng-repeat="columnHeader in datatable.columnHeaders">
+                            <label class="control-label col-sm-3">{{ columnHeader.columnName | prettifyDataTableColumn }}
+                                <span ng-show="!columnHeader.isColumnNullable" class="required">*</span>
+                            </label>
+                            <div class="col-sm-3">
+                                <input ng-show="fieldType(columnHeader.columnDisplayType) == 'TEXT'" type="text"
+                                       ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]" class="form-control"/>
+                                <input ng-show="fieldType(columnHeader.columnDisplayType) == 'DATE'" type="text"
+                                       datepicker-pop="dd MMMM yyyy" ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].dateType.date"
+                                       is-open="opened{{$index}}" class="form-control"/>
+                                <div ng-show="fieldType(columnHeader.columnDisplayType) == 'DATETIME'" class="form-inline">
+                                    <div class="form-group">
+                                        <input type="text" datepicker-pop="dd MMMM yyyy"
+                                               ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].dateTimeType.date"
+                                               is-open="opened{{$index}}" class="form-control"/>
+                                    </div>
+                                    <div class="form-group">
+                                        <input type="time" placeholder="HH:MM:SS"
+                                               ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName].dateTimeType.time" class="form-control"/>
+                                    </div>
+                                </div>
+                                <div ng-show="fieldType(columnHeader.columnDisplayType) == 'BOOLEAN'">
+                                    <label class="radio-inline">
+                                        <input type="radio" ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                               value="true"/>
+                                        {{'label.input.true' | translate}}
+                                    </label>
+                                    <label class="radio-inline">
+                                        <input type="radio" ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                               value="false"/>
+                                        {{'label.input.false' | translate}}
+                                    </label>
+                                </div>
+                                <span data-ng-switch on="columnHeader.columnDisplayType">
+		                  <select ng-show="fieldType(columnHeader.columnDisplayType) == 'SELECT'"
+                                  data-ng-switch-when="CODELOOKUP"
+                                  ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                  ng-options="columnValue.id as columnValue.value for columnValue in columnHeader.columnValues"
+                                  value="{{columnValue.id}}" class="form-control">
+		                     <option value="">{{'label.selectone' | translate}}</option>
+		                  </select>
+		                  <select ng-show="fieldType(columnHeader.columnDisplayType) == 'SELECT'"
+                                  data-ng-switch-when="CODEVALUE"
+                                  ng-model="entityformData.datatables[datatables.indexOf(datatable)].data[columnHeader.columnName]"
+                                  ng-options="columnValue.value as columnValue.value for columnValue in columnHeader.columnValues"
+                                  value="{{columnValue.id}}" class="form-control">
+		                     <option value="">{{'label.selectone' | translate}}</option>
+		                  </select>
+		               </span>
+                            </div>
+                        </div>
+                        <div class="pull-right" ng-if="!$last">
+                            <button id="save4" type="submit" class="btn btn-primary" wz-next>
+                                {{'label.button.proceed' | translate}}
+                            </button>
+                        </div>
+                        <div class="col-md-offset-5" ng-if="$last">
+                            <div class="form-group" ng-show="showDelete || showwaiveforspecicficduedate">
+                                <label class="control-label col-sm-2">{{ 'label.areyousure' | translate}}</label>
+                            </div>
+                            <div class="col-md-offset-2" ng-show="showDelete || showwaiveforspecicficduedate">
+                                <button type="reset" ng-click="cancel()" class="btn btn-default">{{ 'label.button.cancel' |
+                                    translate}}
+                                </button>
+                                <button type="submit" has-permission='{{taskPermissionName}}' wz-next
+                                        class="btn btn-primary">{{
+                                    'label.button.confirm' |
+                                    translate}}
+                                </button>
+                            </div>
+                            <div class="col-md-offset-2" ng-hide="showDelete || showwaiveforspecicficduedate">
+                                <button id="cancel" type="reset" class="btn btn-default" ng-click="cancel()">{{ 'label.button.cancel' |
+                                    translate}}
+                                </button>
+                                <button id="save" type="submit" has-permission='{{taskPermissionName}}' wz-next class="btn btn-primary">{{
+                                    'label.button.save' | translate}}
+                                </button>
+                            </div>
+                        </div>
+                    </fieldset>
+                </form>
+            </div>
+        </wz-step>
+    </wizard>
 </div>

app/views/shares/createshareaccount.html

@@ -3,214 +3,373 @@
         <li ng-show="clientName"><a href="#/viewclient/{{clientId}}"><strong>'{{clientName}}'</strong></a></li>
         <li class="active">{{'label.anchor.sharesapplication' | translate}}</li>
     </ul>
-<api-validate></api-validate>
-<div class="card">
-    <div class="content">
-        <div class="toolbar">
-            <h4>{{ 'label.heading.sharesapplication' | translate }}</h4>
-        </div>
-        <br>
-        <form name="newshareccountform" novalidate="" class="form-inline"
-            rc-submit="submit()">
-            <fieldset>
-            <table class="" style="border-spacing: 10px; border-collapse: separate">
-            <tr>
-                <td class="width14">
-                    <label>{{ 'label.input.product' | translate }}<span class="required">*</span>:&nbsp;</label>
-                </td>
-                <td class="width36 paddedbottom10">
-                    <select id="productId" ng-model="formData.productId"
-                            ng-options="product.id as product.name for product in products" value="{{product.id}}"
-                            ng-change="changeProduct()" class="form-control width170px" required="required">
-                        <option style="display:none" value="">{{'label.selectshareproduct' | translate}}</option>
-                    </select>
-                </td>
-                <td class="" style="position: relative; left: 185px;">
-                    <label ng-show="formData.productId" class="control-label">{{ 'label.input.submittedon' | translate
-                        }}&nbsp;<span class="required">*</span></label>
-                </td>
-                <td class="pull-right" style="position: relative; left: 185px;">
-                    <input ng-show="formData.productId" id="submittedOnDate" sort type="text" datepicker-pop="dd MMMM yyyy"
-                           ng-model="formData.submittedDate" is-open="opened" min="minDate" max="restrictDate"
-                           class="form-control"/>
-                </td>
-            </tr>
-            <tr ng-show="formData.productId">
-                <td class="width14">
-                    <label ng-show="formData.productId" class="control-label">{{ 'label.input.externalid' | translate
-                        }}</label>
-                </td>
-                <td class="width36 paddedbottom10">
-                    <input ng-show="formData.productId" id="externalId" ng-model="formData.externalId" class="form-control"/>
-                </td>
-            </tr>
-        </table>
-        <hr data-ng-show="formData.productId"/>
-        <label ng-show="data"><strong>{{ 'label.heading.terms' | translate }}</strong></label>
+    <wizard current-step="step" on-finish="submit()" class="card well">
+        <wz-step wz-title="{{'label.heading.details'| translate}}">
+            <form name="Details" novalidate="" class="form-inline">
+                <fieldset>
+                    <api-validate></api-validate>
+                    <!--<h3>{{'label.heading.details' | translate}}</h3>-->
+                    <hr>
+                    <table class="" style="border-spacing: 10px; border-collapse: separate">
+                        <tr>
+                            <td class="width14">
+                                <label>{{ 'label.input.product' | translate }}<span class="required">*</span>:&nbsp;
+                                </label>
+                            </td>
+                            <td class="width36 paddedbottom10">
+                                <select id="productId" ng-model="formData.productId"
+                                        ng-options="product.id as product.name for product in products"
+                                        value="{{product.id}}"
+                                        ng-change="changeProduct()" class="form-control width170px" required="required">
+                                    <option style="display:none" value="">{{'label.selectshareproduct' | translate}}
+                                    </option>
+                                </select>
+                            </td>
+                            <td class="" style="position: relative; left: 185px;">
+                                <label ng-show="formData.productId" class="control-label">{{ 'label.input.submittedon' |
+                                    translate
+                                    }}&nbsp;<span class="required">*</span></label>
+                            </td>
+                            <td class="pull-right" style="position: relative; left: 185px;">
+                                <input ng-show="formData.productId" id="submittedOnDate" sort type="text"
+                                       datepicker-pop="dd MMMM yyyy"
+                                       ng-model="formData.submittedDate" is-open="opened" min="minDate"
+                                       max="restrictDate"
+                                       class="form-control"/>
+                            </td>
+                        </tr>
+                        <tr ng-show="formData.productId">
+                            <td class="width14">
+                                <label ng-show="formData.productId" class="control-label">{{ 'label.input.externalid' |
+                                    translate
+                                    }}</label>
+                            </td>
+                            <td class="width36 paddedbottom10">
+                                <input ng-show="formData.productId" id="externalId" ng-model="formData.externalId"
+                                       class="form-control"/>
+                            </td>
+                        </tr>
+                    </table>
+                    <hr>
+                    <button class="btn btn-default pull-left" wz-previous disabled><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
+                    </button>
+                    <button class="btn btn-default pull-right" wz-next>Next&nbsp;&nbsp;<i
+                            class="fa fa-arrow-right"></i></button>
+                </fieldset>
+            </form>
+        </wz-step>
+        <wz-step wz-title="{{'label.heading.terms' | translate}}" ng-if="formData.productId">
+            <form name="Terms" novalidate="" class="form-inline">
+                <fieldset>
+                    <api-validate></api-validate>
+                    <!--<h3>{{ 'label.heading.terms' | translate }}</h3>-->
+                    <hr>
+                    <div ng-show="data">
+                        <table class="width100" style="border-spacing: 10px; border-collapse: separate">
+                            <tr>
+                                <td class="width14"><label class="control-label">{{ 'label.heading.currency' | translate
+                                    }}</label>
+                                </td>
+                                <td class="width36">
+                                    <label><b>{{data.currency.name}}({{data.currency.displaySymbol}})</b></label>
+                                </td>
+                                <td class="width14"><label class="control-label">{{ 'label.heading.decimalplaces' |
+                                    translate}}</label>
+                                </td>
+                                <td class="width36">
+                                    <label><b>{{data.currency.decimalPlaces}}</b></label>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td class="width14">
+                                    <label class="control-label">{{ 'label.input.totalnumberofshares' | translate
+                                        }}&nbsp;<span class="required">*</span></label>
+                                </td>
 
-        <div ng-show="data">
-        <table class="width100" style="border-spacing: 10px; border-collapse: separate">
-            <tr>
-                <td class="width14"><label class="control-label">{{ 'label.heading.currency' | translate }}</label>
-                </td>
-                <td class="width36">
-                    <label><b>{{data.currency.name}}({{data.currency.displaySymbol}})</b></label>
-                </td>
-                <td class="width14"><label class="control-label">{{ 'label.heading.decimalplaces' | translate}}</label>
-                </td>
-                <td class="width36">
-                    <label><b>{{data.currency.decimalPlaces}}</b></label>
-                </td>
-            </tr>
-            <tr>
-                <td class="width14">
-                    <label class="control-label">{{ 'label.input.totalnumberofshares' | translate
-                        }}&nbsp;<span class="required">*</span></label>
-                </td>
+                                <td class="width36 paddedbottom10">
+                                    <input id="requestedShares" type="text"
+                                           name="requestedShares"
+                                           ng-model="formData.requestedShares" class="form-control"
+                                           number-format required late-Validate/>
+                                    <form-validate valattributeform="Terms"
+                                                   valattribute="requestedShares"/>
+                                </td>
+                                <td class="width14">
+                                    <label class="control-label">{{ 'label.input.todaysprice' | translate
+                                        }}&nbsp;<span class="required">*</span></label>
+                                </td>
+                                <td class="width36 paddedbottom10">
+                                    <input id="nominalpricevalue" type="text" disabled
+                                           name="nominalpricevalue"
+                                           ng-model="formData.unitPrice" class="form-control"
+                                           number-format required late-Validate/>
+                                </td>
 
-                <td class="width36 paddedbottom10">
-                    <input id="requestedShares" type="text"
-                           name="requestedShares"
-                           ng-model="formData.requestedShares" class="form-control"
-                           number-format required late-Validate/>
-                    <form-validate valattributeform="newshareccountform"
-                                   valattribute="requestedShares"/>
-                </td>
-                <td class="width14">
-                    <label class="control-label">{{ 'label.input.todaysprice' | translate
-                        }}&nbsp;<span class="required">*</span></label>
-                </td>
-                <td class="width36 paddedbottom10">
-                    <input id="nominalpricevalue" type="text" disabled
-                           name="nominalpricevalue"
-                           ng-model="formData.unitPrice" class="form-control"
-                           number-format required late-Validate/>
-                </td>
+                            </tr>
+                            <tr>
+                                <td class="width14">
+                                    <label class="control-label">{{ 'label.input.currencyinmultiplesof' | translate }}&nbsp;</label>
+                                </td>
+                                </td>
+                                <td class="width36 paddedbottom10">
+                                    <input type="text" value="{{data.currency.inMultiplesOf}}"
+                                           class="form-control" readonly/>
+                                </td>
+                                <td class="width14">
+                                    <label class="control-label">{{ 'label.input.savingsaccount' | translate
+                                        }}&nbsp;<span
+                                                class="required">*</span></label></td>
+                                <td class="width36 paddedbottom10">
+                                    <select id="savingsAccountId" ng-model="formData.savingsAccountId"
+                                            ng-options="savingsAccount.id as savingsAccount.accountNo for savingsAccount in data.clientSavingsAccounts"
+                                            ng-change="sharedetails.savingsAccountNo = formValue(data.clientSavingsAccount,formData.savingsAccountId,'id','accountNo')"
+                                            value="{{savingsAccount.id}}" class="form-control width170px">
+                                        <option value="">{{'label.selectone' | translate}}</option>
+                                    </select></td>
 
-            </tr>
-            <tr>
-                <td class="width14">
-                    <label class="control-label">{{ 'label.input.currencyinmultiplesof' | translate }}&nbsp;</label></td>
-                </td>
-                <td class="width36 paddedbottom10">
-                    <input type="text" value="{{data.currency.inMultiplesOf}}"
-                           class="form-control" readonly/>
-                </td>
-                <td class="width14">
-                    <label class="control-label">{{ 'label.input.savingsaccount' | translate }}&nbsp;<span
-                            class="required">*</span></label></td>
-                <td class="width36 paddedbottom10">
-                    <select id="savingsAccountId" ng-model="formData.savingsAccountId"
-                            ng-options="savingsAccount.id as savingsAccount.accountNo for savingsAccount in data.clientSavingsAccounts"
-                            value="{{savingsAccount.id}}" class="form-control width170px">
-                        <option value="">{{'label.selectone' | translate}}</option>
-                    </select></td>
+                            </tr>
+                            <tr>
+                                <td class="width14">
+                                    <label class="control-label">{{ 'label.input.minimumactiveperiod' | translate }}&nbsp;</label>
+                                </td>
+                                <td class="width36 paddedbottom10">
+                                    <div class="form-inline">
+                                        <input id="minimumActivePeriod" type="text" class="form-control"
+                                               ng-model="formData.minimumActivePeriod">&nbsp;
+                                        <select id="minimumActivePeriodFrequencyType"
+                                                ng-model="formData.minimumActivePeriodFrequencyType"
+                                                class="form-control width170px"
+                                                ng-options="type.id as type.value for type in data.minimumActivePeriodFrequencyTypeOptions"
+                                                ng-change="sharedetails.minimumActivePeriodFrequencyValue = formValue(data.minimumActivePeriodFrequencyTypeOptions,formData.minimumActivePeriodFrequencyType)"
+                                                value="{{type.id}}">
+                                            <option value="">{{'label.selectone' | translate}}</option>
+                                        </select>
+                                    </div>
+                                </td>
+                                <td class="width14">
+                                    <label class="control-label">{{ 'label.input.lockinPeriodFrequency' | translate
+                                        }}</label>
+                                </td>
+                                <td class="width36 paddedbottom10">
+                                    <div class="form-inline">
+                                        <input id="lockinPeriodFrequency" type="text" class="form-control"
+                                               ng-model="formData.lockinPeriodFrequency">&nbsp;
+                                        <select id="lockinPeriodFrequencyType"
+                                                ng-model="formData.lockinPeriodFrequencyType"
+                                                class="form-control width170px"
+                                                ng-options="type.id as type.value for type in data.lockinPeriodFrequencyTypeOptions"
+                                                ng-change="sharedetails.lockinPeriodFrequencyValue = formValue(data.lockinPeriodFrequencyTypeOptions)"
+                                                value="{{type.id}}">
+                                            <option value="">{{'label.selectone' | translate}}</option>
+                                        </select>
+                                    </div>
+                                </td>
 
-            </tr>
-            <tr>
-                <td class="width14">
-                    <label class="control-label">{{ 'label.input.minimumactiveperiod' | translate }}&nbsp;</label>
-                </td>
-                <td class="width36 paddedbottom10">
-                    <div class="form-inline">
-                        <input id="minimumActivePeriod" type="text" class="form-control"
-                               ng-model="formData.minimumActivePeriod">&nbsp;
-                        <select id="minimumActivePeriodFrequencyType" ng-model="formData.minimumActivePeriodFrequencyType"
-                                class="form-control width170px"
-                                ng-options="type.id as type.value for type in data.minimumActivePeriodFrequencyTypeOptions"
-                                value="{{type.id}}">
-                            <option value="">{{'label.selectone' | translate}}</option>
-                        </select>
+                            </tr>
+                            <tr>
+
+                                <td class="width14">
+                                    <label ng-show="formData.productId" class="control-label">{{
+                                        'label.input.applicationdate' | translate
+                                        }}&nbsp;<span class="required">*</span></label>
+                                </td>
+                                <td class="width36 paddedbottom10">
+                                    <input ng-show="formData.productId" id="applicationdate" sort type="text"
+                                           datepicker-pop="dd MMMM yyyy"
+                                           ng-model="formData.applicationDate" is-open="opened" min="minDate"
+                                           max="restrictDate"
+                                           class="form-control"/>
+                                </td>
+
+                                <td colspan="2" class="paddedbottom10 paddedtop">
+                                    <input type="checkbox"
+                                           ng-model="formData.allowDividendCalculationForInactiveClients">&nbsp;
+                                    <label class="control-label">{{ 'label.input.allowdividendsforinactiveclients' |
+                                        translate }}&nbsp;</label>
+                                </td>
+
+                                <td class="width14"></td>
+                                <td class="width36 paddedbottom10"></td>
+                            </tr>
+
+                            <tr>
+                                <td class="width14"></td>
+                                <td class="width36 paddedbottom10"></td>
+                                <td class="width14"></td>
+                                <td class="width36 paddedbottom10"></td>
+                            </tr>
+
+                        </table>
                     </div>
-                </td>
-                <td class="width14">
-                    <label class="control-label">{{ 'label.input.lockinPeriodFrequency' | translate }}</label>
-                </td>
-                <td class="width36 paddedbottom10">
-                    <div class="form-inline">
-                        <input id="lockinPeriodFrequency" type="text" class="form-control"
-                               ng-model="formData.lockinPeriodFrequency">&nbsp;
-                        <select id="lockinPeriodFrequencyType" ng-model="formData.lockinPeriodFrequencyType"
-                                class="form-control width170px"
-                                ng-options="type.id as type.value for type in data.lockinPeriodFrequencyTypeOptions"
-                                value="{{type.id}}">
-                            <option value="">{{'label.selectone' | translate}}</option>
-                        </select>
+                    <hr>
+                    <button class="btn btn-default pull-left" wz-previous><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
+                    </button>
+                    <button class="btn btn-default pull-right" wz-next>Next&nbsp;&nbsp;<i
+                            class="fa fa-arrow-right"></i></button>
+                </fieldset>
+            </form>
+        </wz-step>
+        <wz-step wz-title="{{'label.heading.charges' | translate}}" ng-if="formData.productId">
+            <form name="Charges" novalidate="" class="form-horizontal">
+                <fieldset>
+                    <api-validate></api-validate>
+                    <!--<h3>{{ 'label.heading.charges' | translate }}</h3>-->
+                    <hr>
+                    <div class="form-group">
+                        <div class="col-sm-3">
+                            <select ng-model="chargeId"
+                                    ng-options="charge.id as charge.name for charge in chargeOptions|filter:data.currency.code:strict"
+                                    value="{{charge.id}}" class="form-control">
+                                <option value="">{{'label.selectcharge' | translate}}</option>
+                            </select>
+                        </div>
+                        <div class="col-sm-1">
+                            <a class="btn btn-primary" ng-click="addCharge(chargeId)"><i class="fa fa-plus "></i>
+                                Add</a>
+                        </div>
+                        <div class="col-sm-2">
+                            <span ng-show="errorchargeevent"><small class="error">{{'label.'+labelchargeerror | translate}}</small></span>
+                        </div>
                     </div>
-                </td>
+                        <table class="table width80" ng-show="charges.length>0">
+                            <tr class="graybg">
+                                <th>{{'label.heading.name' | translate}}</th>
+                                <th>{{'label.heading.type' | translate}}</th>
+                                <th>{{'label.heading.amount' | translate}}</th>
+                                <th>{{'label.heading.collectedon' | translate}}</th>
+                                <th>{{'label.heading.actions' | translate}}</th>
+                            </tr>
+                            <tr ng-repeat="charge in charges">
+                                <td>{{charge.name}},{{charge.currency.displaySymbol}}</td>
+                                <td>{{charge.chargeCalculationType.value}}</td>
+                                <td><input id="charges[{{$index}}].amount" class="input-sm form-control" type="text"
+                                           ng-model="charge.amount" number-format
+                                           placeholder="{{'label.input.amount' | translate}}"/></td>
+                                <td>{{charge.chargeTimeType.value}}</td>
+                                <td><a ng-click="deleteCharge($index)"><i class="fa fa-times "></i></a></td>
+                            </tr>
+                        </table>
+                    <br>
+                    <hr>
+                    <button class="btn btn-default pull-left" wz-previous><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
+                    </button>
+                    <button class="btn btn-default pull-right" wz-next>Next&nbsp;&nbsp;<i
+                            class="fa fa-arrow-right"></i></button>
+                </fieldset>
+            </form>
+        </wz-step>
+        <wz-step wz-title="Review" ng-if="formData.productId">
+            <form name="Review" novalidate="" class="form-inline">
+                <fieldset>
+                    <api-validate></api-validate>
+                    <!--<h3>Review</h3>-->
+                    <hr>
+                    <table width="100%">
+                        <tr class="bottomborder">
+                            <td colspan="7"><strong>{{'label.heading.details' | translate}}</strong></td>
+                        </tr>
+                        <tr class="paddingtop">
+                            <td>{{'label.input.product' | translate}}</td>
+                            <td colspan="6">{{sharedetails.productName}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'label.input.submittedon' | translate}}</td>
+                            <td colspan="6">{{formData.submittedDate | DateFormat}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'label.input.externalid' | translate}}</td>
+                            <td colspan="6">{{formData.externalId}}</td>
+                        </tr>
+                        <tr>
+                            <td colspan="7"><br></td>
+                        </tr>
+                        <tr class="bottomborder">
+                            <td colspan="7"><strong>{{'label.heading.terms' | translate}}</strong></td>
+                        </tr>
+                        <tr class="paddingtop">
+                            <td>{{ 'label.heading.currency' | translate }}</td>
+                            <td colspan="6">{{data.currency.name}}({{data.currency.displaySymbol}})</td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'label.heading.decimalplaces' | translate}}</td>
+                            <td colspan="6">{{data.currency.decimalPlaces}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'label.input.totalnumberofshares' | translate}}</td>
+                            <td colspan="6">{{formData.requestedShares}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'label.input.todaysprice' | translate}}</td>
+                            <td colspan="6">{{formData.unitPrice}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'label.input.currencyinmultiplesof' | translate }}</td>
+                            <td colspan="6">{{data.currency.inMultiplesOf}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'label.input.savingsaccount' | translate }}</td>
+                            <td colspan="6">{{sharedetails.savingsAccountNo}}</td>
 
-            </tr>
-            <tr>
+                        </tr>
+                        <tr>
+                            <td>{{ 'label.input.minimumactiveperiod' | translate }}</td>
+                            <td colspan="6">{{formData.minimumAcctivePeriod}}
+                                {{sharedetails.minimumActivePeriodFrequencyValue}}
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'label.input.lockinPeriodFrequency' | translate }}</td>
+                            <td colspan="6">{{formData.lockinPeriodFrequency}}
+                                {{sharedetails.lockinPeriodFrequencyValue}}
+                            </td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'label.input.applicationdate' | translate}}</td>
+                            <td colspan="6">{{formData.applicationDate | DateFormat}}</td>
+                        </tr>
+                        <tr>
+                            <td>{{ 'label.input.allowdividendsforinactiveclients' | translate }}</td>
+                            <td colspan="6">{{formData.allowDividendCalculationForInactiveClients}}</td>
+                        </tr>
+                        <tr>
+                            <td colspan="7"><br></td>
+                        </tr>
+                        <tr class="bottomborder">
+                            <td colspan="7"><strong>{{'label.heading.charges' | translate}}</strong></td>
+                        </tr>
+                        <tr class="graybg paddingtop bottomborder">
+                            <th>{{'label.heading.name' | translate}}</th>
+                            <th>{{'label.heading.type' | translate}}</th>
+                            <th>{{'label.heading.amount' | translate}}</th>
+                            <th colspan="2">{{'label.heading.collectedon' | translate}}</th>
+                        </tr>
+                        <tr ng-repeat="charge in charges">
+                            <td>{{charge.name}},{{charge.currency.displaySymbol}}</td>
+                            <td>{{charge.chargeCalculationType.value}}</td>
+                            <td>{{charge.amount}}
+                            <td colspan="2">{{charge.chargeTimeType.value}}</td>
+                        </tr>
+                    </table>
 
-                <td class="width14">
-                    <label ng-show="formData.productId" class="control-label">{{ 'label.input.applicationdate' | translate
-                        }}&nbsp;<span class="required">*</span></label>
-                </td>
-                <td class="width36 paddedbottom10">
-                    <input ng-show="formData.productId" id="applicationdate" sort type="text" datepicker-pop="dd MMMM yyyy"
-                           ng-model="formData.applicationDate" is-open="opened" min="minDate" max="restrictDate"
-                           class="form-control"/>
-                </td>
-
-                <td colspan="2" class="paddedbottom10 paddedtop">
-                    <input type="checkbox" ng-model="formData.allowDividendCalculationForInactiveClients">&nbsp;
-                    <label class="control-label">{{ 'label.input.allowdividendsforinactiveclients' | translate }}&nbsp;</label>
-                </td>
-
-                <td class="width14"></td>
-                <td class="width36 paddedbottom10"></td>
-            </tr>
-
-            <tr>
-                <td class="width14"></td>
-                <td class="width36 paddedbottom10"></td>
-                <td class="width14"></td>
-                <td class="width36 paddedbottom10"></td>
-            </tr>
-
-        </table>
-        <hr/>
-        <label class="control-label"><h4>{{ 'label.heading.charges' | translate }}</h4></label>
-        <select ng-model="chargeId"
-                ng-options="charge.id as charge.name for charge in chargeOptions|filter:data.currency.code:strict"
-                value="{{charge.id}}" class="form-control">
-            <option value="">{{'label.selectcharge' | translate}}</option>
-        </select>
-        <a ng-click="addCharge(chargeId)"><i class="fa fa-plus "></i></a>
-                              <span ng-show="errorchargeevent">
-                                <small class="error">
-                                    {{'label.'+labelchargeerror | translate}}
-                                </small>
-                              </span>
-
-        <table class="table width80" ng-show="charges.length>0">
-            <tr class="graybg">
-                <th>{{'label.heading.name' | translate}}</th>
-                <th>{{'label.heading.type' | translate}}</th>
-                <th>{{'label.heading.amount' | translate}}</th>
-                <th>{{'label.heading.collectedon' | translate}}</th>
-                <th>{{'label.heading.actions' | translate}}</th>
-            </tr>
-            <tr ng-repeat="charge in charges">
-                <td>{{charge.name}},{{charge.currency.displaySymbol}}</td>
-                <td>{{charge.chargeCalculationType.value}}</td>
-                <td><input id="charges[{{$index}}].amount" class="input-sm form-control" type="text"
-                           ng-model="charge.amount" number-format
-                           placeholder="{{'label.input.amount' | translate}}"/></td>
-                <td>{{charge.chargeTimeType.value}}</td>
-                <td><a ng-click="deleteCharge($index)"><i class="fa fa-times "></i></a></td>
-            </tr>
-        </table>
-        </div>
-        <div class="col-md-offset-6">
-            <button id="cancel" ng-click="cancel()" class="btn btn-default">{{ 'label.button.cancel' | translate }}</button>
-            <button id="save" type="submit" class="btn btn-primary" ng-show="data" has-permission='CREATE_SHAREACCOUNT'>{{
-                'label.button.save' | translate
-                }}
-            </button>
-        </div>
-        </fieldset>
-        </form>
-    </div>
-</div>
+                    <br><br>
+                    <div class="col-md-offset-6">
+                        <button id="cancel" ng-click="cancel()" class="btn btn-warning">{{ 'label.button.cancel' |
+                            translate }}
+                        </button>
+                        <button id="save" type="submit" class="btn btn-primary" ng-show="data"
+                                has-permission='CREATE_SHAREACCOUNT' wz-next>{{
+                            'label.button.save' | translate
+                            }}
+                        </button>
+                    </div>
+                    <hr>
+                    <button class="btn btn-default pull-left" wz-previous><i class="fa fa-arrow-left"></i>&nbsp;&nbsp;Previous
+                    </button>
+                    <button class="btn btn-default pull-right" disabled>Next&nbsp;&nbsp;<i
+                            class="fa fa-arrow-right"></i></button>
+                </fieldset>
+            </form>
+        </wz-step>
+    </wizard>
 </div>
+