continue accounting components

src/app/accounting/add-journal-entry/add-journal-entry.component.html

@@ -0,0 +1,53 @@
+<div class="page-space mat-elevation-z2">
+  <p>
+  <a [routerLink]="['/navbar/accounting']">Accounting</a>
+  <span class="current-page">/ Add Journal Entry</span>
+</p>
+
+<div class="main-div mat-elevation-z2">
+  <h3 class="heading">Add Journal Entry</h3>
+  <form class="fineract-form">
+  <mat-form-field>
+    <input matInput [matDatepicker]="picker" placeholder="Transaction date">
+    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+    <mat-datepicker #picker></mat-datepicker>
+  </mat-form-field>
+<br/>
+  <mat-form-field>
+    <input matInput placeholder="Transaction Type">
+  </mat-form-field>
+<br/>
+  <mat-form-field>
+    <input matInput placeholder="Note(optional)">
+  </mat-form-field>
+<br/>
+  <mat-form-field class="input">
+    <textarea matInput placeholder="Leave a comment"></textarea>
+  </mat-form-field>
+  </form>
+
+  <span>Affected Accounts</span>
+  <mat-card>
+    <span>Debit</span>
+    <mat-form-field>
+      <input matInput placeholder="Account">
+    </mat-form-field>
+    <mat-form-field>
+      <input matInput placeholder="Amount">
+    </mat-form-field>
+    <button mat-raised-button color="warn"><mat-icon>clear</mat-icon></button>
+    <button mat-raised-button color="primary">Add Debit</button>
+  </mat-card>
+  <mat-card>
+    <span>Credit</span>
+    <mat-form-field>
+      <input matInput placeholder="Account">
+    </mat-form-field>
+    <mat-form-field>
+      <input matInput placeholder="Amount">
+    </mat-form-field>
+    <button mat-raised-button color="warn"><mat-icon>clear</mat-icon></button>
+    <button mat-raised-button color="primary">Add Credit</button>
+  </mat-card>
+</div>
+</div>

src/app/accounting/add-journal-entry/add-journal-entry.component.scss

@@ -0,0 +1,11 @@
+
+.fineract-form {
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+  }
+
+  .input {
+    width: 100%;
+  }
+

src/app/accounting/add-journal-entry/add-journal-entry.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddJournalEntryComponent } from './add-journal-entry.component';
+
+describe('AddJournalEntryComponent', () => {
+  let component: AddJournalEntryComponent;
+  let fixture: ComponentFixture<AddJournalEntryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddJournalEntryComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddJournalEntryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/accounting/add-journal-entry/add-journal-entry.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit } from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms'
+import {FormControl, Validators} from '@angular/forms';
+
+@Component({
+  selector: 'app-add-journal-entry',
+  templateUrl: './add-journal-entry.component.html',
+  styleUrls: ['./add-journal-entry.component.scss']
+})
+export class AddJournalEntryComponent implements OnInit {
+
+  startDate = new Date(1990, 0, 1);
+  show=false;
+
+  myControl: FormControl = new FormControl();
+
+  options = [
+    {value: 'mor', viewValue: 'Morogoro branch'},
+    {value: 'kat', viewValue: 'Katuba'},
+    {value:'loan',viewValue:'Loan Officer'}
+  ];
+
+  currencies = [
+    {value:'afgh',viewValue:'Afghanistan Afghani()'},
+    {value:'alba',viewValue:'Albanian lek()'},
+    {value:'alg',viewValue:'Algerian Dinar()'}
+  ]
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/accounting/add-transaction-type/add-transaction-type.component.html

@@ -0,0 +1,19 @@
+<div class="my-div mat-elevation-z2">
+  <h3 class="heading">General Ledger</h3>
+  <mat-divider></mat-divider>
+  <span>Transaction Type</span>
+
+  <mat-form-field>
+    <input matInput placeholder="Code">
+  </mat-form-field>
+
+  <mat-form-field>
+    <input matInput placeholder="Name">
+  </mat-form-field>
+
+  <mat-form-field>
+    <textarea matInput placeholder="Description(optional)"></textarea>
+  </mat-form-field>
+
+  <button mat-raise-button>Submit</button>
+  <button mat-raise-button>Cancel</button>

src/app/accounting/add-transaction-type/add-transaction-type.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddTransactionTypeComponent } from './add-transaction-type.component';
+
+describe('AddTransactionTypeComponent', () => {
+  let component: AddTransactionTypeComponent;
+  let fixture: ComponentFixture<AddTransactionTypeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddTransactionTypeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddTransactionTypeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/accounting/add-transaction-type/add-transaction-type.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-add-transaction-type',
+  templateUrl: './add-transaction-type.component.html',
+  styleUrls: ['./add-transaction-type.component.scss']
+})
+export class AddTransactionTypeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/accounting/chart-of-accounts/chart-of-accounts.component.html

@@ -0,0 +1,47 @@
+<div class="main-div mat-elevation-z2">
+  <h3 class="heading">Chart of Accounts</h3>
+  <mat-divider></mat-divider>
+  <div class="fineract-button">
+  <a mat-raised-button  color="primary" >
+    Download</a>
+    </div>
+  <mat-form-field >
+    <input matInput class="filter" (keyup)="applyFilter($event.target.value)" placeholder="Filter by name/code">
+  </mat-form-field>
+
+<br>
+<mat-divider></mat-divider>
+
+<mat-table #table [dataSource]="dataSource">
+
+  <!-- Position Column -->
+  <ng-container matColumnDef="code">
+    <mat-header-cell *matHeaderCellDef>Code </mat-header-cell>
+    <mat-cell *matCellDef="let element">
+      <a routerLink="{{element.code}}">{{element.code}}</a>
+    </mat-cell>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="description">
+      <mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.description}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="type">
+        <mat-header-cell *matHeaderCellDef>Type</mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.type} </mat-cell>
+      </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+</mat-table>
+
+
+</div>
+

