You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@fineract.apache.org by my...@apache.org on 2018/06/28 06:59:59 UTC
[fineract-cn-group-finance] 05/16: working on the accounting
components
This is an automated email from the ASF dual-hosted git repository.
myrle pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/fineract-cn-group-finance.git
commit bd10f97e938e896aa74d4002fb6d068e7eeb89a7
Author: pembemiriam <pe...@skylabase.com>
AuthorDate: Sat May 26 08:28:27 2018 +0100
working on the accounting components
---
.angular-cli.json | 4 +-
package-lock.json | 5 +-
src/app/accounting/accounting.component.html | 69 +++++++++
src/app/accounting/accounting.component.scss | 30 ++++
src/app/accounting/accounting.component.spec.ts | 25 ++++
src/app/accounting/accounting.component.ts | 15 ++
.../general-ledger/general-ledger.component.html | 57 +++++++
.../general-ledger/general-ledger.component.scss | 18 +++
.../general-ledger.component.spec.ts | 25 ++++
.../general-ledger/general-ledger.component.ts | 38 +++++
src/app/app.component.html | 2 +-
src/app/{app.component.css => app.component.scss} | 0
src/app/app.component.ts | 2 +-
src/app/app.module.ts | 95 +++++++++++-
src/app/dashboard/dashboard.component.html | 37 +++++
src/app/dashboard/dashboard.component.scss | 23 +++
src/app/dashboard/dashboard.component.spec.ts | 25 ++++
src/app/dashboard/dashboard.component.ts | 15 ++
src/app/login/login.component.html | 2 +-
src/app/login/login.component.ts | 6 +-
src/app/navbar/navbar.component.html | 163 +++++++++++++++++++++
src/app/navbar/navbar.component.scss | 81 ++++++++++
src/app/navbar/navbar.component.spec.ts | 25 ++++
src/app/navbar/navbar.component.ts | 15 ++
src/index.html | 1 +
src/main.ts | 1 +
src/{styles.css => styles.scss} | 0
27 files changed, 764 insertions(+), 15 deletions(-)
diff --git a/.angular-cli.json b/.angular-cli.json
index e72640e..f3e3c41 100644
--- a/.angular-cli.json
+++ b/.angular-cli.json
@@ -19,7 +19,7 @@
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
- "styles.css"
+ "styles.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
@@ -54,7 +54,7 @@
}
},
"defaults": {
- "styleExt": "css",
+ "styleExt": "scss",
"component": {}
}
}
diff --git a/package-lock.json b/package-lock.json
index 08973e7..67feb85 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4093,8 +4093,7 @@
"jsbn": {
"version": "0.1.1",
"bundled": true,
- "dev": true,
- "optional": true
+ "dev": true
},
"json-schema": {
"version": "0.2.3",
@@ -5079,7 +5078,7 @@
}
},
"hoek": {
- "version": "5.0.3",
+ "version": "2.16.3",
"resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
"integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
"dev": true
diff --git a/src/app/accounting/accounting.component.html b/src/app/accounting/accounting.component.html
new file mode 100644
index 0000000..a5e7739
--- /dev/null
+++ b/src/app/accounting/accounting.component.html
@@ -0,0 +1,69 @@
+<div class="my-div mat-elevation-z2">
+ <h3 class="heading">Accounting</h3>
+ <hr>
+ <mat-card class="card">
+ <mat-list>
+ <mat-list-item>
+ <a [routerLink]="['/navbar/frequentpostings']">
+ <mat-icon>domain</mat-icon>Chart of accounts
+ <br> List of the accounts used by the organisation
+ </a>
+ </mat-list-item>
+ <mat-divider></mat-divider>
+ <mat-list-item>
+ <a [routerLink]="['/navbar/addjournalentry']">
+ <mat-icon>add</mat-icon>Journal Entries
+ <br> Manual journal entry transactions recorded in a journal
+ </a>
+ </mat-list-item>
+ <mat-divider></mat-divider>
+ <mat-list-item>
+ <a [routerLink]="['/navbar/searchjournal']">
+ <mat-icon>search</mat-icon>Transaction Types
+ <br> Advance search option for journal entries
+ </a>
+ </mat-list-item>
+ <mat-divider></mat-divider>
+ <mat-list-item>
+ <a [routerLink]="['/navbar/financialactivity']">
+ <mat-icon>shuffle</mat-icon>Cheque Clearing
+ <br> List of Financial Activity and GL Accounnt Mappings
+ </a>
+ </mat-list-item>
+
+ </mat-list>
+ </mat-card>
+
+ <mat-card class="card1">
+ <mat-list>
+ <mat-list-item>
+ <a [routerLink]="['/navbar/chartaccount']">
+ <mat-icon>domain</mat-icon>Trial Balance
+ <br> List of the accounts used by the organisation
+ </a>
+ </mat-list-item>
+ <mat-divider></mat-divider>
+ <mat-list-item>
+ <a [routerLink]="['/navbar/accountclosure']">
+ <mat-icon>folder</mat-icon>Income Statement
+ <br> Journal Entries made at the end of the accounting period
+ </a>
+ </mat-list-item>
+ <mat-divider></mat-divider>
+ <mat-list-item>
+ <a [routerLink]="['/navbar/accountingrules']">
+ <mat-icon>lock</mat-icon>Financial Condition
+ <br> Lists all Accounting rules
+ </a>
+ </mat-list-item>
+ <mat-divider></mat-divider>
+ <mat-list-item>
+ <a [routerLink]="['/navbar/accruals']">
+ <mat-icon>settings</mat-icon>Payroll
+ <br> Accrues income,expenses and liabilities as on the provided date
+ </a>
+ </mat-list-item>
+
+ </mat-list>
+ </mat-card>
+</div>
\ No newline at end of file
diff --git a/src/app/accounting/accounting.component.scss b/src/app/accounting/accounting.component.scss
new file mode 100644
index 0000000..c61cc2b
--- /dev/null
+++ b/src/app/accounting/accounting.component.scss
@@ -0,0 +1,30 @@
+.my-div{
+ margin-left: 2%;
+ margin-right:2%;
+ border-radius: 5px 5px 5px 5px;
+ background-color: #e6e6ff;
+ min-height: 100%;
+
+}
+
+.card1{
+ margin-right:20px;
+ margin-left:20px;
+}
+
+mat-list-item {
+ padding-top: 10px;
+ font-size: 14px;
+ padding-bottom: 10px;
+}
+.card,.card1{
+
+ display:inline-block;
+
+ vertical-align: top;
+ width:40%;
+
+}
+.card{
+ margin-left:2%;
+}
diff --git a/src/app/accounting/accounting.component.spec.ts b/src/app/accounting/accounting.component.spec.ts
new file mode 100644
index 0000000..2a38b7f
--- /dev/null
+++ b/src/app/accounting/accounting.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountingComponent } from './accounting.component';
+
+describe('AccountingComponent', () => {
+ let component: AccountingComponent;
+ let fixture: ComponentFixture<AccountingComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ AccountingComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(AccountingComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/accounting/accounting.component.ts b/src/app/accounting/accounting.component.ts
new file mode 100644
index 0000000..81d10ad
--- /dev/null
+++ b/src/app/accounting/accounting.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-accounting',
+ templateUrl: './accounting.component.html',
+ styleUrls: ['./accounting.component.scss']
+})
+export class AccountingComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/app/accounting/general-ledger/general-ledger.component.html b/src/app/accounting/general-ledger/general-ledger.component.html
new file mode 100644
index 0000000..23f3357
--- /dev/null
+++ b/src/app/accounting/general-ledger/general-ledger.component.html
@@ -0,0 +1,57 @@
+<div class="my-div mat-elevation-z2">
+ <h3 class="heading">General Ledger</h3>
+ <mat-divider></mat-divider>
+ <button>Add Ledger</button>
+ <mat-form-field>
+ <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter by name/short name">
+ </mat-form-field>
+ <a mat-raised-button class="fineract-button" color="primary" [routerLink]="['/navbar/managereport/create']">
+ <mat-icon>add</mat-icon>Create Report</a>
+
+<br>
+<mat-divider></mat-divider>
+
+<mat-table #table [dataSource]="dataSource">
+
+ <!-- Position Column -->
+ <ng-container matColumnDef="name">
+ <mat-header-cell *matHeaderCellDef>Report Name </mat-header-cell>
+ <mat-cell *matCellDef="let element">
+ <a routerLink="{{element.name}}">{{element.name}}</a>
+ </mat-cell>
+ </ng-container>
+
+ <!-- Name Column -->
+ <ng-container matColumnDef="type">
+ <mat-header-cell *matHeaderCellDef> Report Type</mat-header-cell>
+ <mat-cell *matCellDef="let element"> {{element.type}} </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="subtype">
+ <mat-header-cell *matHeaderCellDef>Report Subtype</mat-header-cell>
+ <mat-cell *matCellDef="let element"> {{element.subtype}} </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="category">
+ <mat-header-cell *matHeaderCellDef> Report Category</mat-header-cell>
+ <mat-cell *matCellDef="let element"> {{element.category} </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="core">
+ <mat-header-cell *matHeaderCellDef>Core Report</mat-header-cell>
+ <mat-cell *matCellDef="let element"> {{element.core}} </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="user">
+ <mat-header-cell *matHeaderCellDef> User Report</mat-header-cell>
+ <mat-cell *matCellDef="let element"> {{element.user}} </mat-cell>
+ </ng-container>
+
+
+
+
+ <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+ <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+</mat-table>
+
+
+</div>
+
\ No newline at end of file
diff --git a/src/app/accounting/general-ledger/general-ledger.component.scss b/src/app/accounting/general-ledger/general-ledger.component.scss
new file mode 100644
index 0000000..82cb099
--- /dev/null
+++ b/src/app/accounting/general-ledger/general-ledger.component.scss
@@ -0,0 +1,18 @@
+.my-div{
+ margin-left: 2%;
+ margin-right:2%;
+ border-radius: 5px 5px 5px 5px;
+ background-color: #e6e6ff;
+ min-height: 100%;
+
+}
+table {
+ width: 100%;
+ }
+
+ .mat-form-field {
+ font-size: 14px;
+ width: 100%;
+ }
+
+
\ No newline at end of file
diff --git a/src/app/accounting/general-ledger/general-ledger.component.spec.ts b/src/app/accounting/general-ledger/general-ledger.component.spec.ts
new file mode 100644
index 0000000..8cfe52a
--- /dev/null
+++ b/src/app/accounting/general-ledger/general-ledger.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GeneralLedgerComponent } from './general-ledger.component';
+
+describe('GeneralLedgerComponent', () => {
+ let component: GeneralLedgerComponent;
+ let fixture: ComponentFixture<GeneralLedgerComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ GeneralLedgerComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(GeneralLedgerComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/accounting/general-ledger/general-ledger.component.ts b/src/app/accounting/general-ledger/general-ledger.component.ts
new file mode 100644
index 0000000..4612e79
--- /dev/null
+++ b/src/app/accounting/general-ledger/general-ledger.component.ts
@@ -0,0 +1,38 @@
+import { Component, OnInit } from '@angular/core';
+import {MatTableDataSource} from '@angular/material';
+
+@Component({
+ selector: 'app-general-ledger',
+ templateUrl: './general-ledger.component.html',
+ styleUrls: ['./general-ledger.component.scss']
+})
+export class GeneralLedgerComponent implements OnInit {
+ displayedColumns = ['name','type','subtype','category','core', 'user'];
+ dataSource = new MatTableDataSource(ELEMENT_DATA);
+
+ applyFilter(filterValue: string) {
+ filterValue = filterValue.trim(); // Remove whitespace
+ filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
+ this.dataSource.filter = filterValue;
+ }
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
+export interface Element {
+ name: string;
+ type:string;
+ subtype: string;
+ category:string;
+ core: string;
+ user:string;
+
+
+}
+
+const ELEMENT_DATA: Element[] = [
+
+];
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6fcb6f0..90c6b64 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1 @@
-<app-login></app-login>
\ No newline at end of file
+<router-outlet></router-outlet>
\ No newline at end of file
diff --git a/src/app/app.component.css b/src/app/app.component.scss
similarity index 100%
rename from src/app/app.component.css
rename to src/app/app.component.scss
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index cb3f820..57b1bce 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
+ styleUrls: ['./app.component.scss']
})
export class AppComponent {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index c9f9c66..36d04ea 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,21 +1,104 @@
import { BrowserModule } from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatButtonModule, MatCheckboxModule, MatInputModule, MatIconModule, MatFormFieldModule, MatSelectModule, MatSelect} from '@angular/material';
+import { RouterModule, Routes} from '@angular/router';
+import {
+ MatAutocompleteModule,
+ MatButtonModule,
+ MatButtonToggleModule,
+ MatCheckboxModule,
+ MatToolbarModule,
+ MatTooltipModule,
+ MatCardModule,
+ MatChipsModule,
+ MatDatepickerModule,
+ MatDialogModule,
+ MatExpansionModule,
+ MatFormFieldModule,
+ MatGridListModule,
+ MatIconModule,
+ MatInputModule,
+ MatListModule,
+ MatMenuModule,
+ MatNativeDateModule,
+ MatPaginatorModule,
+ MatProgressBarModule,
+ MatProgressSpinnerModule,
+ MatRadioModule,
+ MatRippleModule,
+ MatSelectModule,
+ MatSidenavModule,
+ MatSliderModule,
+ MatSlideToggleModule,
+ MatSnackBarModule,
+ MatSortModule,
+ MatTableModule,
+ MatTabsModule,
+ MatStepperModule
+ } from '@angular/material';
+
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
-import {LoginComponent} from './login/login.component'
+import {LoginComponent} from './login/login.component';
+import { NavbarComponent } from './navbar/navbar.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { AccountingComponent } from './accounting/accounting.component';
+import { GeneralLedgerComponent } from './accounting/general-ledger/general-ledger.component'
+
+const appRoutes: Routes = [
+ { path: 'login', component: LoginComponent },
+
+ {
+ path: 'navbar', component: NavbarComponent, children: [
+ { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
+ { path: 'dashboard', component: DashboardComponent },
+ { path: 'accounting', component: AccountingComponent },
+ { path: 'GL', component: GeneralLedgerComponent },
+ ]
+}
+];
@NgModule({
declarations: [
- AppComponent,LoginComponent
+ AppComponent,LoginComponent, NavbarComponent, DashboardComponent, AccountingComponent, GeneralLedgerComponent
],
- imports: [
- BrowserModule, BrowserAnimationsModule, MatButtonModule, MatCheckboxModule, MatInputModule, MatIconModule,
- MatFormFieldModule, MatSelectModule
+ imports: [RouterModule.forRoot(appRoutes),
+ BrowserModule, BrowserAnimationsModule,
+ MatAutocompleteModule,
+ MatButtonModule,
+ MatButtonToggleModule,
+ MatCheckboxModule,
+ MatToolbarModule,
+ MatTooltipModule,
+ MatCardModule,
+ MatChipsModule,
+ MatDatepickerModule,
+ MatDialogModule,
+ MatExpansionModule,
+ MatFormFieldModule,
+ MatGridListModule,
+ MatIconModule,
+ MatInputModule,
+ MatListModule,
+ MatMenuModule,
+ MatNativeDateModule,
+ MatPaginatorModule,
+ MatProgressBarModule,
+ MatProgressSpinnerModule,
+ MatRadioModule,
+ MatRippleModule,
+ MatSelectModule,
+ MatSidenavModule,
+ MatSliderModule,
+ MatSlideToggleModule,
+ MatSnackBarModule,
+ MatSortModule,
+ MatTableModule,
+ MatTabsModule,
+ MatStepperModule
],
providers: [],
bootstrap: [AppComponent]
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
new file mode 100644
index 0000000..b3f8ca3
--- /dev/null
+++ b/src/app/dashboard/dashboard.component.html
@@ -0,0 +1,37 @@
+<mat-card class="clients">
+ <span>Client</span>
+ <mat-list>
+ <mat-list-item>
+ <span>View Members</span>|
+ <span>View Groups</span>
+ </mat-list-item>
+ </mat-list>
+</mat-card>
+<mat-card class="accounting">
+ <span>Accounting</span>
+ <mat-list>
+ <mat-list-item>
+ <span>View General Ledger</span>|
+ <span>View chart of Account</span>
+ </mat-list-item>
+ </mat-list>
+</mat-card>
+<mat-card class="organisation">
+ <span>Organisation</span>
+ <mat-list>
+ <mat-list-item>
+ <span>View Offices</span>|
+ <span>View Employees</span>
+ </mat-list-item>
+ </mat-list>
+</mat-card>
+<mat-card class="products">
+ <span>Products</span>
+ <mat-list>
+ <mat-list-item>
+ <span>View Loan Products</span>|
+ <span>View Savings Product</span>
+ </mat-list-item>
+ </mat-list>
+</mat-card>
+
diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss
new file mode 100644
index 0000000..d02c897
--- /dev/null
+++ b/src/app/dashboard/dashboard.component.scss
@@ -0,0 +1,23 @@
+.clients,.accounting{
+ display: flex;
+ display: inline-block;
+ vertical-align: top;
+ margin-left: 10%;
+ margin-bottom: 5%;
+ width: 30%;
+ height:200px;
+
+}
+.organisation,.products{
+ display: flex;
+ display: inline-block;
+ vertical-align:top;
+ margin-left: 10%;
+ width: 30%;
+ height:200px;
+}
+
+mat-list-item{
+ padding-top:100px;
+
+}
\ No newline at end of file
diff --git a/src/app/dashboard/dashboard.component.spec.ts b/src/app/dashboard/dashboard.component.spec.ts
new file mode 100644
index 0000000..9c996c3
--- /dev/null
+++ b/src/app/dashboard/dashboard.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+ let component: DashboardComponent;
+ let fixture: ComponentFixture<DashboardComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ DashboardComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DashboardComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts
new file mode 100644
index 0000000..0824577
--- /dev/null
+++ b/src/app/dashboard/dashboard.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-dashboard',
+ templateUrl: './dashboard.component.html',
+ styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index fdfe3a0..d054765 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -53,7 +53,7 @@
<br>
<br>
<p>
- <button mat-raised-button color="primary" type="submit" class="btn">Sign In</button>
+ <button mat-raised-button color="primary" type="submit" class="btn" (click)="onLogin()">Sign In</button>
</p>
<br>
</div>
diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts
index 8eab576..ceeab4e 100644
--- a/src/app/login/login.component.ts
+++ b/src/app/login/login.component.ts
@@ -13,7 +13,11 @@ export class LoginComponent implements OnInit {
- constructor(){}
+ constructor(private _router: Router){}
+
+ onLogin(): void{
+ this._router.navigate(['/navbar']);
+ }
ngOnInit() {
}
diff --git a/src/app/navbar/navbar.component.html b/src/app/navbar/navbar.component.html
new file mode 100644
index 0000000..618b704
--- /dev/null
+++ b/src/app/navbar/navbar.component.html
@@ -0,0 +1,163 @@
+
+<div class="flex-container" fullscreen>
+<mat-toolbar class="my-toolbar">
+ <div>
+ <div class="search2">
+ <ul id="menu" class="menu1">
+ <li>
+ <button mat-button (click)="sidenav.toggle()" class="dropdown-button">
+ <mat-icon class="fineract-toolicon">menu</mat-icon>
+ </button>
+ </li>
+ <li>
+
+ <span class="">Tenant Name</span>
+ </li>
+ <li>
+
+ <button mat-button [matMenuTriggerFor]="client" class="dropdown-button">
+ <mat-icon>group</mat-icon>Clients
+ <mat-icon>arrow_drop_down</mat-icon>
+ </button>
+ <mat-menu #client="matMenu">
+ <a mat-menu-item [routerLink]="['/navbar/client']">Client</a>
+ <a mat-menu-item [routerLink]="['/navbar/group']">Group</a>
+ <a mat-menu-item [routerLink]="['/navbar/center']">Center</a>
+ </mat-menu>
+ </li>
+ <li>
+ <button mat-button [routerLink]="['/navbar/accounting']" class="dropdown-button">Accounting
+ </button>
+ </li>
+ <li>
+ <button mat-button [matMenuTriggerFor]="report" class="dropdown-button">Reports
+ <mat-icon>arrow_drop_down</mat-icon>
+ </button>
+ <mat-menu #report="matMenu">
+ <a mat-menu-item [routerLink]="['/navbar/reports/allreports']">All</a>
+ <a mat-menu-item [routerLink]="['/navbar/reports/clients']">Clients</a>
+ <a mat-menu-item [routerLink]="['/navbar/reports/loans']">Loans</a>
+ <a mat-menu-item [routerLink]="['/navbar/reports/savings']">Savings</a>
+ <a mat-menu-item [routerLink]="['/navbar/reports/funds']">Funds</a>
+ <a mat-menu-item [routerLink]="['/navbar/reports/accounting']">Accounting</a>
+ <a mat-menu-item [routerLink]="['/navbar/reports/xbrl']">XBRL</a>
+ </mat-menu>
+ </li>
+ <li>
+
+ <button mat-button [matMenuTriggerFor]="admin" class="dropdown-button">
+ <mat-icon>build</mat-icon>Admin
+ <mat-icon>arrow_drop_down</mat-icon>
+ </button>
+ <mat-menu #admin="matMenu">
+ <button mat-menu-item [routerLink]="['/navbar/user']">Users</button>
+ <button mat-menu-item [routerLink]="['/navbar/organisation']">Organisations</button>
+ <button mat-menu-item [routerLink]="['/navbar/system']">Systems</button>
+ <button mat-menu-item [routerLink]="['/navbar/admin/products']">Products</button>
+ <button mat-menu-item [routerLink]="['/navbar/admin/templates']">Template</button>
+
+ </mat-menu>
+ </li>
+
+ </ul>
+ </div>
+ <div class="search1">
+ <ul id="menu">
+ <li>
+ <input placeholder="click or press alt + X to Search" type="text" class="fineract-toolsearch">
+ </li>
+
+ <li class="dropdown-button">
+ <button mat-button [routerLink]="['/navbar/notification']">
+ <mat-icon>notifications</mat-icon></button>
+ </li>
+ <li>
+ <button mat-button [matMenuTriggerFor]="mifos" class="dropdown-button">Fineract CN
+ <mat-icon>arrow_drop_down</mat-icon>
+ </button>
+ <mat-menu #mifos="matMenu">
+ <button mat-menu-item><mat-icon>help</mat-icon>Help</button>
+ <button mat-menu-item><mat-icon>person</mat-icon>Profile</button>
+ <button mat-menu-item><mat-icon>settings</mat-icon>Settings</button>
+ <button mat-menu-item (click)="onLogout()"><mat-icon>settings_power</mat-icon>Log Out</button>
+
+ </mat-menu>
+ </li>
+ </ul>
+ </div>
+ </div>
+</mat-toolbar>
+</div>
+
+<mat-sidenav-container class="app-container" style="background-image:url('assets/Background.png');">
+ <mat-sidenav #sidenav class="app-sidenav mat-elevation-z2" mode="side" opened="true">
+ <mat-list>
+
+ <a mat-list-item href="badges.html">
+ <button mat-button>
+ <mat-icon>event_note</mat-icon>
+ collection sheet</button>
+ </a>
+ <mat-divider></mat-divider>
+ <a mat-list-item [routerLink]="['/navbar/individualcollection']">
+ <button mat-button>
+ <mat-icon>event_note</mat-icon>
+ individual collection </button>
+ </a>
+
+ <mat-divider></mat-divider>
+ <a mat-list-item [routerLink]="['/navbar/addjournalentry']">
+ <button mat-button>
+ <mat-icon>add</mat-icon>
+ add journal entry</button>
+ </a>
+ <mat-divider></mat-divider>
+ <a mat-list-item [routerLink]="['/navbar/accountclosure']">
+ <button mat-button>
+ <mat-icon>folder</mat-icon>
+ closing entry</button>
+ </a>
+ <mat-divider></mat-divider>
+ <a mat-list-item [routerLink]="['/navbar/chartaccount']">
+ <button mat-button>
+ <mat-icon>insert_chart</mat-icon>
+ chart of account</button>
+ </a>
+ <mat-divider></mat-divider>
+ <a mat-list-item [routerLink]="['/navbar/createclient']">
+ <button mat-button>
+ <mat-icon>person_add</mat-icon>
+ client</button>
+ </a>
+ <mat-divider></mat-divider>
+ <a mat-list-item [routerLink]="['/navbar/creategroup']">
+ <button mat-button>
+ <mat-icon>group_add</mat-icon>
+ group</button>
+ </a>
+ <mat-divider></mat-divider>
+ <a mat-list-item [routerLink]="['/navbar/createcenter']">
+ <button mat-button>
+ <mat-icon>place</mat-icon>
+ center</button>
+ </a>
+ <mat-divider></mat-divider>
+ <a mat-list-item href="badges.html">
+ <button mat-button>
+ <mat-icon>help</mat-icon>
+ help</button>
+ </a>
+
+
+ </mat-list>
+
+
+ </mat-sidenav>
+ <div class="app-sidenav-content">
+ <div class="wrapper" >
+ <router-outlet></router-outlet>
+ </div>
+
+ </div>
+</mat-sidenav-container>
+
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
new file mode 100644
index 0000000..c2e2ce6
--- /dev/null
+++ b/src/app/navbar/navbar.component.scss
@@ -0,0 +1,81 @@
+.dropdown-button{
+
+ color:#3498dB;
+}
+::placeholder{
+ color: #3498dB;
+}
+.app-container {
+ flex: 1;
+ width: 100%;
+ height:100%;
+ min-width: 100%;
+ position:fixed;
+ }
+ .my-toolbar{
+ height:37px;
+ background-color: #363636;
+ opacity:100%;
+ }
+
+
+.app-sidenav-content{
+ display:flex;
+ min-height:100%;
+
+ flex-direction:column;
+ opacity: 40%;
+
+}
+.app-sidenav{
+ display:flex;
+ height:100%;
+ flex-direction:column;
+ background-color: #363636;
+ opacity:40%;
+
+
+}
+mat-list > a{
+
+ color:white;
+}
+.fineract-toolicon{
+ color:white;
+}
+.wrapper{
+ margin:50px;
+
+}
+ul#menu li{
+ display: inline;
+}
+.search1{
+
+ margin-left:3%;
+
+}
+.fineract-toolsearch{
+ width:210px;
+}
+
+
+.fineract-logo{
+ width:40px;
+ height:37px;
+ vertical-align: bottom;
+
+}
+.logo-title{
+ vertical-align: middle;
+ font-size:11px;
+ color:white;
+}
+
+.search1,.search2{
+ display: inline-block;
+}
+
+.menu1{
+ padding:0;
+}
\ No newline at end of file
diff --git a/src/app/navbar/navbar.component.spec.ts b/src/app/navbar/navbar.component.spec.ts
new file mode 100644
index 0000000..9032ad2
--- /dev/null
+++ b/src/app/navbar/navbar.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarComponent } from './navbar.component';
+
+describe('NavbarComponent', () => {
+ let component: NavbarComponent;
+ let fixture: ComponentFixture<NavbarComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ NavbarComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(NavbarComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/navbar/navbar.component.ts b/src/app/navbar/navbar.component.ts
new file mode 100644
index 0000000..a1b4d25
--- /dev/null
+++ b/src/app/navbar/navbar.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-navbar',
+ templateUrl: './navbar.component.html',
+ styleUrls: ['./navbar.component.scss']
+})
+export class NavbarComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
diff --git a/src/index.html b/src/index.html
index e63daa5..d85cec1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,5 +11,6 @@
</head>
<body>
<app-root></app-root>
+
</body>
</html>
diff --git a/src/main.ts b/src/main.ts
index 4220bc8..71fac2b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,7 @@
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import 'hammerjs';
+import 'material-design-icons/iconfont/material-icons.css'
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
diff --git a/src/styles.css b/src/styles.scss
similarity index 100%
rename from src/styles.css
rename to src/styles.scss