client-ui/source/my-dashboard/my-dashboard.html

Testing implementation of nodeJs Backend, angular frontend, and hopefully in a way that this can be deployed to s3/cloudfront

<div ng-init="_ctrl = myDashboardController;
_ctrl.init()">
<div class="row">
    <div class="col-sm-12">
        <div class="panel-empty">
            <h2 class="text-center">My Dashboard</h2>
            <div ng-if="!_ctrl.loan" class="text-center">
                <i class="fa fa-spinner fa-pulse fa-4x"></i>
            </div>
                <!--/////////////////////////////
                //////Alert Messages/////////
                ///////////////////////////// -->
                <div ng-repeat="message in _ctrl.messages">
                    <div ng-switch on="message">
                        <div ng-switch-when="PASSWORD_RESET" class="alert alert-success">
                            Your password was successfully reset
                        </div>
                        <div ng-switch-when="CALL_TO_PROCEED" class="alert alert-warning">
                            Since you want to make your monthly loan payments the old fashioned way (via check), we’ll give you a call within the next business day to confirm your payment method and make sure you know the ins and outs of the process. After we give you a call, you'll be able to finish the last steps of your loan application. If you want to change your payment method to have them automatically withdrawn from your bank account instead, you can do so <a href="app.html#/verify/bank">here</a>.
                        </div>
                        <div ng-switch-when="DOCS_PENDING" ng-show="_ctrl.isBusinessHour()" class="alert alert-warning">
                            We are currently reviewing your documents, and this typically takes us less than fifteen minutes during business hours. Once one of our Personal Loan Experts verifies your documents, we'll contact you when you can finish your loan. If you prefer to stick around the site and wait, we'll automatically send you to the last steps of the loan process when your documents are verified. <br>
                            Want to upload more documents? Click <a ui-sref="loanApplication.verify.identity">here</a>.
                        </div>
                        <div ng-switch-when="DOCS_PENDING" ng-show="!_ctrl.isBusinessHour()" class="alert alert-warning">
                            Our Personal Loan Experts will verify your documents during our business hours and send you an email to let you know when you can finish up your loan. You may sign out, if you like. <br>
                            Want to upload more documents? Click <a ui-sref="loanApplication.verify.identity">here</a>.
                        </div>
                    </div>
                </div>
                <div ng-if="(!_ctrl.loanIsWaiting && _ctrl.loan.statusCode < 500) && !_ctrl.loan.hasOwnProperty('adverseActionPdf')" class="col-xs-12 text-center">
                    <p>
                        <a id="dashboard-continue-loan" class="btn btn-success large-btn" ui-sref="{{_ctrl.getNextStep()}}">Continue Loan</a>
                    </p>
                </div>

            </div>
        </div>
        <div class="col-xs-12">
            <div class="alert alert-warning" ng-if="_ctrl.loan.hasOwnProperty('adverseActionPdf')">
                <p>
                    Your application for a personal loan could not be approved at this time, but you can re-apply in 45 days and may be approved at that time. <br\>
                    The 'My Documents' below provides specific information that details why we could not approve your personal loan. <br\>
                    We hope to work with you in the future upon reviewing and addressing the reasons why your loan could not currently be approved. <br\> 
                    If you have any other questions regarding your application, feel free to email us at <a href="mailto:{{globalConfig.company.email.support}}?Subject=Talk%20to%20Us" target="_top">{{globalConfig.company.email.support}}</a> or call <a href="tel://{{globalConfig.company.phone.dash}}">{{globalConfig.company.phone.long}}</a>.
                </p>
            </div>
        </div>
        <!--///////////////////////////
        //////My paymentsPost Close/////
        ///////////////////////////////-->
        <div class="col-xs-12" ng-if="_ctrl.loan && _ctrl.postClose" style="margin-bottom:20px">
            <div class="box-border-sides box-border-top box-border-bottom">
                <div class="collapse-header">
                    <h5>My Loan</h5>
                </div>

                <div id="collapseMyRePayments" class="collapse-body">
                    <p>
                        You’re all set up for electronic payments! Your payments will be automatically withdrawn from your bank account at the same time every month.
                    </p>

                    <!--///////////////////////////
                    //////repayment details Post Close/////
                    ///////////////////////////////-->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="about-us-header collapse-body">
                                <label>Next Scheduled Payment</label>
                                <h5 ng-bind="(_ctrl.loan.servicing.nextInstallmentAmount || 0) | currency"></h5>
                                <label>Next Scheduled Payment Date</label>
                                <h5 ng-bind="_ctrl.loan.servicing.nextPaymentDueDate | date: 'MM / dd / yyyy'"></h5>
                                <label>Balance</label>
                                <h5 ng-bind="_ctrl.loan.servicing.balance | currency"></h5>
                            </div>
                        </div>

                        <!--///////////////////////////
                        //////Pie Chart Post Close/////
                        ///////////////////////////////-->
                        <div class="col-md-6">
                            <div class="panel-empty" ng-init="_ctrl.generateChart()">
                                <div class="col-xs-6">
                                    <ul class="legend">
                                        <li><span class="balance"></span>Balance</li>
                                        <li><span class="payments"></span>Payments</li>
                                    </ul>
                                </div>
                                <div class="col-xs-6">
                                    <canvas id="paymentInterestChart"></canvas>
                                </div>
                                <div class="col-md-12">
                                    <a ui-sref="loanDashboard.makePayment" class="btn btn-success">Make an Additional Payment</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--////////////////
        /////Loan Details//////
        /////////////////-->
        <div class="col-xs-12" ng-if="!_ctrl.loan.hasOwnProperty('adverseActionPdf')" ng-show="_ctrl.loan.selectedOffer" style="margin-bottom:20px">
            <div class="box-border-sides box-border-top box-border-bottom">
                <div class="collapse-header icon-toggle show-pointer" data-toggle="collapse" data-target="#collapseSelectedLoanDetails">
                    <h5><span> <i class="fa fa-minus-square"></i><i class="fa fa-plus-square"></i></span>&nbsp&nbsp My <span ng-hide="_ctrl.postClose">Selected</span> Loan Overview</h5>
                </div>
                <div id="collapseSelectedLoanDetails" class="collapse in">
                    <div class="row loan-details collapse-body">
                        <div class="col-xs-6 col-sm-4">
                            <label>Original Amount</label>
                            <h5 ng-bind="_ctrl.loan.selectedOffer.amount | loanAmount"></h5>
                        </div>
                        <div class="col-xs-6 col-sm-4">
                            <label>Loan Term</label>
                            <h5 ng-bind="(_ctrl.loan.selectedOffer.duration || 0) + ' Mo.'"></h5>
                        </div>
                        <div class="col-xs-6 col-sm-4">
                            <label>Status</label>
                            <h5>{{_ctrl.loan.statusCode| loanStatus}}</h5>
                        </div>
                        <div class="col-xs-6 col-sm-4">
                            <label>Fixed Loan Rate</label>
                            <h5 ng-bind="_ctrl.loan.selectedOffer.rate | rateTwoDecimal"></h5>
                        </div>
                        <div class="col-xs-6 col-sm-4">
                            <label>APR</label>
                            <h5 ng-bind="_ctrl.loan.selectedOffer.annualPercentageRate | rateTwoDecimal"></h5>
                        </div>
                        <div class="col-xs-6 col-sm-4">
                            <label>Origination Fees</label>
                            <h5 ng-bind="_ctrl.loan.selectedOffer.originationFee | loanAmount"></h5>
                        </div>                        
                    </div>
                </div>
            </div>
        </div>
        <!--////////////////////////////
        /////AM Schedule AND ///////////
        /////LOAN REPAYMENT SCHEDULE////
        /////////////////////////////-->
        <div class="col-xs-12" ng-if="_ctrl.preClose || !_ctrl.loan.hasOwnProperty('adverseActionPdf')" ng-show="_ctrl.loan.selectedOffer" style="margin-bottom:20px">
            <div class="box-border-sides box-border-top box-border-bottom">
                <div class="collapse-header icon-toggle show-pointer collapsed" data-toggle="collapse" data-target="#collapseAmSchedule">
                    <h5><span><i class="fa fa-minus-square"></i><i class="fa fa-plus-square"></i></span>&nbsp&nbsp My <span ng-hide="_ctrl.postClose">Selected</span> Loan Repayment Schedule</h5>
                </div>
                <div id="collapseAmSchedule" class="small-mobile-text collapse">
                    <div class="row collapse-body">
                        <div ng-if="_ctrl.amSchedule.payments && _ctrl.preClose">
                            <div class="col-xs-3">
                                Date
                            </div>
                            <div class="col-xs-2">
                                Payment
                            </div>
                            <div class="col-xs-2">
                                Principal
                            </div>
                            <div class="col-xs-2">
                                Interest
                            </div>
                            <div class="col-xs-3">
                                Balance
                            </div>
                            <div class="col-xs-12">
                                <hr class="dashed">
                            </div>
                            <div class="col-xs-12">
                                <div class="row" ng-repeat="amScheduleRecord in _ctrl.amSchedule.payments">
                                    <div class="col-xs-3">
                                        {{amScheduleRecord.date| date: 'MM/dd/yyyy'}}
                                    </div>
                                    <div class="col-xs-2">
                                        {{amScheduleRecord.paymentAmount| currency}}
                                    </div>
                                    <div class="col-xs-2">
                                        {{amScheduleRecord.principalAmount| currency}}
                                    </div>
                                    <div class="col-xs-2">
                                        {{amScheduleRecord.interestAmount| currency}}
                                    </div>
                                    <div class="col-xs-3">
                                        {{amScheduleRecord.endingCarryBalance| currency}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div ng-if="_ctrl.paymentSchedule">
                            <div class="col-xs-2">
                                Date
                            </div>
                            <div class="col-xs-2">
                                Payment
                            </div>
                            <div class="col-xs-2">
                                Principal
                            </div>
                            <div class="col-xs-2">
                                Interest
                            </div>
                            <div class="col-xs-2">
                                Balance
                            </div>
                            <div class="col-xs-2">
                                Status
                            </div>
                            <div class="col-xs-12">
                                <div class="row" ng-repeat="amScheduleRecord in _ctrl.paymentSchedule">
                                    <div class="col-xs-2" ng-hide="amScheduleRecord.transactionDate">
                                        {{amScheduleRecord.dueDate| date: 'MM/dd/yyyy'}}
                                    </div>
                                    <div class="col-xs-2" ng-show="amScheduleRecord.transactionDate">
                                        {{amScheduleRecord.transactionDate| date: 'MM/dd/yyyy'}}
                                    </div>
                                    <div class="col-xs-2">
                                        {{amScheduleRecord.paymentAmount| currency}}
                                    </div>
                                    <div class="col-xs-2">
                                        {{amScheduleRecord.principal| currency}}
                                    </div>
                                    <div class="col-xs-2">
                                        {{amScheduleRecord.interest| currency}}
                                    </div>
                                    <div class="col-xs-2">
                                        {{amScheduleRecord.endingBalance| currency}}
                                    </div>
                                    <div class="col-xs-2">
                                        {{amScheduleRecord.status}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div ng-if="(!_ctrl.amSchedule && _ctrl.loan.selectedOffer) && !_ctrl.paymentSchedule" class="text-center">
                            <i class="fa fa-spinner fa-pulse fa-4x"></i>
                        </div>
                        <div ng-if="!_ctrl.amSchedule && !_ctrl.loan.selectedOffer" class="text-center">
                            <div class="alert alert-warning">
                                Please select a loan offer to see payment schedule
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--////////////////
        /////Documents//////
        /////////////////-->
        <div class="col-xs-12" ng-show="_ctrl.disclosures" style="margin-bottom:20px">
            <div class="box-border-sides box-border-bottom box-border-top">
                <div class="collapse-header icon-toggle show-pointer collapsed" data-toggle="collapse" data-target="#collapseDocuments">
                    <h5 class="accordion-toggle"><span><i class="fa fa-minus-square"></i><i class="fa fa-plus-square"></i></span>&nbsp&nbsp My Documents</h5>
                </div>
                <div id="collapseDocuments" class="my-documents collapse">
                    <div class="row collapse-body">
                        <div class="col-xs-6">
                            Title
                        </div>
                        <div class="col-xs-6">
                            Time, Date
                        </div>
                        <div class="col-xs-12">
                            <hr class="dashed">
                        </div>
                        <div ng-repeat="(key, disclosure) in _ctrl.disclosures">
                            <div class="col-xs-12">
                                <div class="row document-row">
                                    <div class="col-xs-6 word-wrap">
                                        <a class="modal-link" href="" ng-click="_ctrl.generateDownloadUrl('disclosure', disclosure.documentType, disclosure)" src="disclosure.documentUrl" title="{{disclosure.documentTitle}}" modal-link>
                                        </a>
                                    </div>
                                    <div class="col-xs-6">
                                        {{disclosure.clientSignature.timestamp| date:'h:mm a, MM/d/yyyy'}}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div ng-if="_ctrl.loan.hasOwnProperty('adverseActionPdf')">
                            <div class="col-xs-6">
                                <a class="modal-link" href="" ng-click="_ctrl.generateDownloadUrl('adverseActionPdf', 'adverseActionPdf', _ctrl.loan.adverseActionPdf)" src="_ctrl.loan.adverseActionPdf.documentUrl" title="Adverse Action Notification" modal-link>
                                </a>
                            </div>
                            <div class="col-xs-6">
                                {{_ctrl.loan.adverseActionPdf.timestamp| date:'h:mm a, MM/d/yyyy'}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>