2017-06-26 17:36:48 +00:00
< div class = "animated fadeIn" >
< div class = "row" >
< div class = "col-lg-12" >
2017-08-29 17:15:47 +00:00
< div class = "card" >
< div class = "card-header" >
2017-08-31 15:06:47 +00:00
< strong > Submit Transaction< / strong >
2017-08-29 17:15:47 +00:00
< small > Required Data marked in < strong > bold< / strong > .< / small >
< / div >
< div class = "card-block" >
< div class = "form-group row" >
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Time of Transaction< / strong > < / label >
< div class = "col-md-9" >
< input type = "datetime-local" class = "form-control" [ min ] = " minDate " [ ( ngModel ) ] = " myDate " ( ngModelChange ) = " transactionFormValidate ( ) " >
2017-09-01 13:36:31 +00:00
< span class = "help-block" > Enter the date and time the transaction occurred.< / span >
2017-08-29 17:15:47 +00:00
< / div >
< / div >
< div class = "form-group row" >
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Amount< / strong > < / label >
< div class = "col-md-9" >
< div class = "input-group" >
< span class = "input-group-addon" > < i class = "fa fa-gbp" > < / i > < / span >
< input type = "number" min = "0.00" step = "0.01" class = "form-control" placeholder = "0.00" [ ( ngModel ) ] = " amount " ( ngModelChange ) = " transactionFormValidate ( ) " >
< / div >
2017-09-01 13:36:31 +00:00
< span class = "help-block" > Enter the amount spent, such as 5.35 for £5.35.< / span >
2017-08-29 17:15:47 +00:00
< / div >
< / div >
< div class = "form-group row" >
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Organisation Name< / strong > < / label >
< div class = "col-md-9" >
< input type = "text" class = "form-control" placeholder = "Organisation Name" [ ( ngModel ) ] = " submitOrg . name " ( input ) = " organisationSearch ( $ event ) " ( ngModelChange ) = " transactionFormValidate ( ) " >
2017-09-01 13:36:31 +00:00
< span class = "help-block" > Enter the name of the organisation money was spent. Choose existing ones from below or if not found, enter the details below.< / span >
2017-08-29 17:15:47 +00:00
< / div >
< / div >
2017-08-30 15:09:57 +00:00
< org-table * ngIf = "storeList != null" [ orgList ] = " storeList " ( onClick ) = " addStore ( $ event ) " > < / org-table >
2017-08-29 17:15:47 +00:00
< div * ngIf = "showAddStore" >
< div class = "form-group row" >
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Organisation Street Name< / strong > < / label >
< div class = "col-md-9" >
< input type = "text" class = "form-control" placeholder = "Which Street?" [ ( ngModel ) ] = " submitOrg . street_name " ( ngModelChange ) = " transactionFormValidate ( ) " >
2017-09-01 13:36:31 +00:00
< span class = "help-block" > Enter the street name where the organisation is located at.< / span >
2017-08-29 17:15:47 +00:00
< / div >
< / div >
< div class = "form-group row" >
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Organisation Town< / strong > < / label >
< div class = "col-md-9" >
< input type = "text" class = "form-control" placeholder = "Which Town?" [ ( ngModel ) ] = " submitOrg . town " ( ngModelChange ) = " transactionFormValidate ( ) " >
2017-09-01 13:36:31 +00:00
< span class = "help-block" > Enter the name of the town where the organisation is located at.< / span >
2017-08-29 17:15:47 +00:00
< / div >
< / div >
< div class = "form-group row" >
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Organisation Postcode< / strong > < / label >
< div class = "col-md-9" >
< input type = "text" class = "form-control" placeholder = "Postcode if known" [ ( ngModel ) ] = " submitOrg . postcode " ( ngModelChange ) = " transactionFormValidate ( ) " >
2017-09-01 13:36:31 +00:00
< span class = "help-block" > Enter the postcode where the organisation is located at.< / span >
2017-08-29 17:15:47 +00:00
< / div >
< / div >
< / div >
< div class = "form-group row" >
< div class = "col-md-9" >
< div [ ngSwitch ] = " transactionFormStatus " >
< div * ngSwitchCase = "'success'" class = "alert alert-success" role = "alert" >
Submit Succeeded.
< / div >
< div * ngSwitchCase = "'send_failed'" class = "alert alert-danger" role = "alert" >
{{transactionFormStatusError}}
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "card-footer" >
2017-09-08 10:54:34 +00:00
< button type = "submit" ( click ) = " postTransaction ( ) " [ disabled ] = " transactionFormInvalid " class = "btn btn-sm btn-primary" > < i class = "fa fa-dot-circle-o" > < / i > Submit< / button >
2017-08-29 17:15:47 +00:00
< / div >
< / div >
2017-09-08 14:48:20 +00:00
< div * ngIf = "false" class = "card" >
2017-06-26 17:36:48 +00:00
< div class = "card-header" >
2017-06-29 15:33:11 +00:00
< strong > Profile & Payroll Data< / strong >
< small > Required Data marked in < strong > bold< / strong > .< / small >
2017-06-26 17:36:48 +00:00
< / div >
2017-06-29 15:33:11 +00:00
< form class = "form-horizontal" [ formGroup ] = " payrollForm " ( ngSubmit ) = " onSubmitPayroll ( ) " >
< div class = "card-block" >
2017-06-26 17:36:48 +00:00
< div class = "form-group row" >
2017-06-29 15:33:11 +00:00
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Period of entry month< / strong > < / label >
2017-06-26 17:36:48 +00:00
< div class = "col-md-9" >
2017-09-08 11:55:42 +00:00
< input type = "month" class = "form-control" formControlName = "entry_period" >
2017-09-01 15:26:47 +00:00
< span class = "help-block" > Enter the month and year for this information.< / span >
2017-06-26 17:36:48 +00:00
< / div >
< / div >
< div class = "form-group row" >
2017-09-08 11:16:43 +00:00
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Total amount of Employees< / strong > < / label >
2017-06-26 17:36:48 +00:00
< div class = "col-md-9" >
2017-09-08 11:55:42 +00:00
< input type = "number" class = "form-control" formControlName = "employee_amount" placeholder = "0" >
2017-09-01 15:26:47 +00:00
< span class = "help-block" > Enter the amount of employees the organisation has for the entry month.< / span >
2017-06-26 17:36:48 +00:00
< / div >
< / div >
< div class = "form-group row" >
2017-09-08 11:16:43 +00:00
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Total amount of local Employees< / strong > < / label >
2017-06-26 17:36:48 +00:00
< div class = "col-md-9" >
2017-09-08 11:55:42 +00:00
< input type = "number" class = "form-control" formControlName = "local_employee_amount" placeholder = "0" >
2017-09-01 15:26:47 +00:00
< span class = "help-block" > Enter the amount of employees that live locally to the organisation for the entry month.< / span >
2017-06-26 17:36:48 +00:00
< / div >
< / div >
< div class = "form-group row" >
2017-06-29 15:33:11 +00:00
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Gross Payroll< / strong > < / label >
2017-06-26 17:36:48 +00:00
< div class = "col-md-9" >
2017-06-29 15:33:11 +00:00
< div class = "input-group" >
< span class = "input-group-addon" > < i class = "fa fa-gbp" > < / i > < / span >
2017-09-08 11:55:42 +00:00
< input type = "number" min = "0.00" step = "0.01" class = "form-control" formControlName = "gross_payroll" placeholder = "0.00" >
2017-06-29 15:33:11 +00:00
< / div >
2017-09-01 15:26:47 +00:00
< span class = "help-block" > Enter the Gross Payroll for the organisation for the entry month.< / span >
2017-06-26 17:36:48 +00:00
< / div >
< / div >
< div class = "form-group row" >
2017-09-08 11:16:43 +00:00
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Total Income Tax< / strong > < / label >
2017-06-26 17:36:48 +00:00
< div class = "col-md-9" >
2017-06-29 15:33:11 +00:00
< div class = "input-group" >
< span class = "input-group-addon" > < i class = "fa fa-gbp" > < / i > < / span >
2017-09-08 11:55:42 +00:00
< input type = "number" min = "0.00" step = "0.01" class = "form-control" formControlName = "payroll_income_tax" placeholder = "0.00" >
2017-06-29 15:33:11 +00:00
< / div >
2017-09-01 15:26:47 +00:00
< span class = "help-block" > Enter the organisation's total income tax for the entry month.< / span >
2017-06-26 17:36:48 +00:00
< / div >
< / div >
< div class = "form-group row" >
2017-09-08 11:16:43 +00:00
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Employees Total NI< / strong > < / label >
2017-06-26 17:36:48 +00:00
< div class = "col-md-9" >
2017-06-29 15:33:11 +00:00
< div class = "input-group" >
< span class = "input-group-addon" > < i class = "fa fa-gbp" > < / i > < / span >
2017-09-08 11:55:42 +00:00
< input type = "number" min = "0.00" step = "0.01" class = "form-control" formControlName = "payroll_employee_ni" placeholder = "0.00" >
2017-06-29 15:33:11 +00:00
< / div >
2017-09-01 15:26:47 +00:00
< span class = "help-block" > Total of Employees National Insurance contributions for the entry month< / span >
2017-06-26 17:36:48 +00:00
< / div >
< / div >
< div class = "form-group row" >
2017-09-08 11:16:43 +00:00
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Employers Total NI< / strong > < / label >
2017-06-26 17:36:48 +00:00
< div class = "col-md-9" >
2017-06-29 15:33:11 +00:00
< div class = "input-group" >
< span class = "input-group-addon" > < i class = "fa fa-gbp" > < / i > < / span >
2017-09-08 11:55:42 +00:00
< input type = "number" min = "0.00" step = "0.01" class = "form-control" formControlName = "payroll_employer_ni" placeholder = "0.00" >
2017-06-29 15:33:11 +00:00
< / div >
2017-09-01 15:26:47 +00:00
< span class = "help-block" > Employers National Insurance contributions for the entry month< / span >
2017-06-26 17:36:48 +00:00
< / div >
< / div >
< div class = "form-group row" >
2017-09-08 11:16:43 +00:00
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Total Pensions< / strong > < / label >
2017-06-26 17:36:48 +00:00
< div class = "col-md-9" >
2017-06-29 15:33:11 +00:00
< div class = "input-group" >
< span class = "input-group-addon" > < i class = "fa fa-gbp" > < / i > < / span >
2017-09-08 11:55:42 +00:00
< input type = "number" min = "0.00" step = "0.01" class = "form-control" formControlName = "payroll_total_pension" placeholder = "0.00" >
2017-06-29 15:33:11 +00:00
< / div >
2017-09-01 15:26:47 +00:00
< span class = "help-block" > Total spent on employee pensions by the organisation for the entry month< / span >
2017-06-26 17:36:48 +00:00
< / div >
< / div >
< div class = "form-group row" >
2017-09-08 11:16:43 +00:00
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Total Other Benefits< / strong > < / label >
2017-06-26 17:36:48 +00:00
< div class = "col-md-9" >
2017-06-29 15:33:11 +00:00
< div class = "input-group" >
< span class = "input-group-addon" > < i class = "fa fa-gbp" > < / i > < / span >
2017-09-08 11:55:42 +00:00
< input type = "number" min = "0.00" step = "0.01" class = "form-control" formControlName = "payroll_other_benefit" placeholder = "0.00" >
2017-06-29 15:33:11 +00:00
< / div >
2017-09-01 15:26:47 +00:00
< span class = "help-block" > A total of other payments such as refunded fuel etc. for the entry month< / span >
2017-06-26 17:36:48 +00:00
< / div >
< / div >
2017-08-25 11:18:14 +00:00
< div class = "form-group row" >
< div class = "col-md-9" >
< div [ ngSwitch ] = " payrollFormStatus " >
< div * ngSwitchCase = "'success'" class = "alert alert-success" role = "alert" >
Submit Succeeded.
< / div >
< div * ngSwitchCase = "'send_failed'" class = "alert alert-danger" role = "alert" >
Error received, please try again.
< / div >
< / div >
< / div >
< / div >
2017-06-29 15:33:11 +00:00
< / div >
< div class = "card-footer" >
2017-08-25 11:18:14 +00:00
< button type = "submit" [ disabled ] = " ! payrollForm . valid " class = "btn btn-sm btn-primary" > < i class = "fa fa-dot-circle-o" > < / i > Submit< / button >
2017-06-29 15:33:11 +00:00
< / div >
2017-08-29 17:15:47 +00:00
< / form >
2017-06-29 15:33:11 +00:00
< / div >
2017-09-08 14:48:20 +00:00
< div * ngIf = "false" class = "card" >
2017-06-29 15:33:11 +00:00
< div class = "card-header" >
< strong > Individual Employee Data< / strong >
2017-09-08 11:16:43 +00:00
< small > Required Data marked in < strong > bold< / strong > .< / small >
2017-06-29 15:33:11 +00:00
< / div >
< form class = "form-horizontal" [ formGroup ] = " employeeForm " ( ngSubmit ) = " onSubmitEmployee ( ) " >
< div class = "card-block" >
2017-07-03 16:20:48 +00:00
< div class = "form-group row" >
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Period of entry month< / strong > < / label >
< div class = "col-md-9" >
2017-09-08 11:55:42 +00:00
< input type = "month" class = "form-control" formControlName = "entry_period" >
2017-09-01 15:26:47 +00:00
< span class = "help-block" > Enter the month and year for this information.< / span >
2017-07-03 16:20:48 +00:00
< / div >
< / div >
2017-06-29 15:33:11 +00:00
< div class = "form-group row" >
2017-09-08 11:16:43 +00:00
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Employee number< / strong > < / label >
2017-06-29 15:33:11 +00:00
< div class = "col-md-9" >
2017-09-08 11:55:42 +00:00
< input type = "number" class = "form-control" formControlName = "employee_no" placeholder = "0" >
2017-06-29 15:33:11 +00:00
< span class = "help-block" > Used to identify employee anonymously< / span >
< / div >
< / div >
< div class = "form-group row" >
2017-09-08 11:16:43 +00:00
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Gross Wage< / strong > < / label >
2017-06-29 15:33:11 +00:00
< div class = "col-md-9" >
< div class = "input-group" >
< span class = "input-group-addon" > < i class = "fa fa-gbp" > < / i > < / span >
2017-09-08 11:55:42 +00:00
< input type = "number" min = "0.00" step = "0.01" class = "form-control" formControlName = "employee_gross_wage" placeholder = "0.00" >
2017-06-26 17:36:48 +00:00
< / div >
2017-09-01 15:26:47 +00:00
< span class = "help-block" > Enter the gross wage of the employee for the entry month.< / span >
2017-06-29 15:33:11 +00:00
< / div >
< / div >
< div class = "form-group row" >
2017-09-08 11:16:43 +00:00
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Total Income Tax< / strong > < / label >
2017-06-29 15:33:11 +00:00
< div class = "col-md-9" >
< div class = "input-group" >
< span class = "input-group-addon" > < i class = "fa fa-gbp" > < / i > < / span >
2017-09-08 11:55:42 +00:00
< input type = "number" min = "0.00" step = "0.01" class = "form-control" formControlName = "employee_income_tax" placeholder = "0.00" >
2017-06-26 17:36:48 +00:00
< / div >
2017-09-01 15:26:47 +00:00
< span class = "help-block" > Enter the total income tax of the employee for the entry month< / span >
2017-06-26 17:36:48 +00:00
< / div >
< / div >
< div class = "form-group row" >
2017-09-08 11:16:43 +00:00
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Total Employee NI< / strong > < / label >
2017-06-26 17:36:48 +00:00
< div class = "col-md-9" >
2017-06-29 15:33:11 +00:00
< div class = "input-group" >
< span class = "input-group-addon" > < i class = "fa fa-gbp" > < / i > < / span >
2017-09-08 11:55:42 +00:00
< input type = "number" min = "0.00" step = "0.01" class = "form-control" formControlName = "employee_ni" placeholder = "0.00" >
2017-06-29 15:33:11 +00:00
< / div >
2017-09-01 15:26:47 +00:00
< span class = "help-block" > Individual Employees National Insurance Contributions for the entry month< / span >
2017-06-26 17:36:48 +00:00
< / div >
< / div >
< div class = "form-group row" >
2017-09-08 11:16:43 +00:00
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Employee's Pension< / strong > < / label >
2017-06-26 17:36:48 +00:00
< div class = "col-md-9" >
2017-06-29 15:33:11 +00:00
< div class = "input-group" >
< span class = "input-group-addon" > < i class = "fa fa-gbp" > < / i > < / span >
2017-09-08 11:55:42 +00:00
< input type = "number" min = "0.00" step = "0.01" class = "form-control" formControlName = "employee_pension" placeholder = "0.00" >
2017-06-29 15:33:11 +00:00
< / div >
2017-09-01 15:26:47 +00:00
< span class = "help-block" > Individual Employees Pension contributions for the entry month< / span >
2017-06-26 17:36:48 +00:00
< / div >
< / div >
< div class = "form-group row" >
2017-09-08 11:16:43 +00:00
< label class = "col-md-3 form-control-label" for = "text-input" > < strong > Total Employee Other Benefits< / strong > < / label >
2017-06-26 17:36:48 +00:00
< div class = "col-md-9" >
2017-06-29 15:33:11 +00:00
< div class = "input-group" >
< span class = "input-group-addon" > < i class = "fa fa-gbp" > < / i > < / span >
2017-09-08 11:55:42 +00:00
< input type = "number" min = "0.00" step = "0.01" class = "form-control" formControlName = "employee_other_benefit" placeholder = "0.00" >
2017-06-29 15:33:11 +00:00
< / div >
2017-09-01 15:26:47 +00:00
< span class = "help-block" > A total of other payments such as refunded fuel etc. for the entry month< / span >
2017-06-26 17:36:48 +00:00
< / div >
< / div >
2017-08-25 11:18:14 +00:00
< div class = "form-group row" >
< div class = "col-md-9" >
< div [ ngSwitch ] = " employeeFormStatus " >
< div * ngSwitchCase = "'success'" class = "alert alert-success" role = "alert" >
Submit Succeeded.
< / div >
< div * ngSwitchCase = "'send_failed'" class = "alert alert-danger" role = "alert" >
Error received, please try again.
< / div >
< / div >
< / div >
< / div >
2017-06-29 15:33:11 +00:00
< / div >
< div class = "card-footer" >
2017-08-25 11:18:14 +00:00
< button type = "submit" [ disabled ] = " ! employeeForm . valid " class = "btn btn-sm btn-primary" > < i class = "fa fa-dot-circle-o" > < / i > Submit< / button >
2017-06-29 15:33:11 +00:00
< / div >
< / form >
2017-06-26 17:36:48 +00:00
< / div >
< / div >
< / div > <!-- /.row -->
< / div >