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
- Copy this code into a Custom Page in Web Office Admin and customize it to your liking.
- 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>
<span ng-bind="SessionData.CompanyDetail.Address2"></span>
<br ng-if="SessionData.CompanyDetail.Address2" />
<span ng-bind="SessionData.CompanyDetail.City"></span>
<span ng-bind="SessionData.CompanyDetail.State"></span>
<span ng-bind="SessionData.CompanyDetail.Zip"></span>
<span ng-bind="SessionData.CompanyDetail.Country"></span>
<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>
<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>
<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>
<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>
<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;
}
}
Updated about 3 years ago