Northgate Rents Content

Rents Summary of Account

This highly intelligent summary of account will intelligently present:

• The address

• The tenancy start date

• The rent account balance

  • Will show a badge if in credit or in arrears

• The rent account number

• A mini statement

• Contact details on the second tab of Tenancy Info

• Useful form links

<br>
	<div class="col-md-4 col-sm-6 col-xs-12">
		<div class="card">
			<div class="tabbable-panel">
				<div class="tabbable-line tabs-below">
					<div class="tab-content">
						<div class="tab-pane active" id="tab_below_1">
							<p class="cardheading">Tenancy Info</p>
							<p></p>
							<hr>
								<p class="heading">Your Home</p>
								<p> {{#each Tenancy.Properties}} {{Address.Display}} {{/each}} </p>
								<br>
									<p class="heading">Your tenancy start date was:</p>
									<p>${Tenancy.CommencementDate.ToString("dd/MM/yyyy")}</p>
								</div>
								<div class="tab-pane" id="tab_below_2">
									<p class="heading">Contact Details</p>
									<a href="#/profile/contact-details" class="btn btn-sm btn-primary">Change your phone number</a>
									<hr>
										<p >Email</p>
										<a href="#/profile/contact-details" class="btn btn-sm btn-primary">Change your email address</a>
									</div>
									<div class="tab-pane" id="tab_below_3">
										<p class="cardheading">Useful Forms</p>
										<p>The following are online services most commonly used for council tenants</p>
										<hr>
											<a href="#" class="btn btn-sm btn-primary">Claim Benefits</a>
											<a href="#" class="btn btn-sm btn-primary">Benefits change in circumstance</a>
											<a href="#" class="btn btn-sm btn-primary">Make a payment</a>
										</div>
										<div class="actions1">
											<ul class="nav nav-tabs">
												<li class="active">
													<a href="#tab_below_1" data-toggle="tab"> Details </a>
												</li>
												<li class="">
													<a href="#tab_below_2" data-toggle="tab"> Contacts </a>
												</li>
												<li class="">
													<a href="#tab_below_3" data-toggle="tab"> Useful forms </a>
												</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 col-sm-6 col-xs-12">
						<div class="card">
							<p class="cardheading">Your account at a glance</p>
							<p>Your rent account number is: </p>
							<p class="heading">{{#each Tenancy.RentAccounts}} {{PaymentReference}} {{/each}} </p>
						</p>
						<p>Your account balance is: </p>
						<p class="heading"> {{#each Tenancy.RentAccounts}} £{{CurrentBalance}} {{/each}} </p> {{#each Tenancy.RentAccounts}} {{if_lt CurrentBalance '0' }} 
						<div class="badge credit" style="background-color: teal;">
							<p style="color:white !important; margin-bottom:0px !Important;">Your account is in credit.</p>
						</div> {{/if_lt}} {{/each}} 
						<hr>
							<div class="actions1"></div>
						</div>
					</div>
					<div class="col-md-4 col-sm-6 col-xs-12">
						<div class="card">
							<p class="cardheading">Mini Statement</p>
							<table class="table table-striped" style=" height: 350px !important; display: block !important; overflow: scroll; ">
								<thead>
									<tr>
										<th>Date</th>
										<th>Description</th>
										<th>Debit</th>
										<th>Credit</th>
										<th>Balance</th>
									</tr>
								</thead>
								<tbody> {{#each Tenancy.RentAccounts}} {{#each Transactions}} {{if_eq Type 'DRS'}} 
									<tr>
										<td style="font-size: 15px !important;">{{formatToString Date "dd/MM/yy"}}</td>
										<td style="font-size: 15px !important;">Weekly Rent</td>
										<td class="redcell" style="font-size: 15px !important;">{{formatToString Debit "C"}}</td>
										<td class="greencell" style="font-size: 15px !important;">-{{formatToString Credit "C"}}</td>
										<td class="greycell" style="font-size: 15px !important;">{{formatToString Balance "C"}}</td>
									</tr> {{/if_eq}} {{if_eq Type 'HBS'}} 
									<tr>
										<td style="font-size: 15px !important;">{{formatToString Date "dd/MM/yy"}}</td>
										<td style="font-size: 15px !important;">Housing Benefit</td>
										<td class="redcell" style="font-size: 15px !important;">{{formatToString Debit "C"}}</td>
										<td class="greencell" style="font-size: 15px !important;">-{{formatToString Credit "C"}}</td>
										<td class="greycell" style="font-size: 15px !important;">{{formatToString Balance "C"}}</td>
									</tr> {{/if_eq}} {{if_eq Type 'PAY'}} 
									<tr>
										<td style="font-size: 15px !important;">{{formatToString Date "dd/MM/yy"}}</td>
										<td style="font-size: 15px !important;">Payments</td>
										<td class="redcell" style="font-size: 15px !important;">{{formatToString Debit "C"}}</td>
										<td class="greencell" style="font-size: 15px !important;">-{{formatToString Credit "C"}}</td>
										<td class="greycell" style="font-size: 15px !important;">{{formatToString Balance "C"}}</td>
									</tr> {{/if_eq}} {{/each}} {{/each}} 
								</tbody>
							</table>
							<hr>
								<div class="actions1">
									<a class="btn btn-sm btn-primary" href="#">Make a payment</a>
								</div>
							</div>
						</div> 

Full Statement of Account

This statement of account will show the transactions desired and also enables different coloured cells for Debits and Credits by using CSS. It also has built in conditions to show certain transaction types, which can be tweaked or added to:

Statement of account - colour coordinated columns

<br>
	<p>Just like Digital Banking, you can now view a real time view of your statement below. </p>
	<br>
		<table class="table table-striped">
			<thead>
				<tr>
					<th>Date</th>
					<th>Description</th>
					<th>Debit</th>
					<th>Credit</th>
					<th>Balance</th>
				</tr>
			</thead>
			<tbody> 
			{{#each Tenancy.RentAccounts}} 
			{{#each Transactions}} 
			{{if_eq Type 'DRS'}} 
				<tr>
					<td style="font-size: 15px !important;">{{formatToString Date "dd/MM/yy"}}</td>
					<td style="font-size: 15px !important;">Weekly Rent</td>
					<td class="redcell" style="font-size: 15px !important;">{{formatToString Debit "C"}}</td>
					<td class="greencell" style="font-size: 15px !important;">-{{formatToString Credit "C"}}</td>
					<td class="greycell" style="font-size: 15px !important;">{{formatToString Balance "C"}}</td>
				</tr> 
				{{/if_eq}} 
				{{if_eq Type 'HBS'}} 
				<tr>
					<td style="font-size: 15px !important;">{{formatToString Date "dd/MM/yy"}}</td>
					<td style="font-size: 15px !important;">Housing Benefit</td>
					<td class="redcell" style="font-size: 15px !important;">{{formatToString Debit "C"}}</td>
					<td class="greencell" style="font-size: 15px !important;">-{{formatToString Credit "C"}}</td>
					<td class="greycell" style="font-size: 15px !important;">{{formatToString Balance "C"}}</td>
				</tr> 
				{{/if_eq}} 
				{{if_eq Type 'PAY'}} 
				<tr>
					<td style="font-size: 15px !important;">
					{{formatToString Date "dd/MM/yy"}}</td>
					<td style="font-size: 15px !important;">Payments</td>
					<td class="redcell" style="font-size: 15px !important;">{{formatToString Debit "C"}}</td>
					<td class="greencell" style="font-size: 15px !important;">-{{formatToString Credit "C"}}</td>
					<td class="greycell" style="font-size: 15px !important;">{{formatToString Balance "C"}}</td>
				</tr> 
				{{/if_eq}} 
				{{/each}} 
				{{/each}} 
			</tbody>
		</table>