src/app/accounting/chart-of-accounts/chart-of-accounts.component.scss

@@ -0,0 +1,11 @@
+
+  table {
+      width: 100%;
+    }
+
+    .mat-form-field {
+      font-size: 14px;
+      width: 100%;
+    }
+
+

src/app/accounting/chart-of-accounts/chart-of-accounts.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChartOfAccountsComponent } from './chart-of-accounts.component';
+
+describe('ChartOfAccountsComponent', () => {
+  let component: ChartOfAccountsComponent;
+  let fixture: ComponentFixture<ChartOfAccountsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChartOfAccountsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChartOfAccountsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/accounting/chart-of-accounts/chart-of-accounts.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit } from '@angular/core';
+import {MatTableDataSource} from '@angular/material';
+
+
+@Component({
+  selector: 'app-chart-of-accounts',
+  templateUrl: './chart-of-accounts.component.html',
+  styleUrls: ['./chart-of-accounts.component.scss']
+})
+export class ChartOfAccountsComponent implements OnInit {
+  displayedColumns = ['code','name','description','type'];
+  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 {
+  code: string;
+  name: string;
+  description: string;
+  type: string;
+
+}
+
+const ELEMENT_DATA: Element[] = [
+
+];
+

src/app/accounting/cheque-clearing/cheque-clearing.component.html

@@ -0,0 +1,70 @@
+<div class="main-div mat-elevation-z2">
+  <h3 class="heading">Cheque Clearing</h3>
+  <mat-divider></mat-divider>
+  <mat-form-field>
+    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter by identifier">
+  </mat-form-field>
+
+<br>
+<mat-divider></mat-divider>
+
+<mat-table #table [dataSource]="dataSource">
+
+  <!-- Position Column -->
+  <ng-container matColumnDef="identifier">
+    <mat-header-cell *matHeaderCellDef>Identifier </mat-header-cell>
+    <mat-cell *matCellDef="let element">
+      <a routerLink="{{element.identifier}}">{{element.identifier}}</a>
+    </mat-cell>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="drawee">
+    <mat-header-cell *matHeaderCellDef>Drawee</mat-header-cell>
+    <mat-cell *matCellDef="let element"> {{element.drawee}} </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="drawer">
+      <mat-header-cell *matHeaderCellDef>Drawer</mat-header-cell>
+      <mat-cell *matCellDef="let element"> {{element.drawer}} </mat-cell>
+    </ng-container>
+
+    <ng-container matColumnDef="payee">
+        <mat-header-cell *matHeaderCellDef>Payee</mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.payee} </mat-cell>
+      </ng-container>
+
+      <ng-container matColumnDef="amount">
+        <mat-header-cell *matHeaderCellDef>Amount</mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.amount} </mat-cell>
+      </ng-container>
+
+      <ng-container matColumnDef="dateissued">
+        <mat-header-cell *matHeaderCellDef>Date Issued</mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.dateisued} </mat-cell>
+      </ng-container>
+
+      <ng-container matColumnDef="state">
+        <mat-header-cell *matHeaderCellDef>state</mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.state} </mat-cell>
+      </ng-container>
+
+      <ng-container matColumnDef="approve">
+        <mat-header-cell *matHeaderCellDef>Approve</mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.approve} </mat-cell>
+      </ng-container>
+
+      <ng-container matColumnDef="cancel">
+        <mat-header-cell *matHeaderCellDef>Cancel</mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{element.cancel} </mat-cell>
+      </ng-container>
+
+
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+</mat-table>
+
+
+</div>
+