feat: Accounting layout design card (#14)

Accounting design and dropdown menu type

package-lock.json

@@ -8435,6 +8435,11 @@
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
       "dev": true
     },
+    "ngx-bootstrap": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-3.0.0.tgz",
+      "integrity": "sha512-Zu3m5Nwp6ISaqjrFeb1evFoaMn8EDR//RHoKeuLelvFOJjKHaCsbOdkWrAAtpTSapdc892mfZfWdTmSuaN2t5A=="
+    },
     "no-case": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",

package.json

@@ -37,6 +37,7 @@
     "hammerjs": "^2.0.8",
     "jquery": "^3.3.1",
     "lodash": "^4.17.10",
+    "ngx-bootstrap": "^3.0.0",
     "rxjs": "^6.1.0",
     "zone.js": "^0.8.26"
   },

src/app/accounting/accounting-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { AccountingComponent } from './accounting.component';
+
+const routes: Routes = [
+  { path: 'accounting', component: AccountingComponent},
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+  providers: []
+})
+export class AccountingRoutingModule { }

src/app/accounting/accounting.component.html

@@ -0,0 +1,50 @@
+<app-header> </app-header>
+<div class="fluid-container">
+ <div class="container">
+   <div class="card-body">
+   <div class="row">
+     <div class="col-sm-6">
+       <div class="card mt-5">
+<!--     <div class="card-header"><legend> Loan</legend></div>
+ -->    <div class="card-body">
+          <div class="list-group">
+            <a href="#" class="list-group-item  list-group-item-action active">
+              <h4 class="list-group-item-heading mb-1">First List Group Item Heading</h4>
+              <p class="list-group-item-text">List Group Item Text</p>
+            </a>
+            <a href="#" class="list-group-item  list-group-item-action">
+              <h4 class="list-group-item-heading mb-1">Second List Group Item Heading</h4>
+              <p class="list-group-item-text">List Group Item Text</p>
+            </a>
+            <a href="#" class="list-group-item  list-group-item-action">
+              <h4 class="list-group-item-heading">Third List Group Item Heading</h4>
+              <p class="list-group-item-text">List Group Item Text</p>
+            </a>
+          </div>
+      </div>
+    </div>
+  </div>
+    <div class="col-sm-6">
+        <div class="card mt-5">
+            <!-- <div class="card-header"></div> -->
+            <div class="card-body">
+              <div class="list-group">
+                <a href="#" class="list-group-item  list-group-item-action active">
+                  <h4 class="list-group-item-heading mb-1">First List Group Item Heading</h4>
+                  <p class="list-group-item-text">List Group Item Text</p>
+                </a>
+                <a href="#" class="list-group-item  list-group-item-action">
+                  <h4 class="list-group-item-heading mb-1">Second List Group Item Heading</h4>
+                  <p class="list-group-item-text">List Group Item Text</p>
+                </a>
+                <a href="#" class="list-group-item  list-group-item-action">
+                  <h4 class="list-group-item-heading">Third List Group Item Heading</h4>
+                  <p class="list-group-item-text">List Group Item Text</p>
+                </a>
+              </div>
+           </div>
+        </div>
+    </div>
+   </div>
+  </div>
+</div> 

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() {
+  }
+
+}

src/app/accounting/accounting.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CoreModule } from '../core/core.module';
+import { AccountingComponent } from './accounting.component';
+import { AccountingRoutingModule } from './accounting-routing.module';
+
+@NgModule({
+  imports: [
+    CoreModule,
+    CommonModule,
+    AccountingRoutingModule
+  ],
+  declarations: [AccountingComponent]
+})
+export class AccountingModule { }

src/app/app.module.ts

@@ -5,6 +5,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { TranslateModule } from '@ngx-translate/core';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { AlertModule } from 'ngx-bootstrap';
 
 import { environment } from '@env/environment';
 import { CoreModule } from '@app/core';
@@ -12,6 +13,7 @@ import { SharedModule } from '@app/shared';
 import { HomeModule } from './home/home.module';
 import { AboutModule } from './about/about.module';
 import { ClientsModule} from './clients/clients.module';
+import { AccountingModule } from './accounting/accounting.module';
 import { LoginModule } from './login/login.module';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
@@ -24,11 +26,13 @@ import { AppRoutingModule } from './app-routing.module';
     HttpClientModule,
     TranslateModule.forRoot(),
     NgbModule.forRoot(),
+    AlertModule.forRoot(),
     CoreModule,
     SharedModule,
     HomeModule,
     AboutModule,
     ClientsModule,
+    AccountingModule,
     LoginModule,
     AppRoutingModule
   ],

src/app/core/shell/header/header.component.html

@@ -57,9 +57,15 @@
       <li class="nav-item">
         <a class="nav-link" href="#"><h5 class="font-weight-normal">Groups</h5></a>
       </li>
-      <li class="nav-item">
+      <div ngbDropdown class="d-inline-block">
-        <a class="nav-link" href="#"><h5 class="font-weight-normal">Loans</h5></a>
+          <a class="nav-link" id="dropdownBasic2" ngbDropdownToggle>Toggle dropup</a>
-      </li>
+          <div ngbDropdownMenu aria-labelledby="dropdownBasic2">                                                                                  
+            <button class="dropdown-item">Action - 1</button>
+            <button class="dropdown-item">Another Action</button>
+            <button class="dropdown-item">Something else is here</button>
+          </div>
+        </div>
+      
     </ul>
     <form class="form-inline my-2 my-lg-0">
       <input class="form-control mr-sm-2" placeholder="Search" type="text">