Base Code: Web Office Pay History Page

The following is the base code for the Web Office Pay History report page. We provide this code so you can customize it to fulfill your needs better.

Web Office URL: [CLIENTID].office.directscale.com/app.html#/PayHistory

Web Office Pay History pageWeb Office Pay History page

  1. Copy this code into a Custom Page in Web Office Admin and customize it to your liking.
  2. Once published, add the custom page URL to the Web Office navigation.
<div ng-controller="CustomPayHistoryController as ctrl">
<div id="PayHistoryPage" >
    <div ng-if="!SessionData.MobileScreen">
        <headerpage id="header" class="bgm-color1"></headerpage>
        <div class="empty_state common_placeholder position-static" ng-if="!ctrl.IsLoading && (ctrl.CommissionChecks.length===0 || !ctrl.IsShowView)"
             translate>payhistory_yet</div>
        <div class="empty_state common_placeholder position-static" ng-if="ctrl.IsLoading" translate>loading_commissions</div>
        <div class="p-page p-page--large m-secondary-sidebar clearfix" id="CommissionsPayHistory" ng-if="ctrl.CommissionChecks.length!=0">
            <div class="sidebar-secondary overflow-hidden" ng-if="(!SessionData.MobileScreen && ctrl.CommissionChecks.length>0) || ctrl.IsShowView ">
                <div class="commission-balance" ng-class="{'b-blue': ctrl.ShowAccountBalanceDetails === true}" ng-if="ctrl.ShowAccountBalance" ng-click="ctrl.getAccountBalanceDetails()">
                    <span translate>account_balance</span>: <span>{{ctrl.AccountBalance | currency:"$":2}}</span>
                </div>
                <div class="custom-dp">
                    <div class="col-sm-12 col-md-12 col-xs-12 col-lg-12 p-0 custom-dp-header"
                         ng-class="ctrl.IsShowOptions?'':'bgm-color3'" ng-click="ctrl.IsShowOptions = !ctrl.IsShowOptions">
                        <div class="col-sm-10 col-md-10 col-xs-10 col-lg-10 p-0" ng-if="!ctrl.IsShowOptions">
                            <span class="dp-head f-s-16 pull-left">
                                <span translate>payhistory_show</span>
                                <span ng-if="ctrl.SelectedFilters == 'All'" translate>all_</span>
                                <span ng-if="ctrl.SelectedFilters != 'All'" translate>{{ctrl.SelectedFilters}}</span>
                            </span>
                        </div>
                        <div class="col-sm-12 col-md-12 col-xs-12 p-t-20 p-b-20 p-l-10 p-r-10" ng-if="ctrl.IsShowOptions">
                            <span class="f-s-14 pull-left" translate>show_payments_that_include</span>
                        </div>
                        <div class="col-sm-2 col-md-2 col-xs-2 col-lg-2 m-t-15 dp-icon" ng-if="!ctrl.IsShowOptions">
                            <i class="zmdi zmdi-caret-down zmdi-hc-fw pull-right"></i>
                        </div>
                    </div>

                    <div class="col-sm-12 col-md-12 col-xs-12 col-lg-12 p-0 custom-dp-body" ng-if="ctrl.IsShowOptions"
                         ng-class="ctrl.ShowAccountBalance?'accountBalance' :''">
                        <ul class="p-l-0">
                            <li ng-repeat="PaymentTypeFilter in ctrl.PaymentTypeFilters">
                                <label class="checkbox checkbox-inline" for="{{PaymentTypeFilter.Id}}">
                                    <input type="checkbox" id="{{PaymentTypeFilter.Id}}" ng-click="ctrl.OnChangeFilter(PaymentTypeFilter.Id, PaymentTypeFilter.IsChecked)"
                                           ng-model="PaymentTypeFilter.IsChecked">
                                    <span class="input-helper"></span>
                                    <span class="f-500 ng-scope" translate="{{PaymentTypeFilter.Name}}" translate-default="{{PaymentTypeFilter.Name}}"></span>
                                </label>
                            </li>
                        </ul>
                        <hr class="m-b-0">
                        <div class="col-sm-12 col-md-12 col-xs-12 col-lg-12 p-5 dp-bottom">
                            <a class="dp-done c-gray pull-right p-5" ng-click="ctrl.filterChecks();" translate>done</a>
                        </div>
                    </div>
                </div>
                <br>
                <div id="PeriodList" class="card mwidth" style="height:calc(100% - 30px) !important;" loader>
                    <div class="listview custom_scrollbar" id="CommissionPeriodVolume" style="height:94%;overflow-y:auto;" when-scroll-element="ctrl.GetRecordsOnScroll()"
                         scroll-bottom-on="status.loaded">
                        <div class="lv-body" ng-repeat="CommissionCheck in ctrl.CommissionChecks track by $index">
                            <div class="lv-item b-b cursor-pointer p-l-5 p-r-5" ng-class="$first && !ctrl.ShowAccountBalanceDetails?'b-blue':''" ng-click="getCommissionCheckDetails(CommissionCheck);">
                                <div class="media">
                                    <div class="media-body period-item">
                                        <div class="lv-title ng-binding">
                                            <span translate ng-if="!ctrl.isProjected(CommissionCheck)">paid_on</span>
                                            <span class="projected-text" translate ng-if="ctrl.isProjected(CommissionCheck)">period_ending</span>
                                            <a id="1" class="CommunityfontStyle c-black" ng-bind="CommissionCheck.DatePaid | date:SessionData.DateFormatType" ng-class="{'projected-text': ctrl.isProjected(CommissionCheck)}"></a>
                                        </div>
                                        <div class="Dateswitch m-t-5" ng-class="{'projected-text': ctrl.isProjected(CommissionCheck)}">
                                            <span ng-bind="CommissionCheck.AmountPaid | currency:'$':2"></span>
                                        </div>
                                        <span ng-repeat="paymentType in CommissionCheck.PaymentTypes track by $index" class="badge pull-left m-t-5 m-r-5" ng-class="{'projected-badge': paymentType === 'Projected'}" translate="">{{paymentType | translate}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Check Section -->

            <div ng-show="!ctrl.ShowInvoice && !ctrl.ShowAccountBalanceDetails">
                <div ng-if="ctrl.isProjected(ctrl.SelectedCommissionCheck)" class="row check-section" style="background-color: #FFA5A5; border: none; padding: 20px;">
                    <span translate>projected_comission_alert</span>
                </div>

                <div ng-if="ctrl.CommissionChecks.length > 0 || ctrl.IsShowView" class="row check-section p-5" id="PayHistoryLoad" ng-class="{'projected-check': ctrl.isProjected(ctrl.SelectedCommissionCheck)}" loader>
                    <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12  p-0 m-0">
                        <div class="col-sm-2 col-xs-2 col-md-2 col-lg-2 pull-left">
                            <img class="comp-logo" ng-src="{{SessionData.CompanyDetail.LogoUrl}}">
                        </div>
                        <div class="col-sm-5 col-xs-5 col-md-5 col-lg-5 address">

                            <span ng-bind="SessionData.CompanyDetail.Address1"></span>
                            &nbsp;
                            <span ng-bind="SessionData.CompanyDetail.Address2"></span>
                            <br ng-if="SessionData.CompanyDetail.Address2" /> &nbsp;
                            <span ng-bind="SessionData.CompanyDetail.City"></span>
                            &nbsp;
                            <span ng-bind="SessionData.CompanyDetail.State"></span>
                            &nbsp;
                            <span ng-bind="SessionData.CompanyDetail.Zip"></span>
                            &nbsp;
                            <span ng-bind="SessionData.CompanyDetail.Country"></span>
                            &nbsp;
                            <span ng-bind="SessionData.CompanyDetail.SupportPhone"></span>

                        </div>
                        <div class="col-sm-5 col-xs-12 col-md-5 col-lg-5 pull-right m-t-20">
                            <div class="pull-right">
                                <span ng-if="!ctrl.isProjected(ctrl.SelectedCommissionCheck)" class="f-s-12 f-700 text-uppercase" translate>date_</span>
                                <span ng-if="ctrl.isProjected(ctrl.SelectedCommissionCheck)" class="f-s-12 f-700 text-uppercase" translate>period_ending</span>&nbsp;
                                <span ng-bind="ctrl.SelectedCommissionCheck.DatePaid | date:SessionData.DateFormatType"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12 p-0 m-0 p-t-10">
                        <div class="col-sm-2 col-xs-2 pay-to">
                            <span translate="">pay_to_the_order_of</span>
                        </div>
                        <div class="col-sm-6 col-xs-6 payee-name">
                            <span class="f-700 f-s-16" ng-bind="ctrl.UserService.LoggedInUser.Name"></span>
                        </div>
                        <div class="col-sm-4 col-xs-4 p-t-5">
                            <div class="pull-right f-700">
                                <span class="amount m-l-0" ng-bind="ctrl.SelectedCommissionCheck.AmountPaid | currency:'$':2"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12 p-t-10 p-b-20">
                        <div class="amount-word p-b-5">
                            <span class="f-s-12 text-uppercase" ng-bind="ctrl.SelectedCommissionCheck.AmountPaidInWords | TranslatePayHistoryWord"></span>
                            <span class="f-s-12 pull-right text-uppercase" translate="dollars_"></span>
                        </div>
                    </div>
                    <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12 p-0 m-0 p-t-20 p-b-10">
                        <div class="col-sm-2 col-xs-2 p-t-10" ng-if="!ctrl.isProjected(ctrl.SelectedCommissionCheck)">
                            <span translate="">memo_</span>
                        </div>
                        <div class="col-sm-4 col-xs-4 memo-content" ng-if="!ctrl.isProjected(ctrl.SelectedCommissionCheck)">
                            <span>
                                <span class="f-s-12" translate="">paid_via</span>&nbsp;
                                <span class="f-s-12" ng-if="ctrl.SelectedCommissionCheck.MerchantName != 'Check'" ng-bind="ctrl.SelectedCommissionCheck.MerchantName"></span>
                                <span class="f-s-12" ng-if="ctrl.SelectedCommissionCheck.MerchantName == 'Check'" ng-bind="ctrl.SelectedCommissionCheck.MerchantName + ' '+ ctrl.CommissionCheckDetailsData.CheckNumber"></span>
                            </span>
                        </div>
                        <div class="col-sm-4 col-xs-3 pull-right memo-content">
                            <span class="f-s-14 pull-right" translate>sample_check</span>
                        </div>
                    </div>
                </div>

                <div ng-repeat="(key,value) in ctrl.CommissionCheckDetailsData.Details | orderBy : '-SortOrder' | groupBy:'PeriodInfo.Type'">

                    <div class="card clearfix" ng-if="(key==='Adjustment')">
                        <div class="card-header ch-alt no-pad-header" style="background-color: #efefef;">
                            <div>
                                <div class="lv-title ng-binding">
                                    <div class="row">
                                        <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12 comm-header f-500 text-uppercase" translate>
                                            payhistory_adjustments_title
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <table class="table table-vmiddle" id="bonusdetailtable_Adjustment" style="overflow:hidden!important">
                                <thead>
                                    <tr>
                                        <th class="f-500" style="background-color:hsl(0, 0%, 100%) !important;" ng-repeat="adjustmentFilterBonus in (GetCommissionReportSettingsResponse.Node | filter: {BonusName: 'Adjustment',CommissionType:'1'})[0].Columns"
                                            ng-bind="adjustmentFilterBonus.DisplayName | translate" translate></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="bgm-white" ng-repeat="(key,value) in value | orderBy:SortColumnName">
                                        <td ng-repeat="adjustmentFilterBonus in (GetCommissionReportSettingsResponse.Node | filter: {BonusName: 'Adjustment',CommissionType:'1'})[0].Columns" translate>
                                            <div ng-if="(adjustmentFilterBonus.Name==='AmountPaid' || adjustmentFilterBonus.Name==='AmountEarned' || adjustmentFilterBonus.Name==='Fees' || adjustmentFilterBonus.Name ==='Holding')">
                                                <span ng-bind="value[adjustmentFilterBonus.Name] | currency:'$':2"></span>
                                            </div>
                                            <span ng-bind="(value[adjustmentFilterBonus.Name] | translate)" translate ng-if="(adjustmentFilterBonus.Name!=='AmountPaid' && adjustmentFilterBonus.Name!=='AmountEarned' && adjustmentFilterBonus.Name!=='Fees' && adjustmentFilterBonus.Name !=='Holding')">
                                            </span>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-12 col-sm-12 col-xs-12 b-b p-t-10 p-b-10 p-l-0 p-r-0 b-t">
                            <h5 class="col-md-12 col-sm-12 col-xs-12 col-lg-12  f-s-16 f-500 total-color text-right ">
                                <span translate="{{key}}_payhistory_subtotal" translate-default="{{key=='null'?'':key}} Subtotal:"></span>
                                <span ng-bind="AdjustmentAmountEarned | currency:'$':2"></span>
                            </h5>
                        </div>
                    </div>
                    <div ng-if="(key!=='Adjustment')">
                        <div id="payHistoryCommissionMain{{key}}_{{periodValue.PeriodInfo.PeriodId}}" loader ng-repeat="periodValue in value" class="card clearfix">
                            <div class="card-header ch-alt no-pad-header" style="background-color: #efefef;">
                                <div>
                                    <div class="lv-title ng-binding">
                                        <div class="row">
                                            <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12 comm-header f-500 text-uppercase">
                                                <div class="col-sm-5 col-xs-5 col-md-5 col-lg-5 p-0" ng-if="!ctrl.isProjected(ctrl.SelectedCommissionCheck)">
                                                    <span translate="{{key}}_payhistory_commission" translate-default="{{key=='null'?'':key}}"></span>
                                                </div>
                                                <div class="col-sm-5 col-xs-5 col-md-5 col-lg-5 p-0 projected-text" ng-if="ctrl.isProjected(ctrl.SelectedCommissionCheck)">
                                                    <span translate>weekly_commissions_projection</span>
                                                </div>
                                                <div class="col-sm-7 col-xs-7 col-md-5 col-lg-7 p-0" ng-bind="((periodValue.PeriodInfo.BeginDate | date:SessionData.DateFormatType) +' -  ' + (periodValue.PeriodInfo.EndDate | date:SessionData.DateFormatType))"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card-body p-0">
                                <div id="accordion" ng-show="ctrl.ShowSales" class="accordion">
                                    <div class="pos-r" ng-repeat="parent in CommissionBonusName[key+periodValue.PeriodInfo.PeriodId].Bonuses | orderBy:'BonusSortOrder'">
                                        <div id="T_{{Bonuse.BonusId}}{{periodValue.PeriodInfo.PeriodId}}" class="col-md-12 col-sm-12 col-xs-12 p-l-0 p-r-0 b-b panel m-b-0" ng-repeat="Bonuse in GetCommissionReportSettingsResponse.Node"
                                             ng-if="parent.BonusId==Bonuse.BonusId" Bonuse="{{Bonuse}}">
                                            <span class="col-md-9 col-sm-9 col-xs-9 accordion-toggle m-0 p-r-0 m-t-10 m-b-10 cursor-pointer" data-toggle="collapse" data-parent="#accordion"
                                                  ng-click="Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId]=!Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId];(Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId]?clearpreviousData(Bonuse.BonusId,Accord[Bonuse.BonusId+periodValue.PeriodInfo.PeriodId],parent.DetailCount,parent.BonusDescription,key,parent.PeriodId):Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId]=false)"
                                                  data-target="#A{{Bonuse.BonusId}}{{periodValue.PeriodInfo.PeriodId}}">
                                                <a class="c-color1 f-500" ng-bind="Bonuse.DisplayName | translate" translate></a>
                                                <span class="zmdi f-s-18 m-l-5 c-color1" ng-class="Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId] ? 'zmdi-chevron-up' : 'zmdi-chevron-down'"></span>
                                            </span>

                                            <span class="col-md-3 col-sm-3 col-xs-3 text-right accordion-toggle m-0 m-t-10 m-b-10 cursor-pointer f-500" data-toggle="collapse"
                                                  data-parent="#accordion" data-target="#A{{Bonuse.BonusId}}{{periodValue.PeriodInfo.PeriodId}}"
                                                  ng-click="Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId]=!Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId];(Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId]?clearpreviousData(Bonuse.BonusId,Accord[Bonuse.BonusId+periodValue.PeriodInfo.PeriodId],parent.DetailCount,parent.BonusDescription,key,parent.PeriodId):Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId]=false)"
                                                  ng-model="Accord[Bonuse.BonusId+periodValue.PeriodInfo.PeriodId]">
                                                <span ng-bind="parent.Amount?parent.Amount:'0' | currency:'$':2"></span>
                                            </span>
                                            <div class="col-md-12 col-sm-12 col-xs-12 b-b p-l-0 p-r-0 b-t  table-responsive collapse" id="A{{Bonuse.BonusId}}{{periodValue.PeriodInfo.PeriodId}}" ng-class="Accord[Bonuse.BonusId+periodValue.PeriodInfo.PeriodId]?'':'collapse'"
                                                 style="overflow-y:scroll;max-height:300px;" when-scroll-element="ctrl.FnCommissionBonuseDetails(Bonuse.BonusId,Accord[Bonuse.BonusId+periodValue.PeriodInfo.PeriodId],parent.DetailCount,parent.BonusDescription,key,parent.PeriodId);"
                                                 scroll-bottom-on="status.loaded">
                                                <table class="table table-vmiddle" id="bonusdetailtable_{{Bonuse.BonusId}}" ng-if="(GetCommissionBonusDetailData | filter: {BonusId: (parent.BonusFilter || Bonuse.BonusId)}).length>0 && Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId]"
                                                       style="overflow:hidden!important">
                                                    <div class="col-md-9 col-sm-9 col-xs-9 accordion-toggle m-0 p-r-0 m-t-10 m-b-10 c-blue f-s-13" ng-if="((GetCommissionBonusDetailData | filter: {BonusId: (parent.BonusFilter || Bonuse.BonusId)}).length==0) && Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId] && Accord[Bonuse.BonusId+periodValue.PeriodInfo.PeriodId] && !ShowLoader['commision']"
                                                         translate>payhistory_no_record</div>

                                                    <thead>
                                                        <tr>
                                                            <th class="cursor-pointer shadow text-center bgm-color-fix" ng-repeat="item in Bonuse.Columns | orderBy:'SequenceNumber'">
                                                                <div class="m-0" ng-click="SortBy(item.FieldId,Bonuse.BonusId, parent.BonusDescription,key,parent.PeriodId)" style="white-space:nowrap">
                                                                    <div>
                                                                        <span translate ng-bind="item.DisplayName | translate" translate></span>
                                                                        <i class="zmdi zmdi-long-arrow-down zmdi-hc-fw c-darkgray" ng-if="!reverse && SortColumnId === item.FieldId.toString().trim()"></i>
                                                                        <i class="zmdi zmdi-long-arrow-up zmdi-hc-fw c-darkgray" ng-if="reverse && SortColumnId === item.FieldId.toString().trim()"></i>
                                                                    </div>
                                                                </div>

                                                            </th>
                                                        </tr>

                                                    </thead>
                                                    <tbody>

                                                        <tr ng-repeat="BonusDetail in GetCommissionBonusDetailData | orderBy:predicate['+Bonuse.BonusId+']:reverse[Bonuse.BonusId] | filter: {BonusId: (parent.BonusFilter || Bonuse.BonusId)}">
                                                            <td ng-repeat="item in Bonuse.Columns | orderBy:'SequenceNumber'" class="text-center bgm-color-fix">
                                                                <div ng-bind="Addcolumnsign(BonusDetail[item.Name],item.FieldId) | translate" ng-if="item.Name!=='FromCustomerName' && item.Name!=='FromCustomerId' && item.Name!=='OrderId'" translate></div>
                                                                <div class="cursor-pointer" ng-click="ctrl.ShowInvoiceDetail(BonusDetail[item.Name],BonusDetail['CustomerId'], key, parent.PeriodId);" ng-bind="BonusDetail[item.Name] | translate"
                                                                     ng-if="item.Name==='OrderId'" translate></div>
                                                                <a class="c-color1" ng-click="ctrl.GoToDashboard(BonusDetail['FromCustomerId']);" ng-bind="BonusDetail[item.Name] | translate"
                                                                   ng-if="(item.Name==='FromCustomerName' || item.Name==='FromCustomerId')"
                                                                   translate></a>
                                                            </td>
                                                        </tr>

                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="col-md-12 col-sm-12 col-xs-12 b-b p-t-10 p-b-10 p-l-0 p-r-0 b-t">
                                <h5 class="col-md-12 col-sm-12 col-xs-12 col-lg-12  f-s-16 f-500 total-color text-right ">
                                    <span translate="{{key}}_payhistory_subtotal" translate-default="{{key=='null'?'':key}} Subtotal:"></span>
                                    <span class="p-r-0 text-right p-l-30">
                                        <span ng-bind="periodValue.AmountEarned  | currency:'$':2"></span>
                                    </span>
                                </h5>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12 col-sm-12 col-xs-12 p-t-10 p-b-10 p-l-0 p-r-0">
                    <div class="pull-right p-r-15 f-s-24 f-500">
                        <span translate>payhistory_net_total</span>
                        <span ng-bind="ctrl.SelectedCommissionCheck.AmountPaid  | currency:'$':2"></span>
                    </div>
                </div>
            </div>


            <div class="card clearfix" ng-show="ctrl.ShowInvoice">
                <div class="card-header ch-alt">
                    <div>
                        <div class="lv-title ng-binding">
                            <div class="row">
                                <div class="col-sm-12 col-xs-12">
                                    <div class="col-sm-1 col-xs-1">
                                        <i class="zmdi zmdi-close cursor-pointer f-s-20" ng-click="ctrl.ShowSalesDetail();"></i>
                                    </div>
                                    <div class="col-sm-11 col-xs-11">
                                        <h2 translate>payhistory_order_break</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="m-t-20">
                        <invoice></invoice>
                    </div>
                </div>
            </div>
        </div>

    </div>
<!-- Account Balance section-->
<div class="p-page" ng-class="{ 'p-page--large m-secondary-sidebar account-balance-detail-fw' : !SessionData.AccountBalanceHeader}" ng-show="ctrl.ShowAccountBalanceDetails">
<div>
    <div class="row check-section" ng-class="{'m-t-10' : SessionData.AccountBalanceHeader }" style="background-color: #FFA5A5; border: none; padding: 20px;">
        <span translate="account_balance_disclaimer" translate-values="{ paymentAttemptFee: ctrl.AccountBalanceDetails.Data.PaymentAttemptFee, minReqBalance: ctrl.AccountBalanceDetails.Data.MinimumRequiredBalance }"></span>
    </div>
    <div class="card clearfix">
        <div class="card-header ch-alt text-uppercase account-balance-header">
            <div class="col-sm-5 col-xs-5 col-md-5 col-lg-5 p-0">
                <span translate>account_balance</span>
            </div>
            <div class="col-sm-5 col-xs-5 col-md-5 col-lg-5 p-0">
                <span translate>{{ctrl.AccountBalance | currency:'$':2}}</span>
            </div>
        </div>
        <div>
            <table class="table table-vmiddle" style="overflow:hidden!important">
                <thead>
                <tr>
                    <th class="f-500" style="background-color:hsl(0, 0%, 100%) !important;" translate>note</th>
                    <th class="f-500" style="background-color:hsl(0, 0%, 100%) !important;" translate>status</th>
                    <th class="f-500" style="background-color:hsl(0, 0%, 100%) !important;" translate>total</th>
                </tr>
                </thead>
                <tbody>
                <tr class="bgm-white" ng-repeat="item in ctrl.AccountBalanceDetails.Data.BalanceDetails">
                    <td>{{item.Description}}</td>
                    <td>{{item.Status}}</td>
                    <td>{{item.Total | currency:'$':2}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
</div>

<!-- /*****************************************Mobile View Start HERE *****************************************/ -->
    <div ng-if="SessionData.MobileScreen" id="PayHistoryLoad" loader>
        <headerpage id="header" class="bgm-color1"></headerpage>

        <div class="card-header bgm-color1 fixedheader  fixedheader_mobile p-b-0 p-l-0" ng-if="SessionData.ItemDetailsHeader">
            <div class="row">
                <h1>
                    <i class="zmdi zmdi-arrow-left zmdi-hc-fw f-s-22 pull-left m-l-20 iconsize" style="color:hsl(0, 0%, 100%);height:50px" ng-click="ctrl.FShowCommissionList();"></i>
                </h1>
                <h1 class="header__title p-l-20-p" translate>pay_summary</h1>

            </div>
        </div>
        <div class="card-header bgm-color1 fixedheader  fixedheader_mobile p-b-0 p-l-0" ng-if="SessionData.AccountBalanceHeader">
            <div class="row">
                <h1>
                    <i class="zmdi zmdi-arrow-left zmdi-hc-fw f-s-22 pull-left m-l-20 iconsize" style="color:hsl(0, 0%, 100%);height:50px" ng-click="ctrl.FShowCommissionList();"></i>
                </h1>
                <h1 class="header__title p-l-20-p" translate>account_balance</h1>

            </div>
        </div>
        <!-- Invoice Section for Mobile -->
        <div class="card-header bgm-color1 fixedheader fixedheader_mobile" ng-show="ctrl.ShowInvoice">
            <div class="row">
                <a>
                    <i class="zmdi zmdi-close zmdi-hc-fw font-large pull-left m-l-20 iconsize" style="color:hsl(0, 0%, 100%);height:10px" ng-click="ctrl.backToHome();"></i>
                </a>
                <span class="c-white p-l-15 f-s-14" ng-bind="'Order # '+GetOrder.OrderID"></span>
                <br />
                <br />
                <span class="c-white p-l-15 f-s-16 p-l-25" ng-bind="GetOrder.FirstName+' '+GetOrder.LastName"></span>
                <br />

            </div>
        </div>
        <div class="col-sm-12 col-xs-12 p-l-0 p-r-0 " ng-show="ctrl.ShowInvoice">
            <div class="card clearfix">

                <div class="card-body p-0">
                    <div class="m-t-20">
                        <invoice></invoice>
                    </div>
                </div>
            </div>
        </div>
        <!-- Check Section for Mobile -->
        <div ng-show="!ctrl.ShowInvoice && !SessionData.AccountBalanceHeader">
            <div ng-if="ctrl.CommissionChecks.length > 0 && !ctrl.ShowPeriodMobile" class="row check-section-mobile p-5">
                <div class="col-sm-12 col-xs-12 p-0 m-0">
                    <div class="col-sm-4 col-xs-4 pull-left">
                        <img class="comp-logo" ng-src="{{SessionData.CompanyDetail.LogoUrl}}">
                    </div>
                    <div class="col-sm-8 col-xs-8 pull-right m-t-10">
                        <div class="pull-right">
                            <span class="f-s-12 f-700 text-uppercase" translate>date_</span>&nbsp;
                            <span ng-bind="ctrl.SelectedCommissionCheck.DatePaid | date:SessionData.DateFormatType"></span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12 p-0 m-0 p-t-10">
                    <div class="col-sm-4 col-xs-4 pay-to">
                        <span translate="">pay_to_the_order_of</span>
                    </div>
                    <div class="col-sm-8 col-xs-8 payee-name">
                        <span class="f-700 f-s-16" ng-bind="ctrl.UserService.LoggedInUser.Name"></span>
                    </div>
                </div>
                <div class="col-sm-12 col-xs-12 p-0 m-0 p-t-10">
                    <div class="col-sm-6 col-xs-6 p-t-5 p-r-0 pull-right">
                        <div class="pull-right f-700">
                            <span class="amount m-l-0" ng-bind="ctrl.SelectedCommissionCheck.AmountPaid | currency:'$':2"></span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-xs-12 p-0 m-0 p-t-20 p-b-10">
                    <div class="col-sm-3 col-xs-3 p-t-10">
                        <span translate="">memo_</span>
                    </div>
                    <div class="col-sm-9 col-xs-9 memo-content">
                        <span>
                            <span class="f-s-12" translate="paid_via"></span>&nbsp;
                            <span class="f-s-12" ng-if="ctrl.SelectedCommissionCheck.MerchantName != 'Check'" ng-bind="ctrl.SelectedCommissionCheck.MerchantName"></span>
                            <span class="f-s-12" ng-if="ctrl.SelectedCommissionCheck.MerchantName == 'Check'" ng-bind="ctrl.SelectedCommissionCheck.MerchantName + ' '+ ctrl.CommissionCheckDetailsData.CheckNumber"></span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-xs-12  p-l-0 p-r-0" id="CommissionsPageMobile">
                <div class="col-sm-12 col-xs-12 p-l-0 p-r-0" ng-if="ctrl.ShowPeriodMobile">
                    <div class="account-balance" ng-class="{'b-blue': ctrl.ShowAccountBalanceDetails === true}" ng-if="ctrl.ShowAccountBalance" ng-click="ctrl.GetAccountBalanceMobile()">
                        <span translate>account_balance</span>: <span>{{ctrl.AccountBalance | currency:'$':2}}</span>
                    </div>
                    <div class="custom-dp custom-filter" ng-if="ctrl.CommissionChecks.length > 0">
                        <div class="col-sm-12 col-md-12 col-xs-12 col-lg-12 p-0 custom-dp-header" ng-class="ctrl.IsShowOptions?'':'bgm-color3'" ng-click="ctrl.IsShowOptions = !ctrl.IsShowOptions">
                            <div class="col-sm-10 col-md-10 col-xs-10 col-lg-10 p-0" ng-if="!ctrl.IsShowOptions">
                                <span class="dp-head f-s-16 pull-left">
                                    <span translate>payhistory_show</span>
                                    <span ng-if="ctrl.SelectedFilters == 'All'" translate>all_</span>
                                    <span ng-if="ctrl.SelectedFilters != 'All'" translate>{{ctrl.SelectedFilters}}</span>
                                </span>
                            </div>

                            <div class="col-sm-2 col-md-2 col-xs-2 col-lg-2 m-t-15 dp-icon" ng-if="!ctrl.IsShowOptions">
                                <i class="zmdi zmdi-caret-down zmdi-hc-fw pull-right"></i>
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-12 col-xs-12 col-lg-12 p-0 custom-dp-body-mobile" ng-if="ctrl.IsShowOptions">

                            <div class="p-t-20 b-b p-b-20 p-l-10 p-r-10">
                                <span class="f-s-14 " translate>show_payments_that_include</span>
                            </div>

                            <ul class="p-l-0">
                                <li ng-repeat="PaymentTypeFilter in ctrl.PaymentTypeFilters">
                                    <label class="checkbox checkbox-inline" for="{{PaymentTypeFilter.Id}}">
                                        <input type="checkbox" id="{{PaymentTypeFilter.Id}}" ng-click="ctrl.OnChangeFilter(PaymentTypeFilter.Id, PaymentTypeFilter.IsChecked)"
                                               ng-model="PaymentTypeFilter.IsChecked">
                                        <span class="input-helper"></span>
                                        <span class="f-500 ng-scope" translate="{{PaymentTypeFilter.Name}}" translate-default="{{PaymentTypeFilter.Name}}"></span>
                                    </label>
                                </li>
                            </ul>
                            <hr class="m-b-0">
                            <div class="col-sm-12 col-md-12 col-xs-12 col-lg-12 p-5 dp-bottom">
                                <a class="dp-done c-gray pull-right p-5" ng-click="ctrl.filterChecks();" translate="">done</a>
                            </div>
                        </div>
                    </div>

                    <br>
                    <div class="bgm-color3" ng-if="ctrl.CommissionChecks.length > 0" id="CommissionPeriodTab">
                        <div class="card mwidth period-list-mobile" style="max-height: 78vh; overflow-y: scroll;" when-scroll-element="ctrl.GetRecordsOnScroll()"
                             scroll-bottom-on="status.loaded">
                            <div class="listview" id="CommissionPeriodVolume">
                                <div class="lv-body" ng-repeat="commissioncheck in ctrl.CommissionChecks track by $index">
                                    <div class="lv-item p-l-10 b-b">
                                        <div class="media">
                                            <div class="media-body" ng-click="ctrl.FGetCommissionDetailClickMobile(commissioncheck)">
                                                <div class="lv-title ng-binding col-sm-8 col-xs-8  p-l-0">
                                                    <a id="1" class="CommunityfontStyle" ng-bind="commissioncheck.DatePaid | date:SessionData.DateFormatType" translate></a>
                                                </div>
                                                <div class="Dateswitch col-sm-4 col-xs-4">
                                                    <span ng-bind="commissioncheck.AmountPaid | currency:'$':2"></span>
                                                </div>
                                                <br>

                                                <span ng-repeat="paymentType in commissioncheck.PaymentTypes track by $index" class="badge m-t-5 m-r-5" translate>{{paymentType | translate}}</span>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="lv-body" ng-if="ctrl.CommissionChecks.length===0 || !ctrl.IsShowView">
                        <div class="empty_state common_placeholder" translate>payhistory_yet</div>
                    </div>
                </div>

                <div class="col-sm-12 col-xs-12  p-l-0 p-r-0 " id="commision" ng-if="ctrl.ShowPeriodDetailMobile" loader>
                    <div class="clearfix col-lg-12 col-sm-12 col-md-12 col-xs-12 p-l-0 p-r-0 m-t-10" ng-repeat="(key,value) in ctrl.CommissionCheckDetailsData.Details | orderBy : '-SortOrder' | groupBy:'PeriodInfo.Type'">
                        <div class="card clearfix" ng-if="(key==='Adjustment')">
                            <div class="card-header ch-alt no-pad-header" style="background-color: #efefef;">
                                <div>
                                    <div class="lv-title ng-binding">
                                        <div class="row">
                                            <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12 comm-header f-500 text-uppercase" translate>
                                                payhistory_adjustments_title
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <table class="table table-vmiddle" id="bonusdetailtable_Adjustment" style="overflow:hidden!important">
                                    <thead>
                                        <tr>
                                            <th class="f-500" style="background-color:hsl(0, 0%, 100%) !important;" ng-repeat="adjustmentFilterBonus in (GetCommissionReportSettingsResponse.Node | filter: {BonusName: 'Adjustment',CommissionType:'1'})[0].Columns"
                                                ng-bind="adjustmentFilterBonus.DisplayName | translate" translate></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="bgm-white" ng-repeat="(key,value) in value | orderBy:SortColumnName">
                                            <td ng-repeat="adjustmentFilterBonus in (GetCommissionReportSettingsResponse.Node | filter: {BonusName: 'Adjustment',CommissionType:'1'})[0].Columns">
                                                <span ng-if="(adjustmentFilterBonus.Name==='AmountPaid' || adjustmentFilterBonus.Name==='AmountEarned' ||   adjustmentFilterBonus.Name==='Fees' || adjustmentFilterBonus.Name ==='Holding')">
                                                    <span ng-bind="value[adjustmentFilterBonus.Name] | currency:'$':2"></span>
                                                </span>
                                                <span ng-bind="(value[adjustmentFilterBonus.Name] | translate)" translate ng-if="(adjustmentFilterBonus.Name!=='AmountPaid' && adjustmentFilterBonus.Name!=='AmountEarned' && adjustmentFilterBonus.Name!=='Fees' && adjustmentFilterBonus.Name !=='Holding')">
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-md-12 col-sm-12 col-xs-12 b-b p-t-10 p-b-10 p-l-0 p-r-0 b-t">
                                <h5 class="col-md-12 col-sm-12 col-xs-12 col-lg-12  f-s-16 f-500 total-color text-right ">
                                    <span translate="{{key}}_payhistory_subtotal" translate-default="{{key=='null'?'':key}} Subtotal:"></span>
                                    <span class="p-r-0 text-right p-l-30">
                                        <span ng-bind="AdjustmentAmountEarned | currency:'$':2"></span>
                                    </span>
                                </h5>
                            </div>
                        </div>

                        <div ng-if="(key!=='Adjustment')">
                            <div id="payHistoryCommissionMain{{key}}_{{periodValue.PeriodInfo.PeriodId}}" loader ng-repeat="periodValue in value" class="card clearfix">
                                <div class="card-header ch-alt no-pad-header" style="background-color: #efefef;">
                                    <div>
                                        <div class="lv-title ng-binding">
                                            <div class="row">
                                                <div class="col-sm-12 col-xs-12 col-md-12 col-lg-12 comm-header f-500 text-uppercase">
                                                    <div class="col-sm-5 col-xs-5 col-md-5 col-lg-5 p-0">
                                                        <span translate="{{key}}_payhistory_commission" translate-default="{{key=='null'?'':key}}"></span>
                                                    </div>
                                                    <div class="col-sm-7 col-xs-7 col-md-5 col-lg-7 p-0" ng-bind="((periodValue.PeriodInfo.BeginDate | date:SessionData.DateFormatType) +' -  ' + (periodValue.PeriodInfo.EndDate | date:SessionData.DateFormatType))"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="card-body no-pad-header">
                                    <div id="accordion" ng-show="ctrl.ShowSales" class="accordion">
                                        <div class="pos-r" ng-repeat="parent in CommissionBonusName[key+periodValue.PeriodInfo.PeriodId].Bonuses | orderBy:'BonusSortOrder'">
                                            <div id="T_{{Bonuse.BonusId}}{{periodValue.PeriodInfo.PeriodId}}" class="col-md-12 col-sm-12 col-xs-12 p-l-0 p-r-0 b-b panel m-b-0" ng-repeat="Bonuse in GetCommissionReportSettingsResponse.Node"
                                                 ng-if="parent.BonusId==Bonuse.BonusId" Bonuse="{{Bonuse}}">
                                                <span class="col-md-9 col-sm-9 col-xs-9 accordion-toggle m-0 p-r-0 m-t-10 m-b-10 cursor-pointer" data-toggle="collapse" data-parent="#accordion"
                                                      ng-click="Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId]=!Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId];(Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId]?clearpreviousData(Bonuse.BonusId,Accord[Bonuse.BonusId+periodValue.PeriodInfo.PeriodId],parent.DetailCount,parent.BonusDescription,key,parent.PeriodId):Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId]=false)"
                                                      data-target="#A{{Bonuse.BonusId}}{{periodValue.PeriodInfo.PeriodId}}">
                                                    <a class="c-color1 f-500" ng-bind="Bonuse.DisplayName | translate" translate></a>
                                                    <span class="zmdi f-s-18 m-l-5 c-color1" ng-class="Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId] ? 'zmdi-chevron-up' : 'zmdi-chevron-down'"></span>
                                                </span>
                                                <span class="col-md-3 col-sm-3 col-xs-3 text-right accordion-toggle m-0 m-t-10 m-b-10 cursor-pointer f-500" data-toggle="collapse"
                                                      data-parent="#accordion" data-target="#A{{Bonuse.BonusId}}{{periodValue.PeriodInfo.PeriodId}}"
                                                      ng-click="Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId]=!Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId];(Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId]?clearpreviousData(Bonuse.BonusId,Accord[Bonuse.BonusId+periodValue.PeriodInfo.PeriodId],parent.DetailCount,parent.BonusDescription,key,parent.PeriodId):Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId]=false)"
                                                      ng-model="Accord[Bonuse.BonusId+periodValue.PeriodInfo.PeriodId]">
                                                    <span ng-bind="parent.Amount?parent.Amount:'0' | currency:'$':2"></span>
                                                </span>
                                                <div class="col-md-12 col-sm-12 col-xs-12 b-b p-l-0 p-r-0 b-t  table-responsive collapse" id="A{{Bonuse.BonusId}}{{periodValue.PeriodInfo.PeriodId}}" ng-class="Accord[Bonuse.BonusId+periodValue.PeriodInfo.PeriodId]?'':'collapse'"
                                                     style="overflow-y:scroll;max-height:300px;" when-scroll-element="ctrl.FnCommissionBonuseDetails(Bonuse.BonusId,Accord[Bonuse.BonusId+periodValue.PeriodInfo.PeriodId],parent.DetailCount,parent.BonusDescription,key,parent.PeriodId);"
                                                     scroll-bottom-on="status.loaded">
                                                    <table class="table table-vmiddle" id="bonusdetailtable_{{Bonuse.BonusId}}" ng-if="(GetCommissionBonusDetailData | filter: {BonusId: (parent.BonusFilter || Bonuse.BonusId)}).length>0 && Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId]"
                                                           style="overflow:hidden!important">
                                                        <div class="col-md-9 col-sm-9 col-xs-9 accordion-toggle m-0 p-r-0 m-t-10 m-b-10 c-blue f-s-13" ng-if="((GetCommissionBonusDetailData | filter: {BonusId: (parent.BonusFilter || Bonuse.BonusId)}).length==0) && Active[key+periodValue.PeriodInfo.PeriodId+Bonuse.BonusId] && Accord[Bonuse.BonusId+periodValue.PeriodInfo.PeriodId] && !ShowLoader['commision']"
                                                             translate>payhistory_no_record</div>

                                                        <thead>
                                                            <tr>
                                                                <th class="cursor-pointer shadow text-center bgm-color-fix" ng-repeat="item in Bonuse.Columns | orderBy:'SequenceNumber'">
                                                                    <div class="m-0" ng-click="SortBy(item.FieldId,Bonuse.BonusId, parent.BonusDescription,key,parent.PeriodId)" style="white-space:nowrap">
                                                                        <div>
                                                                            <span translate ng-bind="item.DisplayName | translate" translate></span>
                                                                            <i class="zmdi zmdi-long-arrow-down zmdi-hc-fw c-darkgray" ng-if="!reverse && SortColumnId === item.FieldId.toString().trim()"></i>
                                                                            <i class="zmdi zmdi-long-arrow-up zmdi-hc-fw c-darkgray" ng-if="reverse && SortColumnId === item.FieldId.toString().trim()"></i>
                                                                        </div>
                                                                    </div>

                                                                </th>
                                                            </tr>

                                                        </thead>
                                                        <tbody>

                                                            <tr ng-repeat="BonusDetail in GetCommissionBonusDetailData | orderBy:predicate['+Bonuse.BonusId+']:reverse[Bonuse.BonusId] | filter: {BonusId: (parent.BonusFilter || Bonuse.BonusId)}">
                                                                <td ng-repeat="item in Bonuse.Columns | orderBy:'SequenceNumber'" class="text-center bgm-color-fix">
                                                                    <div ng-bind="Addcolumnsign(BonusDetail[item.Name],item.FieldId) | translate" ng-if="item.Name!=='FromCustomerName' && item.Name!=='FromCustomerId' && item.Name!=='OrderId'" translate></div>
                                                                    <div class="cursor-pointer" ng-click="ctrl.ShowInvoiceDetail(BonusDetail[item.Name],BonusDetail['CustomerId'], key, parent.PeriodId);" ng-bind="BonusDetail[item.Name] | translate"
                                                                         ng-if="item.Name==='OrderId'" translate></div>
                                                                    <a class="c-color1" ng-click="ctrl.GoToDashboard(BonusDetail['FromCustomerId']);" ng-bind="BonusDetail[item.Name] | translate"
                                                                       ng-if="(item.Name==='FromCustomerName' || item.Name==='FromCustomerId')"
                                                                       translate></a>
                                                                </td>
                                                            </tr>

                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 col-sm-12 col-xs-12 b-b p-t-10 p-b-10 p-l-0 p-r-0 b-t">
                                    <h5 class="col-md-12 col-sm-12 col-xs-12 col-lg-12  f-s-16 f-500 total-color text-right ">
                                        <span translate="{{key}}_payhistory_subtotal" translate-default="{{key=='null'?'':key}} Subtotal:"></span>
                                        <span class="p-r-0 text-right p-l-30">
                                            <span ng-bind="periodValue.AmountEarned | currency:'$':2"></span>
                                        </span>

                                    </h5>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 col-sm-12 col-xs-12 p-t-10 p-b-10 p-l-0 p-r-0">
                        <div class="pull-right p-r-15 f-s-20 f-500">
                            <span translate>payhistory_net_total</span>
                            <span ng-bind="ctrl.SelectedCommissionCheck.AmountPaid | currency:'$':2"></span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
</div>
(function () {
    'use strict';
       module.filter('TranslatePayHistoryWord', [
          '$translate',
          '$sce',
          function($translate) {
              return function(text) {
                  if (text) {
                      var textWords = text.split(' ');
                      var translateString = '';
                      _.each(textWords, function(word) {
                          var translatekeyword = '';
                          var translated = '';
                          if (!Number(word)) {
                              translatekeyword = 'number2word_' + word.toLowerCase();
                          }
                          translated = $translate.instant(translatekeyword);
                          if (angular.equals(translated, translatekeyword) || translated === '') {
                              translateString += word + ' ';
                          } else {
                              translateString += translated + ' ';
                          }
                      });
                      return translateString;
                  }
              };
          }
      ])
  
      .controller('CustomPayHistoryController', CustomPayHistoryController);
    CustomPayHistoryController.$inject = [
          '$scope',        
          '$RestService',
          '$filter',
          '$timeout',
          '$translate',        
          '$q',
          'featureToggleService',
          'UserService',
         'Notification',
         'GetPageSetting'
      ];
          function CustomPayHistoryController(
              $scope,
              $RestService,
              $filter,
              $timeout,
              $translate,
              $q,
              featureToggleService,
              UserService,
              Notification,
              GetPageSetting
          ) {
              var vm = this;
              vm.UserService = UserService;
              vm.SelectedFilters = 'All';
              vm.IsShowView = true;
              $scope.SessionData.PageName = $translate.instant('pay_history');
              $scope.getPageNameTranslate('pay_history');
              vm.ShowPeriodMobile = true;
              vm.ShowPeriodDetailMobile = false;
              vm.CurrentSelectedBonus = {};
              vm.ShowAccountBalance = featureToggleService.isOn('ShowAccountBalance');
              vm.ShowAccountBalanceDetails = false;
              vm.AccountBalanceDetails = null;
              vm.AccountBalance = 0;
              vm.IsLoading = true;
              $scope.ShowLoader = {};
              vm.PaymentTypeFilters = [];
              var FGetCompanyBonusesAndFieldsdefer = $q.defer();
  
              $scope.Accord = {};
              $scope.Active = {};
  
              function convertHex(hex, opacity) {
                  hex = hex.replace('#', '');
                  var r = parseInt(hex.substring(0, 2), 16);
                  var g = parseInt(hex.substring(2, 4), 16);
                  var b = parseInt(hex.substring(4, 6), 16);
  
                  var result = 'rgba(' + r + ',' + g + ',' + b + ',' + opacity / 100 + ')';
                  return result;
              }
  
              /*************************************Lazy Loading **********************************/
  
              $scope.GetCommissionBonusDetailDataPaging = $scope.GetCommissionBonusDetailDataPaging || {};
              $scope.GetCommissionBonusDetailDataPaging.PageNo = 0;
              $scope.GetCommissionBonusDetailDataPaging.PageSize = 10;
              /*************************************Lazy Loading **********************************/
  
              $scope.PageNo = 1;
              $scope.PageSize = 20;
              $scope.TotalRecords = 0;
              vm.CommissionChecks = [];
  
              vm.GetRecordsOnScroll = function() {
                  if (!vm.IsLoading) {
                      $scope.getCommissionChecks();
                  }
              };
              var count = 0;
              vm.PaymentTypeFilters = [{ Name: 'all_payment', Id: 'All', IsChecked: true }];
              $scope.getCommissionChecks = function() {
                  if (
                      $scope.PageNo.toString() === '1' ||
                      (parseInt($scope.PageNo, 10) - 1) * parseInt($scope.PageSize, 10) < parseInt($scope.TotalRecords, 10)
                  ) {
                      vm.IsLoading = true;
                      $scope.ShowLoader['PeriodList'] = true;
                      var request = {
                          PaymentTypeFilter: vm.SelectedFilters || 'All',
                          PageSize: $scope.PageSize,
                          PageNo: $scope.PageNo
                      };
                      $RestService
                          .GetCommissionChecks(request)
                          .then(function(result) {
                              vm.IsLoading = false;
                              $scope.ShowLoader['PeriodList'] = false;
                              result = result.data;
                              $scope.TotalRecords = result.Data.TotalChecks;
                              $scope.ChecksData = result.Data;
                              if (result.Status === 0) {
                                  if (count === 0) {
                                      count = +1;
                                      _.each($scope.ChecksData.PaymentFilterTypes, function(item) {
                                          vm.PaymentTypeFilters.push({ Name: item + '_payhistory_commission', Id: item, IsChecked: true });
                                      });
                                  }
                                  if ($scope.ChecksData.Checks.length > 0) {
                                      _.each($scope.ChecksData.Checks, function(item) {
                                          vm.CommissionChecks.push(item);
                                      });
                                      if ($scope.PageNo.toString() === '1') {
                                          $scope.getCommissionCheckDetails(vm.CommissionChecks[0]);
                                      }
                                  } else {
                                      vm.CommissionChecks = [];
                                      vm.IsShowView = false;
                                  }
                              } else {
                                  vm.CommissionChecks = [];
                                  vm.IsShowView = false;
                              }
                              $scope.PageNo = $scope.PageNo + 1;
                          })
                          .finally(function() {
                              $scope.ShowLoader['PeriodList'] = false;
                          });
                      if (vm.ShowAccountBalance) {
                          $RestService.GetCommissionBalance().then(function(response) {
                              vm.AccountBalance = response.data.Data;
                          });
                      }
                  }
              };
  
              vm.isProjected = function(check) {
                  return check.PaymentTypes.includes('Projected');
              };
  
              $scope.getCommissionCheckDetails = function(CommissionCheck) {
                  $scope.ShowLoader['PayHistoryLoad'] = true;
                  var request = { TransactionNumber: CommissionCheck.TransactionNumber };
                  vm.SelectedCommissionCheck = CommissionCheck;
                  $RestService
                      .GetCommissionCheckDetails(request)
                      .then(function(result) {
                          vm.ShowAccountBalanceDetails = false;
                          result = result.data;
                          $scope.AdjustmentAmountEarned = 0;
                          if (result && result.Status === 0) {
                              vm.CommissionCheckDetailsData = result.Data;
                              $scope.CommissionBonusName = {};
                              if (result.Data && result.Data.Details && result.Data.Details.length > 0) {
                                  _.each(result.Data.Details, function(data) {
                                      if (data.PeriodInfo.Type) {
                                          $scope.Active[data.PeriodInfo.Type + data.PeriodInfo.PeriodId] = false;
                                          FGetCommissionDetail(data);
                                          data.SortOrder = 0;
                                      } else {
                                          data.PeriodInfo.Type = 'Adjustment';
                                          data.SortOrder = -1;
                                          $scope.AdjustmentAmountEarned = $scope.AdjustmentAmountEarned + data.AmountPaid;
                                      }
                                  });
                              }
                              vm.CommissionCheckDetailsData = result.Data;
                          }
                          $scope.ShowLoader['PayHistoryLoad'] = false;
                      })
                      .finally(function() {
                          $scope.ShowLoader['PayHistoryLoad'] = false;
                      });
              };
  
              vm.getAccountBalanceDetails = function() {
                  if (vm.AccountBalanceDetails === null) {
                      $RestService.GetCommissionBalanceDetails().then(function(response) {
                          vm.AccountBalanceDetails = response.data;
                          vm.ShowAccountBalanceDetails = true;
                          vm.ShowInvoice = false;
                      });
                  } else {
                      vm.ShowAccountBalanceDetails = true;
                      vm.ShowInvoice = false;
                  }
              };
  
              $scope.Amount = {};
  
              $(function($) {
                  $(document).on('click', '#CommissionsPayHistory .lv-item', function() {
                      $('#CommissionsPayHistory .lv-item').removeClass('b-blue');
                      $('#CommissionsPayHistory .lv-item')
                          .find('a')
                          .removeClass('c-color4');
                      $('#CommissionsPayHistory .lv-item')
                          .find('.amount')
                          .removeClass('c-color4');
                      $(this).addClass('b-blue');
                      $(this)
                          .find('a')
                          .addClass('c-color4');
                      $(this)
                          .find('.amount')
                          .addClass('c-color4');
                  });
              });
              vm.ShowInvoiceDetail = ShowInvoiceDetail;
  
              function ShowInvoiceDetail(OrderID, CustomerID, periodTypeID, periodID) {
                  $scope.ShowLoader['payHistoryCommissionMain' + periodTypeID + '_' + periodID.toString()] = true;
                  var GetOrdersRequest = { CustomerID: CustomerID, OrderID: OrderID };
                  $RestService
                      .GetOrderDetails(GetOrdersRequest)
                      .then(function(result) {
                          result = result.data;
                          if (parseInt(result.Status, 10) === 0 && result.Order) {
                              vm.ShowSales = false;
                              vm.ShowAccountBalanceDetails = false;
                              vm.ShowInvoice = true;
                              $scope.GetOrder = result.Order[0];
                              $scope.GetOrder.TaxRate = Number($scope.GetOrder.TaxRate);
                              $scope.GetOrderDetails = result.OrderDetails;
                              $scope.currentDate = new Date().toJSON();
                              $scope.ShowLoader['payHistoryCommissionMain' + periodTypeID + '_' + periodID.toString()] = false;
                          } else {
                              Notification.error('Error', $translate.instant(result.ErrorDescription));
                              $scope.ShowLoader['payHistoryCommissionMain' + periodTypeID + '_' + periodID.toString()] = false;
                          }
                      })
                      .catch(function() {
                          $scope.ShowLoader['payHistoryCommissionMain' + periodTypeID + '_' + periodID.toString()] = false;
                      });
              }
  
              vm.ShowSalesDetail = ShowSalesDetail;
  
              function ShowSalesDetail() {
                  vm.ShowSales = true;
                  vm.ShowInvoice = false;
              }
              vm.ShowSales = true;
              vm.ShowInvoice = false;
              $scope.SaveAsPDF = function() {
                  window.print();
              };
              vm.backToHome = function() {
                  vm.ShowSales = true;
                  vm.ShowInvoice = false;
                  vm.ShowPeriodMobile = false;
                  vm.ShowPeriodDetailMobile = true;
              };
              vm.FGetCommissionDetailClickMobile = FGetCommissionDetailClickMobile;
  
              function FGetCommissionDetailClickMobile(data) {
                  vm.ShowSales = true;
                  vm.ShowPeriodMobile = false;
                  vm.ShowPeriodDetailMobile = true;
                  $scope.SessionData.ItemDetailsHeader = true;
  
                  $scope.getCommissionCheckDetails(data);
              }
  
              vm.GetAccountBalanceMobile = GetAccountBalanceMobile;
  
              function GetAccountBalanceMobile() {
                  vm.ShowInvoice = false;
                  $scope.SessionData.AccountBalanceHeader = true;
                  vm.ShowAccountBalanceDetails = true;
                  if (vm.AccountBalanceDetails === null) {
                      $RestService.GetCommissionBalanceDetails().then(function(response) {
                          vm.AccountBalanceDetails = response.data;
                      });
                  }
              }
  
              vm.FGetCommissionDetail = FGetCommissionDetail;
  
              function FGetCommissionDetail(data) {
                  if (data) {
                      var currentPeriodTypeID = _.filter($scope.SessionData.CommonData.PeriodTypes, function(period) {
                          return period.PeriodTypeDescription == data.PeriodInfo.Type;
                      });
                      var hasPeriodType =
                          currentPeriodTypeID && currentPeriodTypeID.length > 0 && currentPeriodTypeID[0].PeriodTypeID;
  
                      vm.ShowSales = true;
                      vm.ShowPeriodMobile = false;
                      vm.ShowPeriodDetailMobile = true;
                      $scope.SessionData.ItemDetailsHeader = true;
                      $scope.ShowLoader['commision'] = true;
  
                      var GetCommissionDetailRequest = {
                          PeriodId: data.PeriodInfo.PeriodId,
                          PeriodTypeId: hasPeriodType ? currentPeriodTypeID[0].PeriodTypeID || 2 : 2
                      };
  
                      $RestService
                          .GetCommissionDetail(GetCommissionDetailRequest)
                          .then(function(result) {
                              result = result.data;
  
                              if (result && result.Data && result.Data.IsBonusUpdate) {
                                  FGetCommissionReportSettings();
                                  FGetCompanyBonusesAndFields(vm.CurrentSelectedBonus.PeriodId);
                              }
  
                              $scope.selectedPeriod =
                                  $filter('translatemonth')(moment(data.StartDate).format('MMMM DD')) +
                                  '-' +
                                  $filter('translatemonth')(moment(data.EndDate).format('MMMM DD'));
  
                              $scope.CommissionBonusName[data.PeriodInfo.Type.toString() + data.PeriodInfo.PeriodId.toString()] =
                                  result.Data;
                              _.each(result.data.Bonuses, function(bonus) {
                                  $scope.Active[
                                      data.PeriodInfo.Type.toString() + data.PeriodInfo.PeriodId.toString() + bonus.BonusId.toString()
                                  ] = false;
                              });
                              $scope.ShowLoader['commision'] = false;
                          })
                          .catch(function() {
                              $scope.ShowLoader['commision'] = false;
                          });
                  }
              }
  
              //All of these FGet... Methods are in Commissions.js. This is NOT DRY...
              vm.FGetCompanyBonusesAndFields = FGetCompanyBonusesAndFields;
  
              function FGetCompanyBonusesAndFields() {
                  $RestService
                      .GetCompanyBonusesAndFields('')
                      .then(function(result) {
                          result = result.data;
                          try {
                              FGetCompanyBonusesAndFieldsdefer.resolve(true);
                              if (parseInt(result.Status, 10) === 0) {
                                  try {
                                      _.each(result.Data, function(bonus) {
                                          var accessColumn = bonus.AvailableFields.split(',');
                                          _.each(accessColumn, function(coloumn) {
                                              $scope.IsShowColumn[bonus.Name + '_' + coloumn] = true;
                                          });
                                      });
                                  } catch (ex) {
                                      console.error('ex', ex);
                                  }
                              }
                          } catch (ex) {
                              console.error(ex);
                          }
                      })
                      .catch(function() {
                          FGetCompanyBonusesAndFieldsdefer.reject(false);
                      });
              }
  
              vm.FnCommissionBonuseDetails = FnCommissionBonuseDetails;
              // In Disco We are Setting Default Record Count 10 Because in Exigo We have Record count when we fetch commission bonus name
              var recordcountDisco = 10;
              var isCommissionRequest = true;
              function FnCommissionBonuseDetails(BonusId, type, recordCount, BonusDescription, periodTypeID, periodID) {
                  var currentPeriodTypeID = _.filter($scope.SessionData.CommonData.PeriodTypes, function(period) {
                      return period.PeriodTypeDescription == periodTypeID;
                  });
                  var hasPeriodType =
                      currentPeriodTypeID && currentPeriodTypeID.length > 0 && currentPeriodTypeID[0].PeriodTypeID;
  
                  vm.CurrentSelectedBonus = {
                      PeriodTypeId: hasPeriodType ? currentPeriodTypeID[0].PeriodTypeID || 2 : 2,
                      PeriodId: periodID
                  };
                  recordCount = recordCount > 0 ? recordCount : recordcountDisco;
                  if (
                      (isCommissionRequest &&
                          ((BonusId === $scope.CurrentBonusID || !$scope.CurrentBonusID) &&
                              (parseInt($scope.GetCommissionBonusDetailDataPaging.PageNo, 10) === 0 ||
                                  parseInt($scope.GetCommissionBonusDetailDataPaging.PageNo, 10) *
                                      parseInt($scope.GetCommissionBonusDetailDataPaging.PageSize, 10) <
                                      parseInt(recordCount, 10)))) ||
                      !recordCount
                  ) {
                      isCommissionRequest = false;
                      try {
                          $scope.ShowLoader['payHistoryCommissionMain' + periodTypeID + '_' + periodID.toString()] = true;
                          var GetCommissionDetailRequest = {
                              PeriodId: vm.CurrentSelectedBonus.PeriodId,
                              PeriodTypeId: vm.CurrentSelectedBonus.PeriodTypeId,
                              BonusId: BonusId,
                              BonusDescription: BonusDescription,
                              PageNo: recordCount ? $scope.GetCommissionBonusDetailDataPaging.PageNo + 1 : 1,
                              PageSize: recordCount ? $scope.GetCommissionBonusDetailDataPaging.PageSize : 10,
                              OrderBy: $scope.SortColumnId,
                              OrderType: $scope.reverse ? 'ASC' : 'DESC'
                          };
                          $scope.PrevBonusId = BonusId;
                          $RestService
                              .CommissionBonuseDetails(GetCommissionDetailRequest)
                              .then(function(result) {
                                  result = result.data;
                                  $scope.GetCommissionBonusDetailDataPaging.PageNo =
                                      parseInt($scope.GetCommissionBonusDetailDataPaging.PageNo, 10) + 1;
                                  $scope.GetCommissionBonusDetailData = $scope.GetCommissionBonusDetailData || [];
                                  if (result.Data.BonusDetails) {
                                      recordcountDisco = result.Data.TotalRecords;
                                      var totalNumberofRecord = recordcountDisco || recordCount;
                                      var totalRecordFetch =
                                          $scope.GetCommissionBonusDetailDataPaging.PageNo *
                                          $scope.GetCommissionBonusDetailDataPaging.PageSize;
                                      $scope.allRecordfecth = totalNumberofRecord > totalRecordFetch;
                                      $scope.selectedPeriod =
                                          $filter('translatemonth')(moment(vm.CurrentSelectedBonus.StartDate).format('MMMM DD')) +
                                          '-' +
                                          $filter('translatemonth')(moment(vm.CurrentSelectedBonus.EndDate).format('MMMM DD'));
                                      // code for convert string to float for number.
                                      _.each(result.Data.BonusDetails, function(item) {
                                          for (var prop in item) {
                                              if (isNaN(parseFloat(item[prop]))) {
                                                  item[prop] = item[prop];
                                              } else if (item[prop].toString().match(/[a-zA-Z]/i)) {
                                                  item[prop] = item[prop];
                                              } else {
                                                  item[prop] = parseFloat(item[prop]);
                                              }
                                          }
                                          $scope.GetCommissionBonusDetailData.push(item);
                                      });
  
                                      $scope.Total = 0;
                                      _.each($scope.GetCommissionBonusDetailData, function(item) {
                                          $scope.Total += item.CommissionAmount;
                                      });
                                      _.each($scope.CommissionBonusName[periodTypeID.toString() + periodID.toString()].Bonuses, function(
                                          data
                                      ) {
                                          try {
                                              if (data.BonusId == BonusId) {
                                                  $scope.Accord[data.BonusId + periodID.toString()] = true;
                                                  $('#T' + '_' + data.BonusId.toString() + periodID.toString())
                                                      .find('span')
                                                      .removeClass('collapsed');
                                              } else {
                                                  $('#A' + data.BonusId + periodID.toString()).removeClass('in');
                                                  $scope.Accord[data.BonusId + periodID.toString()] = false;
                                                  data.isActive = false;
                                              }
                                              setTimeout(function() {
                                                  $('#bonusdetailtable_' + data.BonusId).tableHeadFixer();
                                                  $('.table > tbody > tr > td.bgm-color-fix').css(
                                                      'background-color',
                                                      convertHex($scope.ColorlocalStorage.Color.color1, 10)
                                                  );
                                              }, 100);
  
                                              _.each($scope.Accord, function(key, value) {
                                                  if (value == BonusId.toString() + periodID.toString()) {
                                                      $scope.Accord[BonusId.toString() + periodID.toString()] = true;
                                                      $('#T' + '_' + BonusId.toString() + periodID.toString())
                                                          .find('span')
                                                          .removeClass('collapsed');
                                                      $('#A' + BonusId.toString() + periodID.toString()).addClass('in');
                                                  } else {
                                                      $scope.Accord[value] = false;
                                                      $('#T' + '_' + value)
                                                          .find('span')
                                                          .addClass('collapsed');
                                                      $('#A' + value).removeClass('in');
                                                  }
                                              });
                                          } catch (e) {
                                              //this code is for handle when we have exception because of sepecial symbol
                                              if (data.BonusId.replace(/[^a-zA-Z0-9 ]/g, '') == BonusId.replace(/[^a-zA-Z0-9 ]/g, '')) {
                                                  $scope.Accord[data.BonusId + periodID.toString()] = true;
                                                  $('#T' + '_' + (data.BonusId.replace(/[^a-zA-Z0-9 ]/g, '') + periodID.toString()).toString())
                                                      .find('span')
                                                      .removeClass('collapsed');
                                              } else {
                                                  $('#A' + data.BonusId.replace(/[^a-zA-Z0-9 ]/g, '') + periodID.toString()).removeClass('in');
                                                  $scope.Accord[data.BonusId + periodID.toString()] = false;
                                              }
                                              setTimeout(function() {
                                                  $('#bonusdetailtable_' + data.BonusId).tableHeadFixer();
                                              }, 1000);
                                          }
                                      });
  
                                      _.each($scope.Active, function(key, value) {
                                          if (value == periodTypeID.toString() + periodID.toString() + BonusId.toString()) {
                                              $scope.Active[periodTypeID.toString() + periodID.toString() + BonusId.toString()] = true;
                                          } else {
                                              $scope.Active[value] = false;
                                          }
                                      });
                                  } else {
                                      Notification.error('Error', $translate.instant('there_is_no_data_for_bonusID'));
                                  }
  
                                  $scope.ShowLoader['payHistoryCommissionMain' + periodTypeID + '_' + periodID.toString()] = false;
                                  isCommissionRequest = true;
                              })
                              .catch(function() {
                                  $scope.ShowLoader['payHistoryCommissionMain' + periodTypeID + '_' + periodID.toString()] = false;
                                  isCommissionRequest = true;
                              });
                      } catch (ex) {
                          console.error('ex', ex);
                          $scope.ShowLoader['payHistoryCommissionMain' + periodTypeID + '_' + periodID.toString()] = false;
                      }
                  }
              }
  
              vm.FShowCommissionList = FShowCommissionList;
  
              $scope.clearpreviousData = function(BonusId, type, recordCount, BonusDescription, periodTypeID, periodID) {
                  $scope.GetCommissionBonusDetailData = [];
  
                  recordcountDisco = 10;
                  $scope.SortColumnId = '';
                  $scope.reverse = true;
                  $scope.GetCommissionBonusDetailDataPaging = $scope.GetCommissionBonusDetailDataPaging || {};
                  $scope.GetCommissionBonusDetailDataPaging.PageNo = 0;
                  $scope.GetCommissionBonusDetailDataPaging.PageSize = 10;
                  $scope.CurrentBonusID = BonusId;
  
                  if (
                      GetPageSetting.getSetting('global', 'IsDynamicCommissionView') == '1' &&
                      $scope.GetCommissionReportSettingsResponse
                  ) {
                      _.each($scope.GetCommissionReportSettingsResponse.Node, function(item) {
                          if (item.BonusId !== BonusId) {
                              item.isActive = false;
                          }
                      });
                  } else if ($scope.CommissionBonusName[periodTypeID.toString() + periodID.toString()]) {
                      _.each($scope.CommissionBonusName[periodTypeID + periodID.toString().toString()].Bonuses, function(item) {
                          if (item.BonusId !== BonusId) {
                              item.isActive = false;
                          }
                      });
                  }
  
                  FnCommissionBonuseDetails(BonusId, type, recordCount, BonusDescription, periodTypeID, periodID);
              };
              function FShowCommissionList() {
                  vm.ShowPeriodMobile = true;
                  vm.ShowPeriodDetailMobile = false;
                  $scope.SessionData.ItemDetailsHeader = false;
                  $scope.SessionData.AccountBalanceHeader = false;
                  vm.ShowAccountBalanceDetails = false;
              }
  
              setTimeout(function() {
                  FShowCommissionList();
              }, 1000);
              //   $scope.SessionData.ItemDetailsHeader = true;
              vm.FGetCommissionReportSettings = FGetCommissionReportSettings;
  
              function FGetCommissionReportSettings() {
                  var GetCommissionReportSettingsRequest = '';
  
                  $RestService
                      .GetCommissionReportSettings(GetCommissionReportSettingsRequest)
                      .then(function(result) {
                          result = result.data;
  
                          try {
                              if (parseInt(result.Status, 10) === 0) {
                                  $scope.GetCommissionReportSettingsResponse = result;
                                  _.each(result.Node, function(bonus) {
                                      var accessColumn = bonus.Fields.split(',');
                                      _.each(accessColumn, function(coloumn) {
                                          $scope.IsShowColumn[bonus.BonusId + '_' + coloumn] = true;
                                      });
                                      try {
                                          if (bonus.BonusName === 'Adjustment' && bonus.CommissionType === 1) {
                                              var sortColumnName = _.each(bonus.Columns, function(column) {
                                                  return column.FieldId === bonus.SortColumnId;
                                              });
                                              $scope.SortColumnName =
                                                  (bonus.SortDirection === 1 ? '' : '-') +
                                                  (sortColumnName.length > 0 ? sortColumnName[0].Name : '');
                                          }
                                      } catch (e) {
                                          console.error('Error', e);
                                      }
                                  });
                              }
                          } catch (ex) {
                              console.error(ex);
                          }
                      })
                      .catch(function() {});
              }
  
              FGetCommissionReportSettings();
              vm.GoToDashboard = UserService.viewTeamDashboard;
  
              $scope.reverse = true;
              $scope.SortBy = function(predicate, BonusId, BonusDescription, periodTypeID, periodID) {
                  $scope.GetCommissionBonusDetailData = [];
                  $scope.SortColumnId = predicate.toString().trim();
                  predicate = '[\'' + predicate + '\']';
                  $scope.reverse = $scope.predicate === predicate ? !$scope.reverse : false;
                  $scope.predicate = predicate;
                  $scope.GetCommissionBonusDetailDataPaging.PageNo = 0;
                  $scope.GetCommissionBonusDetailDataPaging.PageSize = 10;
                  FnCommissionBonuseDetails(BonusId, '', null, BonusDescription, periodTypeID, periodID);
              };
              $scope.IsShowColumn = {};
  
              $scope.Addcolumnsign = function(value, id) {
                  var setvalue;
                  if (id === 4) {
                      setvalue = value + '%';
                  } else if (id === 15) {
                      setvalue = $filter('currency')(value, '$', 2);
                  } else {
                      setvalue = value;
                  }
                  return setvalue;
              };
  
              vm.filterChecks = function() {
                  vm.IsShowOptions = false;
                  vm.SelectedFilters = '';
                  for (var i = 0; i < vm.PaymentTypeFilters.length; i++) {
                      if (vm.PaymentTypeFilters[i].IsChecked) {
                          if (vm.PaymentTypeFilters[i].Id !== 'All') {
                              vm.SelectedFilters = vm.SelectedFilters + vm.PaymentTypeFilters[i].Id + ',';
                          } else {
                              vm.SelectedFilters = 'All,';
                              break;
                          }
                      }
                  }
                  vm.SelectedFilters = vm.SelectedFilters.replace(/,(?=[^,]*$)/, '');
                  $scope.PageNo = 1;
                  vm.CommissionChecks = [];
                  vm.IsShowView = true;
                  $scope.getCommissionChecks();
              };
  
              vm.filterChecks();
  
              vm.OnChangeFilter = function(Id, IsChecked) {
                  if (Id === 'All') {
                      if (IsChecked) {
                          _.each(vm.PaymentTypeFilters, function(item) {
                              item.IsChecked = true;
                          });
                      } else {
                          _.each(vm.PaymentTypeFilters, function(item, index) {
                              if (index === 1) {
                                  item.IsChecked = true;
                              } else {
                                  item.IsChecked = false;
                              }
                          });
                          if (vm.PaymentTypeFilters.length === 2) {
                              _.each(vm.PaymentTypeFilters, function(item) {
                                  item.IsChecked = true;
                              });
                          }
                      }
                  } else {
                      if (!IsChecked) {
                          if (vm.PaymentTypeFilters[0].IsChecked) {
                              vm.PaymentTypeFilters[0].IsChecked = false;
                          }
                          var _checked = _.filter(vm.PaymentTypeFilters, function(item) {
                              return item.IsChecked;
                          });
                          if (_checked.length === 0) {
                              vm.PaymentTypeFilters[1].IsChecked = true;
                              if (vm.PaymentTypeFilters.length == 2) {
                                  vm.PaymentTypeFilters[0].IsChecked = true;
                              }
                          }
                      } else {
                          var IsAllChecked = true;
                          var count = 0;
                          _.each(vm.PaymentTypeFilters, function(item) {
                              if (item.Id === Id) {
                                  item.IsChecked = true;
                              }
                              if (!item.IsChecked && item.Id !== 'All') {
                                  IsAllChecked = false;
                              }
                              count++;
                              if (count === vm.PaymentTypeFilters.length) {
                                  vm.PaymentTypeFilters[0].IsChecked = IsAllChecked;
                              }
                          });
                      }
                  }
              };
          } // End of Controller
      
  })();
#PayHistoryPage {
    ::-webkit-scrollbar {
        -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
    }

    ::-webkit-scrollbar:vertical {
        width: 12px;
    }

    ::-webkit-scrollbar:horizontal {
        height: 12px;
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        border: 2px solid hsl(0, 0%, 100%);
    }

    ::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: hsl(0, 0%, 100%);
    }

    @media only screen and (min-width: 1200px) {
        .check-section {
            width: 60%;
        }
    }

    .b-blue {
        border-left-color: var(--color3);
        border-left-style: solid;
        border-left-width: 4px;
    }

    .commission-balance {
        padding: 4px 10px;
        cursor: pointer;
    }

    .account-balance {
        padding: 8px 10px;
        cursor: pointer;
        background-color: #fff;
    }

    .account-balance-detail-fw {
        margin-top: -40px;
    }

    .account-balance-header {
        background-color: #efefef;
    }

    .check-section {
        background-color: hsl(0, 0%, 100%);
        margin: 0 auto;
        margin-bottom: 20px;
        border: 15px solid var(--color1);
        border-radius: 5px;

        .comp-logo {
            height: 60px;
            width: 60px;
        }

        .amount {
            border: 1px solid hsl(0, 0%, 87%);
            padding: 5px 10px;
            margin-left: 10px;
        }

        .pay-to {
            text-transform: uppercase;
            font-size: 11px;
            padding-top: 5px;
        }

        .payee-name {
            border-bottom: 1px solid hsl(0, 0%, 87%);
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .amount-word {
            border-bottom: 1px solid hsl(0, 0%, 87%);
        }

        .memo-content {
            border-bottom: 1px solid hsl(0, 0%, 87%);
            padding-bottom: 5px;
            padding-top: 5px;
        }

        .address {
            font-size: 12px;
            margin-top: 20px;
            padding-top: 10px;
        }
    }

    .check-section-mobile {
        background-color: hsl(0, 0%, 100%);
        margin: 25px auto 0 auto;
        border: 15px solid var(--color1);
        border-radius: 5px;

        .comp-logo {
            height: 60px;
            width: 60px;
        }

        .amount {
            border: 1px solid hsl(0, 0%, 87%);
            padding: 5px 10px;
            margin-left: 10px;
        }

        .pay-to {
            text-transform: uppercase;
            font-size: 11px;
            padding-top: 5px;
        }

        .payee-name {
            border-bottom: 1px solid hsl(0, 0%, 87%);
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .amount-word {
            border-bottom: 1px solid hsl(0, 0%, 87%);
        }

        .memo-content {
            border-bottom: 1px solid hsl(0, 0%, 87%);
            padding-bottom: 5px;
            padding-top: 5px;
        }
    }

    .badge {
        padding: 4px 9px;
        background-color: hsl(0, 0%, 81%);
        border-radius: 8px;
        font-weight: normal;
        color: hsl(0, 0%, 0%);
    }

    .projected-badge {
        background-color: hsl(0, 100%, 82.4%);
    }

    .projected-check {
        border-color: hsl(0, 100%, 82.4%);
    }

    .projected-text {
        color: hsl(0, 100%, 72%) !important; /* stylelint-disable-line declaration-no-important */
    }

    .period-item {
        padding: 6px;
    }

    .custom-dp {
        .custom-dp-header {
            cursor: pointer;
        }

        .dp-head {
            padding: 17px 10px;
            color: hsl(0, 0%, 100%);
            white-space: nowrap;
            width: 12em;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .dp-icon i {
            font-size: 26px;
            color: hsl(0, 0%, 100%);
        }
        /* stylelint-disable max-nesting-depth */

        .accountBalance {
            top: 65px !important; /* stylelint-disable-line declaration-no-important */
        }

        .custom-dp-body {
            position: absolute;
            top: 55px;
            border: 1px solid hsl(0, 0%, 87%);
            z-index: 3;
            background: hsl(0, 0%, 100%);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.12);

            ul {
                list-style: none;

                li {
                    padding: 10px;
                }
            }
        }
    }
    /* stylelint-enable */
    .custom-dp-body-mobile {
        position: absolute;
        border: 1px solid hsl(0, 0%, 87%);
        z-index: 3;
        background: hsl(0, 0%, 100%);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.12);

        ul {
            list-style: none;

            li {
                padding: 10px;
            }
        }
    }

    #PeriodList {
        width: 235px;

        &.card {
            box-shadow: none;
        }
    }

    .period-list-mobile {
        position: absolute;
        left: 0;
        width: 100%;
    }

    .lv-title {
        font-weight: 500;
    }

    .p-l-20-p {
        padding-left: 20%;
    }

    .custom-filter {
        height: 40px;
        display: block;
        width: 100%;
    }

    .table {
        background-color: hsl(0, 0%, 96%) !important; /* stylelint-disable-line declaration-no-important */
    }

    .table > thead > tr > th {
        border-bottom: 1px solid hsl(0, 0%, 86%) !important; /* stylelint-disable-line declaration-no-important */
        background-color: hsl(0, 0%, 96%) !important; /* stylelint-disable-line declaration-no-important */
    }

    .Dateswitch {
        white-space: nowrap;
        font-size: 18px;
    }
}

Did this page help you?