VF page

gistfile1.txt

<apex:page controller="LP_Dashboard_Controller">

	<style>

		/** {
			border: 1px solid red;
		}*/

		.flex-around {
			display: flex;
			justify-content: flex-start;
		}

		.full-width {
			width: 37%;
		}

		.colored-blue {
			color: white;
			background-color: #537D9D;
			font-weight: bold;
		}

		.colored-gray {
			font-weight: bold;
			background-color: lightgray;
			text-align: center;
		}

		.text-center {
			text-align: center;
		}

		.flex-around .table-small tr td:nth-child(1) {
			font-weight: bold;
		}

		.table-small {
			border: 1px solid black;
			table-layout: fixed;
			width: 18%;
			margin-right: 20px;
		}

		.margin-bottom {
			margin-bottom: 20px;
		}

		.overflow {
			width: 37%;
			overflow: scroll;
		}

	</style>

	<div class="full-width colored-blue margin-bottom text-center">
		Crosswind Venture Fund, L.P. Dashboard
	</div>

	<div class="flex-around margin-bottom">
		<table class="table-small">
			<tr>
				<th colspan="2" class="colored-blue text-center">
					Current Portfolios
				</th>
			</tr>
			<tr>
				<td>
					Current Loans
				</td>
				<td>
				</td>
			</tr>

			<tr>
				<td>
					Current Outstanding Balance
				</td>
				<td>
				</td>
			</tr>

			<tr>
				<td>
					Average Loan Amount
				</td>
				<td>
				</td>
			</tr>

			<tr>
				<td>
					Average Yield
				</td>
				<td>
				</td>
			</tr>
		</table>

		<table class="table-small">
			<tr>
				<th colspan="2" class="colored-blue text-center">
					Current Revenue Snapshot
				</th>
			</tr>
			<tr>
				<td>
					Points Earned Current Month
				</td>
				<td>
				</td>
			</tr>

			<tr>
				<td>
					Other Income Earned Current Month
				</td>
				<td>
				</td>
			</tr>

			<tr>
				<td>
					Points Earned 2017 YTD
				</td>
				<td>
				</td>
			</tr>

			<tr>
				<td>
					Other Income 2017 YTD
				</td>
				<td>
				</td>
			</tr>
		</table>
	</div>

	<div class="flex-around margin-bottom">
		<table class="table-small">
			<tr>
				<th colspan="2" class="colored-blue text-center">
					Current Commitments
				</th>
			</tr>
			<tr>
				<td>
					Total Commitments
				</td>
				<td>
				</td>
			</tr>

			<tr>
				<td>
					Total to Fund
				</td>
				<td>
				</td>
			</tr>

			<tr>
				<td>
					% unused commitments
				</td>
				<td>
				</td>
			</tr>

			<tr>
				<td>
				</td>
				<td>
				</td>
			</tr>
		</table>

		<table class="table-small">
			<tr>
				<th colspan="2" class="colored-blue text-center">
					Line of Credit
				</th>
			</tr>
			<tr>
				<td>
					Amount Drawn Down
				</td>
				<td>
				</td>
			</tr>

			<tr>
				<td>
					Pledged
				</td>
				<td>
				</td>
			</tr>

			<tr>
				<td>
					LOC Availability
				</td>
				<td>
				</td>
			</tr>

			<tr>
				<td>
				</td>
				<td>
				</td>
			</tr>
		</table>
	</div>

	<div class="overflow">
		<table>
			<tr>
				<th colspan="2" class="colored-blue">
					Current Portfolio
				</th>
			</tr>
			<tr class="colored-gray">
				<th>
					Loan Number
				</th>
				<th>
					Address
				</th>
				<th>
					City
				</th>
				<th>
					County
				</th>
				<th>
					Pledged
				</th>
				<th>
					Pledged Amount
				</th>
				<th>
					% of Loan
				</th>
				<th>
					Total Loan Amount
				</th>
				<th>
					Initial Funding
				</th>
				<th>
					Renovation Loan
				</th>
				<th>
					Drawn to Date
				</th>
				<th>
					Interest Reserve
				</th>
				<th>
					3rd Party Participation
				</th>
				<th>
					Total Funding to Date
				</th>
				<th>
					% of Assets
				</th>
				<th>
					Yield
				</th>
				<th>
					Funding Date
				</th>
				<th>
					Original Maturity
				</th>
				<th>
					Current Maturity
				</th>
				<th>
					Holding Period
				</th>
				<th>
					Purchase Price
				</th>
				<th>
					Renovation Cost
				</th>
				<th>
					LTC
				</th>
				<th>
					Borrower
				</th>
				<th>
					Borrower #
				</th>
				<th>
					Borrower Exposure
				</th>
			</tr>
		</table>
	</div>

<!-- pending payoffs -->
	<div class="overflow">
		<table>
			<tr>
				<th colspan="2" class="colored-blue">
					Pending Payoffs
				</th>
			</tr>
			<tr class="colored-gray">
				<th>
					Code
				</th>
				<th>
					Address
				</th>
				<th>
					City
				</th>
				<th>
					County
				</th>
				<th>
					Pledged
				</th>
				<th>
					Pledged Amount
				</th>
				<th>
					% of Loan
				</th>
				<th>
					Total Loan Amount
				</th>
				<th>
					Initial Funding
				</th>
				<th>
					Holdback
				</th>
				<th>
					Drawn to Date
				</th>
				<th>
					Interest Reserve
				</th>
				<th>
					3rd Party Participation
				</th>
				<th>
					Payback Amount
				</th>
				<th>
					Payoff Date
				</th>
			</tr>
		</table>
	</div>

<!-- paid off table -->
	<div class="overflow">
		<table>
			<tr>
				<th colspan="2" class="colored-blue">
					Paid Off
				</th>
			</tr>
			<tr class="colored-gray">
				<th>
					Code
				</th>
				<th>
					Address
				</th>
				<th>
					City
				</th>
				<th>
					County
				</th>
				<th>
					Pledged
				</th>
				<th>
					Pledged Amount
				</th>
				<th>
					% of Loan
				</th>
				<th>
					Total Loan Amount
				</th>
				<th>
					Initial Funding
				</th>
				<th>
					Holdback
				</th>
				<th>
					Drawn to Date
				</th>
				<th>
					Interest Reserve
				</th>
				<th>
					3rd Party Participation
				</th>
				<th>
					Total Funding to Date
				</th>
				<th>
					% of Assets
				</th>
				<th>
					Yield
				</th>
				<th>
					Issue Date
				</th>
				<th>
					Original Maturity
				</th>
				<th>
					Current Maturity
				</th>
				<th>
					Payoff Date
				</th>
				<th>
					Purchase Price
				</th>
				<th>
					Renovation Cost
				</th>
				<th>
					LTV
				</th>
				<th>
					Borrower
				</th>
				<th>
					Borrower #
				</th>
				<th>
					Sold Price
				</th>
			</tr>
		</table>
	</div>

	<script>
		var db = [];

		window.onload = function(){
			Visualforce.remoting.Manager.invokeAction(
				'{!RemoteAction.LP_Dashboard_Controller.getOpps}',
				function(result, event){
					if (event.status){
						console.log(result);
					} else {
						console.log(event.message);
						console.log(event.where);
					}
				},
				{escape: true}
			);
		}
	</script>

</apex:page>