diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 96f4dea78..3668474fc 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -35,6 +35,7 @@ import { SystemModule } from './system/system.module'; import { ProductsModule } from './products/products.module'; + /** Main Routing Module */ import { AppRoutingModule } from './app-routing.module'; @@ -63,7 +64,7 @@ import { AppRoutingModule } from './app-routing.module'; SelfServiceModule, SystemModule, ProductsModule, - AppRoutingModule + AppRoutingModule, ], declarations: [WebAppComponent, NotFoundComponent], providers: [], diff --git a/src/app/clients/clients-routing.module.ts b/src/app/clients/clients-routing.module.ts index 7d6cfbeed..e7e394f69 100644 --- a/src/app/clients/clients-routing.module.ts +++ b/src/app/clients/clients-routing.module.ts @@ -1,4 +1,4 @@ -import { NgModule } from '@angular/core'; +import { NgModule, Component } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; /** Routing Imports */ @@ -9,20 +9,50 @@ import { extract } from '../core/i18n/i18n.service'; /** Custom Components */ import { ClientsComponent } from './clients.component'; +import { ClientsViewComponent } from './clients-view/clients-view.component'; +import { GeneralTabComponent } from './clients-view/general-tab/general-tab.component'; /** Custom Resolvers */ import { ClientsResolver } from './common-resolvers/clients.resolver'; +import { ClientViewResolver } from './common-resolvers/client-view.resolver'; +import { ClientAccountsResolver } from './common-resolvers/client-accounts.resolver'; +import { ClientChargesResolver } from './common-resolvers/client-charges.resolver'; +import { ClientSummaryResolver } from './common-resolvers/client-summary.resolver'; const routes: Routes = [ - Route.withShell([ - { - path: 'clients', - component: ClientsComponent, - data: { title: extract('Clients'), breadcrumb: 'Clients', routeParamBreadcrumb: false }, - resolve: { - clientsData: ClientsResolver + Route.withShell([{ + path: 'clients', + data: { title: extract('Clients'), breadcrumb: 'Clients', routeParamBreadcrumb: false }, + children: [ + { + path: '', + component: ClientsComponent, + resolve: { + clientsData: ClientsResolver + } + }, + { + path: ':clientId', + component: ClientsViewComponent, + data: { title: extract('Clients View'), routeParamBreadcrumb: 'clientId' }, + resolve: { + clientViewData: ClientViewResolver + }, + children: [ + { + path: 'general', + component: GeneralTabComponent, + resolve: { + clientAccountsData: ClientAccountsResolver, + clientChargesData: ClientChargesResolver, + clientSummary: ClientSummaryResolver + }, + + } + ] } - } + ] + } ]) ]; @@ -30,7 +60,11 @@ const routes: Routes = [ imports: [RouterModule.forChild(routes)], exports: [RouterModule], providers: [ - ClientsResolver + ClientsResolver, + ClientViewResolver, + ClientAccountsResolver, + ClientChargesResolver, + ClientSummaryResolver ] }) export class ClientsRoutingModule { } diff --git a/src/app/clients/clients-view/clients-view.component-theme.scss b/src/app/clients/clients-view/clients-view.component-theme.scss new file mode 100644 index 000000000..fad802a6d --- /dev/null +++ b/src/app/clients/clients-view/clients-view.component-theme.scss @@ -0,0 +1,13 @@ +@import "~@angular/material/theming"; + +@mixin clients-view-component-theme($theme) { + $primary: map-get($theme, primary); + + mifosx-clients-view { + .client-card { + .header { + background-color: mat-color($primary, 500); + } + } + } +} diff --git a/src/app/clients/clients-view/clients-view.component.html b/src/app/clients/clients-view/clients-view.component.html new file mode 100644 index 000000000..8eeff756f --- /dev/null +++ b/src/app/clients/clients-view/clients-view.component.html @@ -0,0 +1,52 @@ + + + + +
+
+ +
+
+
+ +

+ Client Name : {{clientViewData.displayName}} +

+ + +

+ Client #:{{clientViewData.accountNo}} | External + Id: {{clientViewData.externalId}} | Staff:{{clientViewData.staffName}}
+ Activation Date : + {{(clientViewData.activationDate)?(clientViewData.activationDate|date) :'Not Activated'}}
+ Member Of : + {{group.name}} +   + + Unassigned +
+

+ +
+ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/app/clients/clients-view/clients-view.component.scss b/src/app/clients/clients-view/clients-view.component.scss new file mode 100644 index 000000000..4337c8c53 --- /dev/null +++ b/src/app/clients/clients-view/clients-view.component.scss @@ -0,0 +1,29 @@ +.client-card { + margin: 0 auto; + max-width: 80rem; + width: 90%; + padding: 0; + .header { + padding: 1%; + .header-title-group { + .client-card-title { + color: white; + width: 90%; + p { + color: white; + } + } + } + .profile-image-container { + margin: 1%; + .profile-image { + object-fit: cover; + border-radius: 20px; + } + } + .client-actions { + align-self: flex-end; + margin: 0 1%; + } + } +} diff --git a/src/app/clients/clients-view/clients-view.component.spec.ts b/src/app/clients/clients-view/clients-view.component.spec.ts new file mode 100644 index 000000000..b9d1b0772 --- /dev/null +++ b/src/app/clients/clients-view/clients-view.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ClientsViewComponent } from './clients-view.component'; + +describe('ClientsViewComponent', () => { + let component: ClientsViewComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ClientsViewComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ClientsViewComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/clients/clients-view/clients-view.component.ts b/src/app/clients/clients-view/clients-view.component.ts new file mode 100644 index 000000000..6ae13c578 --- /dev/null +++ b/src/app/clients/clients-view/clients-view.component.ts @@ -0,0 +1,31 @@ +/** Angular Imports */ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { DomSanitizer } from '@angular/platform-browser'; + +/** Custom Services */ +import { ClientsService } from '../clients.service'; +@Component({ + selector: 'mifosx-clients-view', + templateUrl: './clients-view.component.html', + styleUrls: ['./clients-view.component.scss'] +}) +export class ClientsViewComponent implements OnInit { + clientViewData: any; + clientImage: any; + constructor(private route: ActivatedRoute, + private clientsService: ClientsService, + private _sanitizer: DomSanitizer) { + this.route.data.subscribe((data: { clientViewData: any }) => { + this.clientViewData = data.clientViewData; + }); + + } + + ngOnInit() { + this.clientsService.getClientProfileImage(this.clientViewData.id).subscribe(base64Image => { + this.clientImage = this._sanitizer.bypassSecurityTrustResourceUrl(base64Image); + }); + } + +} diff --git a/src/app/clients/clients-view/general-tab/general-tab.component.html b/src/app/clients/clients-view/general-tab/general-tab.component.html new file mode 100644 index 000000000..4de5ab870 --- /dev/null +++ b/src/app/clients/clients-view/general-tab/general-tab.component.html @@ -0,0 +1,363 @@ +
+

Performance History

+
+

+ No. Of Loan Cycles :{{clientSummary.loanCycle}}
+ No. of Active Loans :{{clientSummary.activeLoans}}
+ Last Loan Amount :{{clientSummary.lastLoanAmount}}
+

+

+ No. of Active Savings :{{clientSummary.activeSavings}}
+ Total Savings :{{clientSummary.totalSavings}}
+ +

+
+ + + +

Upcoming Charges

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name + {{element.name}} Due as of {{element.dueDate|date}} Due {{element.amount}} Paid {{element.amountPaid}} Waived {{element.amountWaived}} Outstanding {{element.amountOutstanding}} Actions + + +
+ + + + +

Loan Accounts

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Account No. + {{element.accountNo}} + Loan Account {{element.productName}} Original Loan {{element.lastActiveTransactionDate | date}} Loan Balance {{element.loanBalance}} Amount Paid {{element.accountBalance}} Type + + Actions + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Account No. + {{element.accountNo}} + Loan Account {{element.productName}} Original Loan {{element.lastActiveTransactionDate | date}} Loan Balance {{element.loanBalance}} Amount Paid {{element.accountBalance}} Type + + Closed Date {{element.timeline.closedOnDate | date}}
+ + + + +

Saving Accounts

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Account No. + {{element.accountNo}} Saving Account {{element.productName}} Last Active {{element.lastActiveTransactionDate | date}} Balance {{element.accountBalance}} Actions + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + +
Account No. + {{element.accountNo}} Saving Account {{element.productName}} Closed Date {{element.timeline.closedOnDate | date}}
+ + + +

Shares Accounts

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Account No. + {{element.accountNo}} Share Account {{element.productName}} Approved Shares {{element.totalApprovedShares}} Pending For Approval Shares {{element.totalPendingForApprovalShares}} Actions + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Account No. + {{element.accountNo}} Share Account {{element.productName}} Approved Shares {{element.totalApprovedShares}} Pending For Approval Shares {{element.totalPendingForApprovalShares}} Closed Date {{element.timeline.closedOnDate | date}}
+ +
\ No newline at end of file diff --git a/src/app/clients/clients-view/general-tab/general-tab.component.scss b/src/app/clients/clients-view/general-tab/general-tab.component.scss new file mode 100644 index 000000000..4ea3dfdcc --- /dev/null +++ b/src/app/clients/clients-view/general-tab/general-tab.component.scss @@ -0,0 +1,22 @@ +.tab-container { + padding: 1%; + margin: 1%; + + h3{ + margin:1% auto; + } + .performance-history-container { + border: 1px solid; + padding: 1%; + } + + table { + width: 100%; + .account-action-button{ + min-width: 26px; + padding: 0 6px; + margin: 4px; + line-height: 25px; + } + } +} diff --git a/src/app/clients/clients-view/general-tab/general-tab.component.spec.ts b/src/app/clients/clients-view/general-tab/general-tab.component.spec.ts new file mode 100644 index 000000000..68ff6503e --- /dev/null +++ b/src/app/clients/clients-view/general-tab/general-tab.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GeneralTabComponent } from './general-tab.component'; + +describe('GeneralTabComponent', () => { + let component: GeneralTabComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GeneralTabComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GeneralTabComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/clients/clients-view/general-tab/general-tab.component.ts b/src/app/clients/clients-view/general-tab/general-tab.component.ts new file mode 100644 index 000000000..f5a9f76c6 --- /dev/null +++ b/src/app/clients/clients-view/general-tab/general-tab.component.ts @@ -0,0 +1,60 @@ +/** Angular Imports */ +import { Component, OnInit } from '@angular/core'; +import { Router, ActivatedRoute } from '@angular/router'; +import { DatePipe } from '@angular/common'; + + + +@Component({ + selector: 'mifosx-general-tab', + templateUrl: './general-tab.component.html', + styleUrls: ['./general-tab.component.scss'] +}) +export class GeneralTabComponent implements OnInit { + openLoansColumns: string[] = ['Account No', 'Loan Account', 'Original Loan', 'Loan Balance', 'Amount Paid', 'Type', 'Actions']; + closedLoansColumns: string[] = ['Account No', 'Loan Account', 'Original Loan', 'Loan Balance', 'Amount Paid', 'Type', 'Closed Date']; + openSavingsColumns: string[] = ['Account No', 'Saving Account', 'Last Active', 'Balance', 'Actions']; + closedSavingsColumns: string[] = ['Account No', 'Saving Account', 'Closed Date']; + openSharesColumns: string[] = ['Account No', 'Share Account', 'Approved Shares', 'Pending For Approval Shares', 'Actions']; + closedSharesColumns: string[] = ['Account No', 'Share Account', 'Approved Shares', 'Pending For Approval Shares', 'Closed Date']; + upcomingChargesColumns: string[] = ['Name', 'Due as of', 'Due', 'Paid', 'Waived', 'Outstanding', 'Actions']; + clientAccountData: any; + loanAccounts: any; + savingAccounts: any; + shareAccounts: any; + upcomingCharges: any; + clientSummary: any; + showClosedLoanAccounts = false; + showClosedSavingAccounts = false; + showClosedShareAccounts = false; + + constructor( + private route: ActivatedRoute, + private router: Router, + private datePipe: DatePipe, + ) { + this.route.data.subscribe((data: { clientAccountsData: any, clientChargesData: any, clientSummary: any }) => { + this.clientAccountData = data.clientAccountsData; + this.savingAccounts = data.clientAccountsData.savingsAccounts; + this.loanAccounts = data.clientAccountsData.loanAccounts; + this.shareAccounts = data.clientAccountsData.shareAccounts; + this.upcomingCharges = data.clientChargesData.pageItems; + this.clientSummary = data.clientSummary[0]; + }); + } + + ngOnInit() { + } + + toggleLoanAccountsOverview() { + this.showClosedLoanAccounts = !this.showClosedLoanAccounts; + } + + toggleSavingAccountsOverview() { + this.showClosedSavingAccounts = !this.showClosedSavingAccounts; + } + toggleShareAccountsOverview() { + this.showClosedShareAccounts = !this.showClosedShareAccounts; + } + +} diff --git a/src/app/clients/clients.component.html b/src/app/clients/clients.component.html index 67fdeddc1..b128bcc58 100644 --- a/src/app/clients/clients.component.html +++ b/src/app/clients/clients.component.html @@ -63,7 +63,7 @@ - + @@ -71,28 +71,4 @@ - - - - - - - diff --git a/src/app/clients/clients.module.ts b/src/app/clients/clients.module.ts index cb3aaf02d..6ad908519 100644 --- a/src/app/clients/clients.module.ts +++ b/src/app/clients/clients.module.ts @@ -8,6 +8,10 @@ import { SharedModule } from 'app/shared/shared.module'; /** Custom Components */ import { ClientsComponent } from './clients.component'; +import { ClientsViewComponent } from './clients-view/clients-view.component'; +import { GeneralTabComponent } from './clients-view/general-tab/general-tab.component'; +import {PipesModule} from '../pipes/pipes.module'; + /** * Clients Module @@ -17,9 +21,13 @@ import { ClientsComponent } from './clients.component'; @NgModule({ imports: [ SharedModule, - ClientsRoutingModule + ClientsRoutingModule, + PipesModule ], - declarations: [ClientsComponent], + declarations: [ + ClientsComponent, + ClientsViewComponent, + GeneralTabComponent], providers: [DatePipe] }) diff --git a/src/app/clients/clients.service.ts b/src/app/clients/clients.service.ts index a434db813..9a19d8113 100644 --- a/src/app/clients/clients.service.ts +++ b/src/app/clients/clients.service.ts @@ -22,4 +22,23 @@ export class ClientsService { const httpParams = new HttpParams().set('orderBy', 'id'); return this.http.get('/clients', { params: httpParams }); } + getClientData(clientId: string) { + return this.http.get(`/clients/${clientId}`); + } + getClientAccountData(clientId: string) { + return this.http.get(`/clients/${clientId}/accounts`); + } + getClientChargesData(clientId: string) { + const httpParams = new HttpParams().set('pendingPayment', 'true'); + return this.http.get(`/clients/${clientId}/charges`, { params: httpParams }); + } + getClientSummary(clientId: string) { + const httpParams = new HttpParams().set('R_clientId', clientId) + .set('genericResultSet', 'false'); + return this.http.get(`/runreports/ClientSummary`, { params: httpParams }); + } + getClientProfileImage(clientId: string) { + const httpParams = new HttpParams().set('maxHeight', '150'); + return this.http.get(`/clients/${clientId}/images`, { params: httpParams, responseType: 'text' }); + } } diff --git a/src/app/clients/common-resolvers/client-accounts.resolver.ts b/src/app/clients/common-resolvers/client-accounts.resolver.ts new file mode 100644 index 000000000..1ae7f08bb --- /dev/null +++ b/src/app/clients/common-resolvers/client-accounts.resolver.ts @@ -0,0 +1,31 @@ +/** Angular Imports */ +import { Injectable } from '@angular/core'; +import { Resolve, ActivatedRouteSnapshot } from '@angular/router'; + +/** rxjs Imports */ +import { Observable } from 'rxjs'; + +/** Custom Services */ +import { ClientsService } from '../clients.service'; + +/** + * Client Accounts data resolver. + */ +@Injectable() +export class ClientAccountsResolver implements Resolve { + + /** + * @param {ClientsService} ClientsService Clients service. + */ + constructor(private clientsService: ClientsService) { } + + /** + * Returns the Client Account data. + * @returns {Observable} + */ + resolve(route: ActivatedRouteSnapshot): Observable { + const clientId = route.parent.paramMap.get('clientId'); + return this.clientsService.getClientAccountData(clientId); + } + +} diff --git a/src/app/clients/common-resolvers/client-charges.resolver.ts b/src/app/clients/common-resolvers/client-charges.resolver.ts new file mode 100644 index 000000000..58fadfb83 --- /dev/null +++ b/src/app/clients/common-resolvers/client-charges.resolver.ts @@ -0,0 +1,31 @@ +/** Angular Imports */ +import { Injectable } from '@angular/core'; +import { Resolve, ActivatedRouteSnapshot } from '@angular/router'; + +/** rxjs Imports */ +import { Observable } from 'rxjs'; + +/** Custom Services */ +import { ClientsService } from '../clients.service'; + +/** + * Client Charges data resolver. + */ +@Injectable() +export class ClientChargesResolver implements Resolve { + + /** + * @param {ClientsService} ClientsService Clients service. + */ + constructor(private clientsService: ClientsService) { } + + /** + * Returns the Client Charge data. + * @returns {Observable} + */ + resolve(route: ActivatedRouteSnapshot): Observable { + const clientId = route.parent.paramMap.get('clientId'); + return this.clientsService.getClientChargesData(clientId); + } + +} diff --git a/src/app/clients/common-resolvers/client-summary.resolver.ts b/src/app/clients/common-resolvers/client-summary.resolver.ts new file mode 100644 index 000000000..35c31492a --- /dev/null +++ b/src/app/clients/common-resolvers/client-summary.resolver.ts @@ -0,0 +1,31 @@ +/** Angular Imports */ +import { Injectable } from '@angular/core'; +import { Resolve, ActivatedRouteSnapshot } from '@angular/router'; + +/** rxjs Imports */ +import { Observable } from 'rxjs'; + +/** Custom Services */ +import { ClientsService } from '../clients.service'; + +/** + * Client Summary resolver. + */ +@Injectable() +export class ClientSummaryResolver implements Resolve { + + /** + * @param {ClientsService} ClientsService Clients service. + */ + constructor(private clientsService: ClientsService) { } + + /** + * Returns the Client Summary data. + * @returns {Observable} + */ + resolve(route: ActivatedRouteSnapshot): Observable { + const clientId = route.parent.paramMap.get('clientId'); + return this.clientsService.getClientSummary(clientId); + } + +} diff --git a/src/app/clients/common-resolvers/client-view.resolver.ts b/src/app/clients/common-resolvers/client-view.resolver.ts new file mode 100644 index 000000000..16f82f472 --- /dev/null +++ b/src/app/clients/common-resolvers/client-view.resolver.ts @@ -0,0 +1,31 @@ +/** Angular Imports */ +import { Injectable } from '@angular/core'; +import { Resolve, ActivatedRouteSnapshot } from '@angular/router'; + +/** rxjs Imports */ +import { Observable } from 'rxjs'; + +/** Custom Services */ +import { ClientsService } from '../clients.service'; + +/** + * Clients data resolver. + */ +@Injectable() +export class ClientViewResolver implements Resolve { + + /** + * @param {ClientsService} ClientsService Clients service. + */ + constructor(private clientsService: ClientsService) { } + + /** + * Returns the Clients data. + * @returns {Observable} + */ + resolve(route: ActivatedRouteSnapshot): Observable { + const clientId = route.paramMap.get('clientId'); + return this.clientsService.getClientData(clientId); + } + +} diff --git a/src/app/pipes/accounts-filter.pipe.spec.ts b/src/app/pipes/accounts-filter.pipe.spec.ts new file mode 100644 index 000000000..f44c7d63a --- /dev/null +++ b/src/app/pipes/accounts-filter.pipe.spec.ts @@ -0,0 +1,8 @@ +import { AccountsFilterPipe } from './accounts-filter.pipe'; + +describe('AccountsFilterPipe', () => { + it('create an instance', () => { + const pipe = new AccountsFilterPipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/src/app/pipes/accounts-filter.pipe.ts b/src/app/pipes/accounts-filter.pipe.ts new file mode 100644 index 000000000..91779b04a --- /dev/null +++ b/src/app/pipes/accounts-filter.pipe.ts @@ -0,0 +1,62 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'accountsFilter' +}) +export class AccountsFilterPipe implements PipeTransform { + + transform(accounts: any, type: any, status: any): any { + if (accounts) { + if (type === 'loan') { + if (status === 'closed') { + accounts = accounts.filter((account: any) => { + return (account.status.code === 'loanStatusType.closed.written.off' || + account.status.code === 'loanStatusType.closed.obligations.met' || + account.status.code === 'loanStatusType.closed.reschedule.outstanding.amount' || + account.status.code === 'loanStatusType.withdrawn.by.client' || + account.status.code === 'loanStatusType.rejected'); + }); + } else { + accounts = accounts.filter((account: any) => { + return (account.status.code !== 'loanStatusType.closed.written.off' && + account.status.code !== 'loanStatusType.closed.obligations.met' && + account.status.code !== 'loanStatusType.closed.reschedule.outstanding.amount' && + account.status.code !== 'loanStatusType.withdrawn.by.client' && + account.status.code !== 'loanStatusType.rejected'); + }); + } + } + if (type === 'saving') { + if (status === 'closed') { + accounts = accounts.filter((account: any) => { + return (account.status.code === 'savingsAccountStatusType.withdrawn.by.applicant' || + account.status.code === 'savingsAccountStatusType.closed' || + account.status.code === 'savingsAccountStatusType.pre.mature.closure' || + account.status.code === 'savingsAccountStatusType.rejected'); + }); + } else { + accounts = accounts.filter((account: any) => { + return (account.status.code !== 'savingsAccountStatusType.withdrawn.by.applicant' && + account.status.code !== 'savingsAccountStatusType.closed' && + account.status.code !== 'savingsAccountStatusType.pre.mature.closure' && + account.status.code !== 'savingsAccountStatusType.rejected'); + }); + } + } + if (type === 'share') { + if (status === 'closed') { + accounts = accounts.filter((account: any) => { + return (account.status.code === 'shareAccountStatusType.closed' || + account.status.code === 'shareAccountStatusType.rejected'); + }); + } else { + accounts = accounts.filter((account: any) => { + return (account.status.code !== 'shareAccountStatusType.closed' && + account.status.code !== 'shareAccountStatusType.rejected'); + }); + } + } + return accounts; + } + } +} diff --git a/src/app/pipes/fetch-image.pipe.spec.ts b/src/app/pipes/fetch-image.pipe.spec.ts new file mode 100644 index 000000000..41fe17cd8 --- /dev/null +++ b/src/app/pipes/fetch-image.pipe.spec.ts @@ -0,0 +1,8 @@ +import { FetchImagePipe } from './fetch-image.pipe'; + +describe('FetchImagePipe', () => { + it('create an instance', () => { + const pipe = new FetchImagePipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/src/app/pipes/pipes.module.spec.ts b/src/app/pipes/pipes.module.spec.ts new file mode 100644 index 000000000..5b55f37ab --- /dev/null +++ b/src/app/pipes/pipes.module.spec.ts @@ -0,0 +1,13 @@ +import { PipesModule } from './pipes.module'; + +describe('PipesModule', () => { + let pipesModule: PipesModule; + + beforeEach(() => { + pipesModule = new PipesModule(); + }); + + it('should create an instance', () => { + expect(pipesModule).toBeTruthy(); + }); +}); diff --git a/src/app/pipes/pipes.module.ts b/src/app/pipes/pipes.module.ts new file mode 100644 index 000000000..44cac041d --- /dev/null +++ b/src/app/pipes/pipes.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { StatusLookupPipe } from './status-lookup.pipe'; +import { AccountsFilterPipe } from './accounts-filter.pipe'; + + + +@NgModule({ + imports: [ + CommonModule + ], + declarations: [StatusLookupPipe, AccountsFilterPipe], + providers: [StatusLookupPipe, AccountsFilterPipe], + exports: [StatusLookupPipe, AccountsFilterPipe] +}) +export class PipesModule { } diff --git a/src/app/pipes/status-lookup.pipe.spec.ts b/src/app/pipes/status-lookup.pipe.spec.ts new file mode 100644 index 000000000..3222153b6 --- /dev/null +++ b/src/app/pipes/status-lookup.pipe.spec.ts @@ -0,0 +1,8 @@ +import { StatusLookupPipe } from './status-lookup.pipe'; + +describe('StatusLookupPipe', () => { + it('create an instance', () => { + const pipe = new StatusLookupPipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/src/app/pipes/status-lookup.pipe.ts b/src/app/pipes/status-lookup.pipe.ts new file mode 100644 index 000000000..d53215c2b --- /dev/null +++ b/src/app/pipes/status-lookup.pipe.ts @@ -0,0 +1,31 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'statusLookup' +}) +export class StatusLookupPipe implements PipeTransform { + + transform(status: string): string { + const cssClassNameLookup = { + 'true': 'status-active', + 'false': 'status-deleted', + 'Active': 'status-active', + 'charges.StatusType.active.true': 'status-active', + 'loanStatusType.submitted.and.pending.approval': 'status-pending', + 'loanStatusType.approved': 'status-approved', + 'loanStatusType.active': 'status-active', + 'loanStatusType.overpaid': 'status-overpaid', + 'savingsAccountStatusType.submitted.and.pending.approval': 'status-pending', + 'savingsAccountStatusType.approved': 'status-approved', + 'savingsAccountStatusType.active': 'status-active', + 'savingsAccountStatusType.activeInactive': 'status-active-overdue', + 'savingsAccountStatusType.activeDormant': 'status-active-overdue', + 'savingsAccountStatusType.matured': 'status-matured', + 'shareAccountStatusType.submitted.and.pending.approval': 'status-pending', + 'shareAccountStatusType.approved': 'status-approved', + 'shareAccountStatusType.active': 'status-active', + 'shareAccountStatusType.rejected': 'status-rejected', + }; + return cssClassNameLookup[status]; + } +} diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index d4fc9deaf..e43e11951 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -1,4 +1,4 @@ - /** Angular Imports */ +/** Angular Imports */ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ReactiveFormsModule, FormsModule } from '@angular/forms'; @@ -31,7 +31,7 @@ import { MaterialModule } from './material.module'; FileUploadComponent, FooterComponent, LanguageSelectorComponent, - ThemePickerComponent + ThemePickerComponent, ], exports: [ FileUploadComponent, diff --git a/src/assets/styles/_colours.scss b/src/assets/styles/_colours.scss index e6efea537..474aa9bc1 100644 --- a/src/assets/styles/_colours.scss +++ b/src/assets/styles/_colours.scss @@ -44,20 +44,29 @@ $msg-danger: #d9534f; $msg-info: #5bc0de; //Social Colors -$dailymile: #FFAA25; -$facebook: #3B5998; +$dailymile: #ffaa25; +$facebook: #3b5998; $flickr: #f80082; -$github: #F7F7F7; +$github: #f7f7f7; $google: #d7473d; -$instagram: #37658D; -$linkedin: #2C8CC0; +$instagram: #37658d; +$linkedin: #2c8cc0; $pinterest: #c5142b; $runkeeper: #3193d3; $skype: #00abee; -$spotify: #7AB800; -$twitter: #3B8ACA; +$spotify: #7ab800; +$twitter: #3b8aca; // Set Site Specific Base, Highlight and Accent Colors Here for easy switching between themes $base: $dark-grey; $highlight: $belize-hole; -$accent: $peter-river; \ No newline at end of file +$accent: $peter-river; + +//Status Colors Defined Here +$status-active: #00ce00; +$status-deleted: #000000; +$status-pending: #ffa500; +$status-approved: #0f36e4; +$status-overpaid: #800080; +$status-active-overdue: #ff0000; +$status-matured: #ff4000; diff --git a/src/assets/styles/_helper.scss b/src/assets/styles/_helper.scss index 2347c54ef..c5e810f30 100644 --- a/src/assets/styles/_helper.scss +++ b/src/assets/styles/_helper.scss @@ -22,8 +22,8 @@ body { margin: 0; padding: 0; font-weight: 400; - font-size: .875rem; - color: rgba(0,0,0,.87); + font-size: 0.875rem; + color: rgba(0, 0, 0, 0.87); line-height: 1.5; font-family: Roboto, Helvetica Neue, sans-serif; } @@ -38,1600 +38,1665 @@ div { width: 90%; } - .mb-05 { - margin-bottom: .5rem; - } +.mb-05 { + margin-bottom: 0.5rem; +} - .mr-05 { - margin-right: .5rem; - } +.mr-05 { + margin-right: 0.5rem; +} - .mb-1 { - margin-bottom: 1rem; - } +.mb-1 { + margin-bottom: 1rem; +} - .mt-1 { - margin-top: 1rem; - } +.mt-1 { + margin-top: 1rem; +} - .no-p { - padding: 0px !important - } +.no-p { + padding: 0px !important; +} - .no-p-t { - padding-top: 0px !important - } +.no-p-t { + padding-top: 0px !important; +} - .no-p-r { - padding-right: 0px !important - } +.no-p-r { + padding-right: 0px !important; +} - .no-p-b { - padding-bottom: 0px !important - } +.no-p-b { + padding-bottom: 0px !important; +} - .no-p-l { - padding-left: 0px !important - } +.no-p-l { + padding-left: 0px !important; +} - .no-p-v { - padding: 0px 0 !important - } +.no-p-v { + padding: 0px 0 !important; +} - .no-p-h { - padding: 0 0px !important - } +.no-p-h { + padding: 0 0px !important; +} - .p-5 { - padding: 5px - } +.p-5 { + padding: 5px; +} - .p-t-5 { - padding-top: 5px - } +.p-t-5 { + padding-top: 5px; +} - .p-r-5 { - padding-right: 5px - } +.p-r-5 { + padding-right: 5px; +} - .p-b-5 { - padding-bottom: 5px - } +.p-b-5 { + padding-bottom: 5px; +} - .p-l-5 { - padding-left: 5px - } +.p-l-5 { + padding-left: 5px; +} - .p-v-5 { - padding: 5px 0 - } +.p-v-5 { + padding: 5px 0; +} - .p-h-5 { - padding: 0 5px - } +.p-h-5 { + padding: 0 5px; +} - .p-10 { - padding: 10px - } +.p-10 { + padding: 10px; +} - .p-t-10 { - padding-top: 10px - } +.p-t-10 { + padding-top: 10px; +} - .p-r-10 { - padding-right: 10px - } +.p-r-10 { + padding-right: 10px; +} - .p-b-10 { - padding-bottom: 10px - } +.p-b-10 { + padding-bottom: 10px; +} - .p-l-10 { - padding-left: 10px - } +.p-l-10 { + padding-left: 10px; +} - .p-v-10 { - padding: 10px 0 - } +.p-v-10 { + padding: 10px 0; +} - .p-h-10 { - padding: 0 10px - } +.p-h-10 { + padding: 0 10px; +} - .p-15 { - padding: 15px - } +.p-15 { + padding: 15px; +} - .p-t-15 { - padding-top: 15px - } +.p-t-15 { + padding-top: 15px; +} - .p-r-15 { - padding-right: 15px - } +.p-r-15 { + padding-right: 15px; +} - .p-b-15 { - padding-bottom: 15px - } +.p-b-15 { + padding-bottom: 15px; +} - .p-l-15 { - padding-left: 15px - } +.p-l-15 { + padding-left: 15px; +} - .p-v-15 { - padding: 15px 0 - } +.p-v-15 { + padding: 15px 0; +} - .p-h-15 { - padding: 0 15px - } +.p-h-15 { + padding: 0 15px; +} - .p-20 { - padding: 20px - } +.p-20 { + padding: 20px; +} - .p-t-20 { - padding-top: 20px - } +.p-t-20 { + padding-top: 20px; +} - .p-r-20 { - padding-right: 20px - } +.p-r-20 { + padding-right: 20px; +} - .p-b-20 { - padding-bottom: 20px - } +.p-b-20 { + padding-bottom: 20px; +} - .p-l-20 { - padding-left: 20px - } +.p-l-20 { + padding-left: 20px; +} - .p-v-20 { - padding: 20px 0 - } +.p-v-20 { + padding: 20px 0; +} - .p-h-20 { - padding: 0 20px - } +.p-h-20 { + padding: 0 20px; +} - .p-25 { - padding: 25px - } +.p-25 { + padding: 25px; +} - .p-t-25 { - padding-top: 25px - } +.p-t-25 { + padding-top: 25px; +} - .p-r-25 { - padding-right: 25px - } +.p-r-25 { + padding-right: 25px; +} - .p-b-25 { - padding-bottom: 25px - } +.p-b-25 { + padding-bottom: 25px; +} - .p-l-25 { - padding-left: 25px - } +.p-l-25 { + padding-left: 25px; +} - .p-v-25 { - padding: 25px 0 - } +.p-v-25 { + padding: 25px 0; +} - .p-h-25 { - padding: 0 25px - } +.p-h-25 { + padding: 0 25px; +} - .p-30 { - padding: 30px - } +.p-30 { + padding: 30px; +} - .p-t-30 { - padding-top: 30px - } +.p-t-30 { + padding-top: 30px; +} - .p-r-30 { - padding-right: 30px - } +.p-r-30 { + padding-right: 30px; +} - .p-b-30 { - padding-bottom: 30px - } +.p-b-30 { + padding-bottom: 30px; +} - .p-l-30 { - padding-left: 30px - } +.p-l-30 { + padding-left: 30px; +} - .p-v-30 { - padding: 30px 0 - } +.p-v-30 { + padding: 30px 0; +} - .p-h-30 { - padding: 0 30px - } +.p-h-30 { + padding: 0 30px; +} - .p-35 { - padding: 35px - } +.p-35 { + padding: 35px; +} - .p-t-35 { - padding-top: 35px - } +.p-t-35 { + padding-top: 35px; +} - .p-r-35 { - padding-right: 35px - } +.p-r-35 { + padding-right: 35px; +} - .p-b-35 { - padding-bottom: 35px - } +.p-b-35 { + padding-bottom: 35px; +} - .p-l-35 { - padding-left: 35px - } +.p-l-35 { + padding-left: 35px; +} - .p-v-35 { - padding: 35px 0 - } +.p-v-35 { + padding: 35px 0; +} - .p-h-35 { - padding: 0 35px - } +.p-h-35 { + padding: 0 35px; +} - .p-40 { - padding: 40px - } +.p-40 { + padding: 40px; +} - .p-t-40 { - padding-top: 40px - } +.p-t-40 { + padding-top: 40px; +} - .p-r-40 { - padding-right: 40px - } +.p-r-40 { + padding-right: 40px; +} - .p-b-40 { - padding-bottom: 40px - } +.p-b-40 { + padding-bottom: 40px; +} - .p-l-40 { - padding-left: 40px - } +.p-l-40 { + padding-left: 40px; +} - .p-v-40 { - padding-top: 40px; - padding-bottom: 40px - } +.p-v-40 { + padding-top: 40px; + padding-bottom: 40px; +} - .p-h-40 { - padding: 0 40px - } +.p-h-40 { + padding: 0 40px; +} - .p-45 { - padding: 45px - } +.p-45 { + padding: 45px; +} - .p-t-45 { - padding-top: 45px - } +.p-t-45 { + padding-top: 45px; +} - .p-r-45 { - padding-right: 45px - } +.p-r-45 { + padding-right: 45px; +} - .p-b-45 { - padding-bottom: 45px - } +.p-b-45 { + padding-bottom: 45px; +} - .p-l-45 { - padding-left: 45px - } +.p-l-45 { + padding-left: 45px; +} - .p-v-45 { - padding: 45px 0 - } +.p-v-45 { + padding: 45px 0; +} - .p-h-45 { - padding: 0 45px - } +.p-h-45 { + padding: 0 45px; +} - .p-50 { - padding: 50px - } +.p-50 { + padding: 50px; +} - .p-t-50 { - padding-top: 50px - } +.p-t-50 { + padding-top: 50px; +} - .p-r-50 { - padding-right: 50px - } +.p-r-50 { + padding-right: 50px; +} - .p-b-50 { - padding-bottom: 50px - } +.p-b-50 { + padding-bottom: 50px; +} - .p-l-50 { - padding-left: 50px - } +.p-l-50 { + padding-left: 50px; +} - .p-v-50 { - padding: 50px 0 - } +.p-v-50 { + padding: 50px 0; +} - .p-h-50 { - padding: 0 50px - } +.p-h-50 { + padding: 0 50px; +} - .p-55 { - padding: 55px - } +.p-55 { + padding: 55px; +} - .p-t-55 { - padding-top: 55px - } +.p-t-55 { + padding-top: 55px; +} - .p-r-55 { - padding-right: 55px - } +.p-r-55 { + padding-right: 55px; +} - .p-b-55 { - padding-bottom: 55px - } +.p-b-55 { + padding-bottom: 55px; +} - .p-l-55 { - padding-left: 55px - } +.p-l-55 { + padding-left: 55px; +} - .p-v-55 { - padding: 55px 0 - } +.p-v-55 { + padding: 55px 0; +} - .p-h-55 { - padding: 0 55px - } +.p-h-55 { + padding: 0 55px; +} - .p-60 { - padding: 60px - } +.p-60 { + padding: 60px; +} - .p-t-60 { - padding-top: 60px - } +.p-t-60 { + padding-top: 60px; +} - .p-r-60 { - padding-right: 60px - } +.p-r-60 { + padding-right: 60px; +} - .p-b-60 { - padding-bottom: 60px - } +.p-b-60 { + padding-bottom: 60px; +} - .p-l-60 { - padding-left: 60px - } +.p-l-60 { + padding-left: 60px; +} - .p-v-60 { - padding: 60px 0 - } +.p-v-60 { + padding: 60px 0; +} - .p-h-60 { - padding: 0 60px - } +.p-h-60 { + padding: 0 60px; +} - .p-65 { - padding: 65px - } +.p-65 { + padding: 65px; +} - .p-t-65 { - padding-top: 65px - } +.p-t-65 { + padding-top: 65px; +} - .p-r-65 { - padding-right: 65px - } +.p-r-65 { + padding-right: 65px; +} - .p-b-65 { - padding-bottom: 65px - } +.p-b-65 { + padding-bottom: 65px; +} - .p-l-65 { - padding-left: 65px - } +.p-l-65 { + padding-left: 65px; +} - .p-v-65 { - padding: 65px 0 - } +.p-v-65 { + padding: 65px 0; +} - .p-h-65 { - padding: 0 65px - } +.p-h-65 { + padding: 0 65px; +} - .p-70 { - padding: 70px - } +.p-70 { + padding: 70px; +} - .p-t-70 { - padding-top: 70px - } +.p-t-70 { + padding-top: 70px; +} - .p-r-70 { - padding-right: 70px - } +.p-r-70 { + padding-right: 70px; +} - .p-b-70 { - padding-bottom: 70px - } +.p-b-70 { + padding-bottom: 70px; +} - .p-l-70 { - padding-left: 70px - } +.p-l-70 { + padding-left: 70px; +} - .p-v-70 { - padding: 70px 0 - } +.p-v-70 { + padding: 70px 0; +} - .p-h-70 { - padding: 0 70px - } +.p-h-70 { + padding: 0 70px; +} - .p-75 { - padding: 75px - } +.p-75 { + padding: 75px; +} - .p-t-75 { - padding-top: 75px - } +.p-t-75 { + padding-top: 75px; +} - .p-r-75 { - padding-right: 75px - } +.p-r-75 { + padding-right: 75px; +} - .p-b-75 { - padding-bottom: 75px - } +.p-b-75 { + padding-bottom: 75px; +} - .p-l-75 { - padding-left: 75px - } +.p-l-75 { + padding-left: 75px; +} - .p-v-75 { - padding: 75px 0 - } +.p-v-75 { + padding: 75px 0; +} - .p-h-75 { - padding: 0 75px - } +.p-h-75 { + padding: 0 75px; +} - .p-80 { - padding: 80px - } +.p-80 { + padding: 80px; +} - .p-t-80 { - padding-top: 80px - } +.p-t-80 { + padding-top: 80px; +} - .p-r-80 { - padding-right: 80px - } +.p-r-80 { + padding-right: 80px; +} - .p-b-80 { - padding-bottom: 80px - } +.p-b-80 { + padding-bottom: 80px; +} - .p-l-80 { - padding-left: 80px - } +.p-l-80 { + padding-left: 80px; +} - .p-v-80 { - padding: 80px 0 - } +.p-v-80 { + padding: 80px 0; +} - .p-h-80 { - padding: 0 80px - } +.p-h-80 { + padding: 0 80px; +} - .no-p { - padding: 0px - } +.no-p { + padding: 0px; +} - .no-p-t { - padding-top: 0px - } +.no-p-t { + padding-top: 0px; +} - .no-p-r { - padding-right: 0px - } +.no-p-r { + padding-right: 0px; +} - .no-p-b { - padding-bottom: 0px - } +.no-p-b { + padding-bottom: 0px; +} - .no-p-l { - padding-left: 0px - } +.no-p-l { + padding-left: 0px; +} - .no-p-v { - padding: 0px 0 - } +.no-p-v { + padding: 0px 0; +} - .no-p-h { - padding: 0 0px - } +.no-p-h { + padding: 0 0px; +} - .m-5 { - margin: 5px - } +.m-5 { + margin: 5px; +} - .m-t-5 { - margin-top: 5px - } +.m-t-5 { + margin-top: 5px; +} - .m-r-5 { - margin-right: 5px - } +.m-r-5 { + margin-right: 5px; +} - .m-b-5 { - margin-bottom: 5px - } +.m-b-5 { + margin-bottom: 5px; +} - .m-l-5 { - margin-left: 5px - } +.m-l-5 { + margin-left: 5px; +} - .m-v-5 { - margin: 5px 0 - } +.m-v-5 { + margin: 5px 0; +} - .m-h-5 { - margin: 0 5px - } +.m-h-5 { + margin: 0 5px; +} - .m-10 { - margin: 10px - } +.m-10 { + margin: 10px; +} - .m-t-10 { - margin-top: 10px - } +.m-t-10 { + margin-top: 10px; +} - .m-r-10 { - margin-right: 10px - } +.m-r-10 { + margin-right: 10px; +} - .m-b-10 { - margin-bottom: 10px - } +.m-b-10 { + margin-bottom: 10px; +} - .m-l-10 { - margin-left: 10px - } +.m-l-10 { + margin-left: 10px; +} - .m-v-10 { - margin: 10px 0 - } +.m-v-10 { + margin: 10px 0; +} - .m-h-10 { - margin: 0 10px - } +.m-h-10 { + margin: 0 10px; +} - .m-15 { - margin: 15px - } +.m-15 { + margin: 15px; +} - .m-t-15 { - margin-top: 15px - } +.m-t-15 { + margin-top: 15px; +} - .m-r-15 { - margin-right: 15px - } +.m-r-15 { + margin-right: 15px; +} - .m-b-15 { - margin-bottom: 15px - } +.m-b-15 { + margin-bottom: 15px; +} - .m-l-15 { - margin-left: 15px - } +.m-l-15 { + margin-left: 15px; +} - .m-v-15 { - margin: 15px 0 - } +.m-v-15 { + margin: 15px 0; +} - .m-h-15 { - margin: 0 15px - } +.m-h-15 { + margin: 0 15px; +} - .m-20 { - margin: 20px - } +.m-20 { + margin: 20px; +} - .m-t-20 { - margin-top: 20px - } +.m-t-20 { + margin-top: 20px; +} - .m-r-20 { - margin-right: 20px - } +.m-r-20 { + margin-right: 20px; +} - .m-b-20 { - margin-bottom: 20px - } +.m-b-20 { + margin-bottom: 20px; +} - .m-l-20 { - margin-left: 20px - } +.m-l-20 { + margin-left: 20px; +} - .m-v-20 { - margin: 20px 0 - } +.m-v-20 { + margin: 20px 0; +} - .m-h-20 { - margin: 0 20px - } +.m-h-20 { + margin: 0 20px; +} - .m-25 { - margin: 25px - } +.m-25 { + margin: 25px; +} - .m-t-25 { - margin-top: 25px - } +.m-t-25 { + margin-top: 25px; +} - .m-r-25 { - margin-right: 25px - } +.m-r-25 { + margin-right: 25px; +} - .m-b-25 { - margin-bottom: 25px - } +.m-b-25 { + margin-bottom: 25px; +} - .m-l-25 { - margin-left: 25px - } +.m-l-25 { + margin-left: 25px; +} - .m-v-25 { - margin: 25px 0 - } +.m-v-25 { + margin: 25px 0; +} - .m-h-25 { - margin: 0 25px - } +.m-h-25 { + margin: 0 25px; +} - .m-30 { - margin: 30px - } +.m-30 { + margin: 30px; +} - .m-t-30 { - margin-top: 30px - } +.m-t-30 { + margin-top: 30px; +} - .m-r-30 { - margin-right: 30px - } +.m-r-30 { + margin-right: 30px; +} - .m-b-30 { - margin-bottom: 30px - } +.m-b-30 { + margin-bottom: 30px; +} - .m-l-30 { - margin-left: 30px - } +.m-l-30 { + margin-left: 30px; +} - .m-v-30 { - margin: 30px 0 - } +.m-v-30 { + margin: 30px 0; +} - .m-h-30 { - margin: 0 30px - } +.m-h-30 { + margin: 0 30px; +} - .m-35 { - margin: 35px - } +.m-35 { + margin: 35px; +} - .m-t-35 { - margin-top: 35px - } +.m-t-35 { + margin-top: 35px; +} - .m-r-35 { - margin-right: 35px - } +.m-r-35 { + margin-right: 35px; +} - .m-b-35 { - margin-bottom: 35px - } +.m-b-35 { + margin-bottom: 35px; +} - .m-l-35 { - margin-left: 35px - } +.m-l-35 { + margin-left: 35px; +} - .m-v-35 { - margin: 35px 0 - } +.m-v-35 { + margin: 35px 0; +} - .m-h-35 { - margin: 0 35px - } +.m-h-35 { + margin: 0 35px; +} - .m-40 { - margin: 40px - } +.m-40 { + margin: 40px; +} - .m-t-40 { - margin-top: 40px - } +.m-t-40 { + margin-top: 40px; +} - .m-r-40 { - margin-right: 40px - } +.m-r-40 { + margin-right: 40px; +} - .m-b-40 { - margin-bottom: 40px - } +.m-b-40 { + margin-bottom: 40px; +} - .m-l-40 { - margin-left: 40px - } +.m-l-40 { + margin-left: 40px; +} - .m-v-40 { - margin: 40px 0 - } +.m-v-40 { + margin: 40px 0; +} - .m-h-40 { - margin: 0 40px - } +.m-h-40 { + margin: 0 40px; +} - .m-45 { - margin: 45px - } +.m-45 { + margin: 45px; +} - .m-t-45 { - margin-top: 45px - } +.m-t-45 { + margin-top: 45px; +} - .m-r-45 { - margin-right: 45px - } +.m-r-45 { + margin-right: 45px; +} - .m-b-45 { - margin-bottom: 45px - } +.m-b-45 { + margin-bottom: 45px; +} - .m-l-45 { - margin-left: 45px - } +.m-l-45 { + margin-left: 45px; +} - .m-v-45 { - margin: 45px 0 - } +.m-v-45 { + margin: 45px 0; +} - .m-h-45 { - margin: 0 45px - } +.m-h-45 { + margin: 0 45px; +} - .m-50 { - margin: 50px - } +.m-50 { + margin: 50px; +} - .m-t-50 { - margin-top: 50px - } +.m-t-50 { + margin-top: 50px; +} - .m-r-50 { - margin-right: 50px - } +.m-r-50 { + margin-right: 50px; +} - .m-b-50 { - margin-bottom: 50px - } +.m-b-50 { + margin-bottom: 50px; +} - .m-l-50 { - margin-left: 50px - } +.m-l-50 { + margin-left: 50px; +} - .m-v-50 { - margin: 50px 0 - } +.m-v-50 { + margin: 50px 0; +} - .m-h-50 { - margin: 0 50px - } +.m-h-50 { + margin: 0 50px; +} - .m-55 { - margin: 55px - } +.m-55 { + margin: 55px; +} - .m-t-55 { - margin-top: 55px - } +.m-t-55 { + margin-top: 55px; +} - .m-r-55 { - margin-right: 55px - } +.m-r-55 { + margin-right: 55px; +} - .m-b-55 { - margin-bottom: 55px - } +.m-b-55 { + margin-bottom: 55px; +} - .m-l-55 { - margin-left: 55px - } +.m-l-55 { + margin-left: 55px; +} - .m-v-55 { - margin: 55px 0 - } +.m-v-55 { + margin: 55px 0; +} - .m-h-55 { - margin: 0 55px - } +.m-h-55 { + margin: 0 55px; +} - .m-60 { - margin: 60px - } +.m-60 { + margin: 60px; +} - .m-t-60 { - margin-top: 60px - } +.m-t-60 { + margin-top: 60px; +} - .m-r-60 { - margin-right: 60px - } +.m-r-60 { + margin-right: 60px; +} - .m-b-60 { - margin-bottom: 60px - } +.m-b-60 { + margin-bottom: 60px; +} - .m-l-60 { - margin-left: 60px - } +.m-l-60 { + margin-left: 60px; +} - .m-v-60 { - margin: 60px 0 - } +.m-v-60 { + margin: 60px 0; +} - .m-h-60 { - margin: 0 60px - } +.m-h-60 { + margin: 0 60px; +} - .m-65 { - margin: 65px - } +.m-65 { + margin: 65px; +} - .m-t-65 { - margin-top: 65px - } +.m-t-65 { + margin-top: 65px; +} - .m-r-65 { - margin-right: 65px - } +.m-r-65 { + margin-right: 65px; +} - .m-b-65 { - margin-bottom: 65px - } +.m-b-65 { + margin-bottom: 65px; +} - .m-l-65 { - margin-left: 65px - } +.m-l-65 { + margin-left: 65px; +} - .m-v-65 { - margin: 65px 0 - } +.m-v-65 { + margin: 65px 0; +} - .m-h-65 { - margin: 0 65px - } +.m-h-65 { + margin: 0 65px; +} - .m-70 { - margin: 70px - } +.m-70 { + margin: 70px; +} - .m-t-70 { - margin-top: 70px - } +.m-t-70 { + margin-top: 70px; +} - .m-r-70 { - margin-right: 70px - } +.m-r-70 { + margin-right: 70px; +} - .m-b-70 { - margin-bottom: 70px - } +.m-b-70 { + margin-bottom: 70px; +} - .m-l-70 { - margin-left: 70px - } +.m-l-70 { + margin-left: 70px; +} - .m-v-70 { - margin: 70px 0 - } +.m-v-70 { + margin: 70px 0; +} - .m-h-70 { - margin: 0 70px - } +.m-h-70 { + margin: 0 70px; +} - .m-75 { - margin: 75px - } +.m-75 { + margin: 75px; +} + +.m-t-75 { + margin-top: 75px; +} + +.m-r-75 { + margin-right: 75px; +} + +.m-b-75 { + margin-bottom: 75px; +} + +.m-l-75 { + margin-left: 75px; +} + +.m-v-75 { + margin: 75px 0; +} + +.m-h-75 { + margin: 0 75px; +} + +.m-80 { + margin: 80px; +} + +.m-t-80 { + margin-top: 80px; +} + +.m-r-80 { + margin-right: 80px; +} + +.m-b-80 { + margin-bottom: 80px; +} + +.m-l-80 { + margin-left: 80px; +} + +.m-v-80 { + margin: 80px 0; +} + +.m-h-80 { + margin: 0 80px; +} + +.no-m { + margin: 0px; +} + +.no-m-t { + margin-top: 0px; +} + +.no-m-r { + margin-right: 0px; +} + +.no-m-b { + margin-bottom: 0px; +} + +.no-m-l { + margin-left: 0px; +} + +.no-m-v { + margin: 0px 0; +} + +.no-m-h { + margin: 0 0px; +} + +.no-margin { + margin: 0 !important; +} + +.no-m-lr, +.no-m-rl { + margin-left: 0 !important; + margin-right: 0 !important; +} + +.no-m-tb, +.no-m-bt { + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.m-t-only { + margin-left: 0 !important; + margin-right: 0 !important; + margin-bottom: 0 !important; +} + +.m-b-only { + margin-left: 0 !important; + margin-right: 0 !important; + margin-top: 0 !important; +} + +.m-l-only { + margin-right: 0 !important; + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.m-r-only { + margin-left: 0 !important; + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.m-auto { + margin-left: auto; + margin-right: auto; +} + +.no-padding { + padding: 0 !important; +} + +.no-pad-lr, +.no-pad-rl { + padding-left: 0 !important; + padding-right: 0 !important; +} + +.no-pad-tb, +.no-pad-bt { + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.pad-t-only { + padding-left: 0 !important; + padding-right: 0 !important; + padding-bottom: 0 !important; +} + +.pad-b-only { + padding-left: 0 !important; + padding-right: 0 !important; + padding-top: 0 !important; +} + +.pad-l-only { + padding-right: 0 !important; + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.pad-r-only { + padding-left: 0 !important; + padding-top: 0 !important; + padding-bottom: 0 !important; +} + +.no-border { + border: none !important; +} + +.no-border-t { + border-top: none !important; +} + +.no-border-r { + border-right: none !important; +} + +.no-border-b { + border-bottom: none !important; +} + +.no-border-l { + border-left: none !important; +} + +.no-border-lr, +.no-border-rl { + border-left: none !important; + border-right: none !important; +} + +.no-border-tb, +.no-border-bt { + border-top: none !important; + border-bottom: none !important; +} + +.no-border-tl, +.no-border-lt { + border-top: none !important; + border-left: none !important; +} + +.no-border-tr, +.no-border-rt { + border-top: none !important; + border-right: none !important; +} + +.no-border-bl, +.no-border-lb { + border-bottom: none !important; + border-left: none !important; +} + +.no-border-br, +.no-border-rb { + border-bottom: none !important; + border-right: none !important; +} + +.border-dashed { + border-style: dashed !important; +} + +.border-dotted { + border-style: dashed !important; +} + +.border-black { + border-color: black; +} + +.border-light-grey { + border-color: #e5e5e5; +} + +.border-medium-grey { + border-color: #cccccc; +} + +.border-grey { + border-color: #999999; +} + +.border-dark-grey { + border-color: #222222; +} + +.border-white, +.border-fff { + border-color: #fff; +} + +.bg-black { + background-color: #000; +} + +.bg-light-grey { + background-color: #e5e5e5; +} + +.bg-medium-grey { + background-color: #cccccc; +} + +.bg-grey { + background-color: #999999; +} + +.bg-dark-grey { + background-color: #222222; +} + +.bg-white, +.bg-fff { + background-color: white; +} + +.bg-none, +.no-bg { + background: none; + background-image: none; + background-color: transparent; +} + +.bg-facebook { + background-color: #47639e; +} + +.bg-twitter { + background-color: #02a8f3; +} + +.lh-1 { + line-height: 1 !important; +} + +.lh-13 { + line-height: 1.3 !important; +} + +.lh-15 { + line-height: 1.5 !important; +} + +.bold, +.strong { + font-weight: bold; +} + +.no-bold { + font-weight: normal; +} + +.italic, +.em { + font-style: italic; +} + +.strike { + text-decoration: line-through; +} + +.normal { + font-weight: normal; + font-style: normal; +} + +.uppercase { + text-transform: uppercase; +} + +.text-left { + text-align: left !important; +} + +.text-center { + text-align: center !important; +} + +.text-right { + text-align: right !important; +} + +.mw400 { + max-width: 400px; +} + +.mw500 { + max-width: 500px; +} + +.mw600 { + max-width: 600px; +} + +.w100 { + font-weight: 100; +} + +.w200 { + font-weight: 200; +} + +.w300 { + font-weight: 300; +} + +.w400 { + font-weight: 400; +} + +.w500 { + font-weight: 500; +} + +.w600 { + font-weight: 600; +} + +.w700 { + font-weight: 700; +} + +.w800 { + font-weight: 800; +} + +.w900 { + font-weight: 900; +} + +.f9 { + font-size: 9px; +} + +.f10 { + font-size: 10px; +} + +.f11 { + font-size: 11px; +} + +.f12 { + font-size: 12px; +} + +.f13 { + font-size: 13px; +} + +.f14 { + font-size: 14px; +} + +.f15 { + font-size: 15px; +} + +.f16 { + font-size: 16px; +} + +.f17 { + font-size: 17px; +} + +.f18 { + font-size: 18px; + line-height: 30px; +} + +.f19 { + font-size: 19px; +} + +.f20 { + font-size: 20px; +} + +.f30 { + font-size: 30px; +} + +.f40 { + font-size: 40px; +} + +.f50 { + font-size: 50px; +} + +.f60 { + font-size: 60px; +} + +.size-small { + font-size: 75% !important; +} + +.size-normal { + font-size: 100% !important; +} + +.size-medium { + font-size: 125% !important; +} + +.size-big, +.size-large { + font-size: 150% !important; +} + +.size-huge { + font-size: 200% !important; +} + +.inherit { + font: inherit; +} + +.no-wrap { + white-space: nowrap; +} + +.auto-cell-size { + white-space: nowrap; + width: 1%; +} + +.ls-0 { + letter-spacing: -3px; + margin-left: 10px; + margin-right: 10px; + white-space: nowrap; +} + +.no-ul, +.no-ul:hover, +.no-ul a, +.no-ul a:hover { + text-decoration: none; +} + +.color-inherit { + color: inherit; +} + +.clear { + clear: both; +} + +.clear:after { + display: table; + content: " "; + clear: both; +} + +.f-left { + float: left; +} + +.f-right { + float: right; +} + +.f-none { + float: none; +} + +.block { + display: block !important; +} + +.inline { + display: inline !important; +} + +.in-block { + display: inline-block !important; + *display: inline !important; + zoom: 1; +} + +.d-none, +.hide, +.hidden { + display: none !important; +} + +.rel, +.relative { + position: relative !important; +} + +.abs, +.absolute { + position: absolute; +} + +.fixed { + position: fixed; +} + +.t-0 { + top: 0; +} + +.b-0 { + bottom: 0; +} + +.l-0 { + left: 0; +} + +.r-0 { + right: 0; +} + +.tb-0 { + top: 0; + bottom: 0; +} + +.lr-0 { + left: 0; + right: 0; +} + +.v-mid, +.v-m { + vertical-align: middle !important; +} + +.v-top, +.v-t { + vertical-align: top !important; +} + +.v-bottom, +.v-b { + vertical-align: bottom !important; +} + +.v-super { + vertical-align: super !important; +} + +.full-input input, +.full-input select, +.full-input textarea { + width: 100%; +} + +.normal input, +.normal select, +.normal textarea, +.full-input input[type="checkbox"], +.full-input input[type="radio"] { + width: auto; +} + +.no-shadow { + box-shadow: none !important; +} + +.no-border-radius { + border-radius: 0 !important; +} + +.overflow-x-scroll { + max-width: 100%; + overflow-x: auto; +} + +.overflow-no { + overflow: hidden; +} + +.overflow-auto { + overflow: auto; +} + +.overflow-scroll { + overflow: scroll; +} + +.relative { + position: relative; +} + +.pointer { + cursor: pointer; +} + +.fullwidth { + width: 100%; +} + +.nolist { + list-style: none; +} + +.text-shadow { + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); +} + +.radius3 { + border-radius: 3px; +} + +.radius5 { + border-radius: 5px; +} + +.radius10 { + border-radius: 10px; +} + +.text-rgb-2 { + color: rgba(0, 0, 0, 0.2); +} + +.text-rgb-3 { + color: rgba(0, 0, 0, 0.3); +} + +.text-rgb-4 { + color: rgba(0, 0, 0, 0.4); +} + +.text-rgb-5 { + color: rgba(0, 0, 0, 0.5); +} + +textarea { + resize: both; +} + +textarea.vertical { + resize: vertical; +} + +textarea.horizontal { + resize: vertical; +} + +textarea.noresize { + resize: none; +} + +.status-active { + color: $status-active; +} + +.status-deleted { + color: $status-deleted; +} + +.status-pending { + color: $status-pending; +} + +.status-approved { + color: $status-approved; +} + +.status-overpaid { + color: $status-overpaid; +} + +.status-active-overdue { + color: $status-active-overdue; +} - .m-t-75 { - margin-top: 75px - } - - .m-r-75 { - margin-right: 75px - } - - .m-b-75 { - margin-bottom: 75px - } - - .m-l-75 { - margin-left: 75px - } - - .m-v-75 { - margin: 75px 0 - } - - .m-h-75 { - margin: 0 75px - } - - .m-80 { - margin: 80px - } - - .m-t-80 { - margin-top: 80px - } - - .m-r-80 { - margin-right: 80px - } - - .m-b-80 { - margin-bottom: 80px - } - - .m-l-80 { - margin-left: 80px - } - - .m-v-80 { - margin: 80px 0 - } - - .m-h-80 { - margin: 0 80px - } - - .no-m { - margin: 0px - } - - .no-m-t { - margin-top: 0px - } - - .no-m-r { - margin-right: 0px - } - - .no-m-b { - margin-bottom: 0px - } - - .no-m-l { - margin-left: 0px - } - - .no-m-v { - margin: 0px 0 - } - - .no-m-h { - margin: 0 0px - } - - .no-margin { - margin: 0 !important - } - - .no-m-lr,.no-m-rl { - margin-left: 0 !important; - margin-right: 0 !important - } - - .no-m-tb,.no-m-bt { - margin-top: 0 !important; - margin-bottom: 0 !important - } - - .m-t-only { - margin-left: 0 !important; - margin-right: 0 !important; - margin-bottom: 0 !important - } - - .m-b-only { - margin-left: 0 !important; - margin-right: 0 !important; - margin-top: 0 !important - } - - .m-l-only { - margin-right: 0 !important; - margin-top: 0 !important; - margin-bottom: 0 !important - } - - .m-r-only { - margin-left: 0 !important; - margin-top: 0 !important; - margin-bottom: 0 !important - } - - .m-auto { - margin-left: auto; - margin-right: auto - } - - .no-padding { - padding: 0 !important - } - - .no-pad-lr,.no-pad-rl { - padding-left: 0 !important; - padding-right: 0 !important - } - - .no-pad-tb,.no-pad-bt { - padding-top: 0 !important; - padding-bottom: 0 !important - } - - .pad-t-only { - padding-left: 0 !important; - padding-right: 0 !important; - padding-bottom: 0 !important - } - - .pad-b-only { - padding-left: 0 !important; - padding-right: 0 !important; - padding-top: 0 !important - } - - .pad-l-only { - padding-right: 0 !important; - padding-top: 0 !important; - padding-bottom: 0 !important - } - - .pad-r-only { - padding-left: 0 !important; - padding-top: 0 !important; - padding-bottom: 0 !important - } - - .no-border { - border: none !important - } - - .no-border-t { - border-top: none !important - } - - .no-border-r { - border-right: none !important - } - - .no-border-b { - border-bottom: none !important - } - - .no-border-l { - border-left: none !important - } - - .no-border-lr,.no-border-rl { - border-left: none !important; - border-right: none !important - } - - .no-border-tb,.no-border-bt { - border-top: none !important; - border-bottom: none !important - } - - .no-border-tl,.no-border-lt { - border-top: none !important; - border-left: none !important - } - - .no-border-tr,.no-border-rt { - border-top: none !important; - border-right: none !important - } - - .no-border-bl,.no-border-lb { - border-bottom: none !important; - border-left: none !important - } - - .no-border-br,.no-border-rb { - border-bottom: none !important; - border-right: none !important - } - - .border-dashed { - border-style: dashed !important - } - - .border-dotted { - border-style: dashed !important - } - - .border-black { - border-color: black - } - - .border-light-grey { - border-color: #e5e5e5 - } - - .border-medium-grey { - border-color: #cccccc - } - - .border-grey { - border-color: #999999 - } - - .border-dark-grey { - border-color: #222222 - } - - .border-white,.border-fff { - border-color: #fff - } - - .bg-black { - background-color: #000 - } - - .bg-light-grey { - background-color: #e5e5e5 - } - - .bg-medium-grey { - background-color: #cccccc - } - - .bg-grey { - background-color: #999999 - } - - .bg-dark-grey { - background-color: #222222 - } - - .bg-white,.bg-fff { - background-color: white - } - - .bg-none,.no-bg { - background: none; - background-image: none; - background-color: transparent - } - - .bg-facebook { - background-color: #47639E - } - - .bg-twitter { - background-color: #02A8F3 - } - - .lh-1 { - line-height: 1 !important - } - - .lh-13 { - line-height: 1.3 !important - } - - .lh-15 { - line-height: 1.5 !important - } - - .bold,.strong { - font-weight: bold - } - - .no-bold { - font-weight: normal - } - - .italic,.em { - font-style: italic - } - - .strike { - text-decoration: line-through - } - - .normal { - font-weight: normal; - font-style: normal - } +.status-active-overdue { + color: $status-active-overdue; +} - .uppercase { - text-transform: uppercase - } - - .text-left { - text-align: left !important - } - - .text-center { - text-align: center !important - } - - .text-right { - text-align: right !important - } - - .mw400 { - max-width: 400px - } - - .mw500 { - max-width: 500px - } - - .mw600 { - max-width: 600px - } - - .w100 { - font-weight: 100 - } - - .w200 { - font-weight: 200 - } - - .w300 { - font-weight: 300 - } - - .w400 { - font-weight: 400 - } - - .w500 { - font-weight: 500 - } - - .w600 { - font-weight: 600 - } - - .w700 { - font-weight: 700 - } - - .w800 { - font-weight: 800 - } - - .w900 { - font-weight: 900 - } - - .f9 { - font-size: 9px - } - - .f10 { - font-size: 10px - } - - .f11 { - font-size: 11px - } - - .f12 { - font-size: 12px - } - - .f13 { - font-size: 13px - } - - .f14 { - font-size: 14px - } - - .f15 { - font-size: 15px - } - - .f16 { - font-size: 16px - } - - .f17 { - font-size: 17px - } - - .f18 { - font-size: 18px; - line-height: 30px - } - - .f19 { - font-size: 19px - } - - .f20 { - font-size: 20px - } - - .f30 { - font-size: 30px - } - - .f40 { - font-size: 40px - } - - .f50 { - font-size: 50px - } - - .f60 { - font-size: 60px - } - - .size-small { - font-size: 75% !important - } - - .size-normal { - font-size: 100% !important - } - - .size-medium { - font-size: 125% !important - } - - .size-big,.size-large { - font-size: 150% !important - } - - .size-huge { - font-size: 200% !important - } - - .inherit { - font: inherit - } - - .no-wrap { - white-space: nowrap - } - - .auto-cell-size { - white-space: nowrap; - width: 1% - } - - .ls-0 { - letter-spacing: -3px; - margin-left: 10px; - margin-right: 10px; - white-space: nowrap - } - - .no-ul,.no-ul:hover,.no-ul a,.no-ul a:hover { - text-decoration: none - } - - .color-inherit { - color: inherit - } - - .clear { - clear: both - } - - .clear:after { - display: table; - content: " "; - clear: both - } - - .f-left { - float: left - } - - .f-right { - float: right - } - - .f-none { - float: none - } - - .block { - display: block !important - } - - .inline { - display: inline !important - } - - .in-block { - display: inline-block !important; - *display: inline !important; - zoom:1} - - .d-none,.hide,.hidden { - display: none !important - } - - .rel,.relative { - position: relative !important - } - - .abs,.absolute { - position: absolute - } - - .fixed { - position: fixed - } - - .t-0 { - top: 0 - } - - .b-0 { - bottom: 0 - } - - .l-0 { - left: 0 - } - - .r-0 { - right: 0 - } - - .tb-0 { - top: 0; - bottom: 0 - } - - .lr-0 { - left: 0; - right: 0 - } - - .v-mid,.v-m { - vertical-align: middle !important - } - - .v-top,.v-t { - vertical-align: top !important - } - - .v-bottom,.v-b { - vertical-align: bottom !important - } - - .v-super { - vertical-align: super !important - } - - .full-input input,.full-input select,.full-input textarea { - width: 100% - } - - .normal input,.normal select,.normal textarea,.full-input input[type=checkbox],.full-input input[type=radio] { - width: auto - } - - .no-shadow { - box-shadow: none !important - } - - .no-border-radius { - border-radius: 0 !important - } - - .overflow-x-scroll { - max-width: 100%; - overflow-x: auto - } - - .overflow-no { - overflow: hidden - } - - .overflow-auto { - overflow: auto - } - - .overflow-scroll { - overflow: scroll - } - - .relative { - position: relative - } - - .pointer { - cursor: pointer - } - - .fullwidth { - width: 100% - } - - .nolist { - list-style: none - } - - .text-shadow { - text-shadow: 1px 1px 1px rgba(0,0,0,0.4) - } - - .radius3 { - border-radius: 3px - } - - .radius5 { - border-radius: 5px - } - - .radius10 { - border-radius: 10px - } - - .text-rgb-2 { - color: rgba(0,0,0,0.2) - } - - .text-rgb-3 { - color: rgba(0,0,0,0.3) - } - - .text-rgb-4 { - color: rgba(0,0,0,0.4) - } - - .text-rgb-5 { - color: rgba(0,0,0,0.5) - } - - textarea { - resize: both - } - - textarea.vertical { - resize: vertical - } - - textarea.horizontal { - resize: vertical - } - - textarea.noresize { - resize: none - } +.status-matured { + color: $status-matured; +} diff --git a/src/theme/custom/denim-yellowgreen.scss b/src/theme/custom/denim-yellowgreen.scss index 0e0b439d9..bef500396 100644 --- a/src/theme/custom/denim-yellowgreen.scss +++ b/src/theme/custom/denim-yellowgreen.scss @@ -1,6 +1,6 @@ @import '~@angular/material/theming'; // Plus imports for other components in your app. - +@import '../../app/clients/clients-view/clients-view.component-theme.scss'; // Custom material palette $mat-denim: ( 100: #5ba2ec, @@ -45,3 +45,4 @@ $mifosx-app-theme: mat-light-theme($mifosx-app-primary, $mifosx-app-accent, $mif // Alternatively, you can import and @include the theme mixins for each component // that you are using. @include angular-material-theme($mifosx-app-theme); +@include clients-view-component-theme($mifosx-app-theme); diff --git a/src/theme/custom/pictonblue-yellowgreen.scss b/src/theme/custom/pictonblue-yellowgreen.scss index 5bfec5fc1..9e36753e9 100644 --- a/src/theme/custom/pictonblue-yellowgreen.scss +++ b/src/theme/custom/pictonblue-yellowgreen.scss @@ -1,6 +1,6 @@ @import '~@angular/material/theming'; // Plus imports for other components in your app. - +@import '../../app/clients/clients-view/clients-view.component-theme.scss'; // Custom material palette $mat-picton-blue: ( 100: #6ce0ff, @@ -45,3 +45,4 @@ $mifosx-app-theme: mat-light-theme($mifosx-app-primary, $mifosx-app-accent, $mif // Alternatively, you can import and @include the theme mixins for each component // that you are using. @include angular-material-theme($mifosx-app-theme); +@include clients-view-component-theme($mifosx-app-theme); \ No newline at end of file