.

src/app/commons/component/dashboard-card/dashboard-card.component.html

@@ -1,15 +1,21 @@
-<div fxLayout="row"  class="dashcard mat-elevation-z4 "  >
+<div>
+    <div fxLayout="row" class="dashcard mat-elevation-z4 ">
         <div fxFlex="40" fxLayout="row" fxLayoutAlign="center center" [style.background]="dashData?.colorLight">
             <mat-icon class="cardIcon">{{dashData?.icon}}</mat-icon>
         </div>
-  <div  fxFlex="60" fxLayout="column" fxLayoutAlign="center center" [style.background]="dashData?.colorDark" >
+        <div fxFlex="60" fxLayout="column" fxLayoutAlign="center center" [style.background]="dashData?.colorDark">
 
             <div style="color: white;font-size: 40px">
                 <ng2-odometer [number]="dashData?.number" [config]="{ }"></ng2-odometer>
-          
             </div>
             <p class="mat-body-1 border-top">
                 {{dashData?.title}}
             </p>
         </div>
+    </div>
+    <!-- <div class="dashcard mat-elevation-z4" [style.background]="dashData?.colorDark">
+        <div>
+            summary
+        </div>
+    </div> -->
 </div>

src/app/commons/component/dashboard-card/dashboard-card.component.scss

@@ -13,7 +13,7 @@
 @mixin dashcard($theme) {
 
     .dashcard {
-        margin: 10px 5px;
+        margin: 0px 5px 0px 5px;
         height: 100px;
         background-color:white;
     }

src/app/pages/overview/add-dashboard-dialog/add-dashboard-dialog.component.html

@@ -0,0 +1,12 @@
+<mat-form-field>
+  <input matInput placeholder="Search">
+</mat-form-field>
+<p *ngIf="dashboards == null || dashboards.length == 0">No dashboards found.</p>
+<div *ngFor="let dashboard of dashboards">
+  <button mat-button>{{dashboard.name}}</button>
+</div>
+<mat-divider></mat-divider>
+<mat-form-field>
+  <input matInput placeholder="New Dashboard">
+</mat-form-field>
+<button mat-raised-button color="accent">OK</button>

src/app/pages/overview/add-dashboard-dialog/add-dashboard-dialog.component.spec.ts

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

src/app/pages/overview/add-dashboard-dialog/add-dashboard-dialog.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'of-add-dashboard-dialog',
+  templateUrl: './add-dashboard-dialog.component.html',
+  styleUrls: ['./add-dashboard-dialog.component.scss']
+})
+export class AddDashboardDialogComponent implements OnInit {
+
+  dashboards = [
+    {
+      id: '0',
+      name: 'Dashboard1',
+    },
+    {
+      id: '1',
+      name: 'Dashboard2',
+    },
+    {
+      id: '2',
+      name: 'Dashboard3',
+    },
+    {
+      id: '3',
+      name: 'Dashboard4',
+    },
+  ];
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/overview/overview-page.component.html

@@ -1,5 +1,33 @@
-<div fxLayout="row" fxLayoutWrap>
+<div fxLayout="row" fxLayoutAlign="space-between stretch" fxFlexFil fxFill fxLayoutGap="1px">
-  <div  *ngFor="let dash of dashCard"   fxFlex.lt-sm="100"  fxFlex.sm="50" fxFlex.md="25" >
+
-      <of-dashboard-card  [dashData]="dash" ></of-dashboard-card>
+  <div fxFlex="70" fxLayout="column" class="mat-elevation-z2 activity-list-container">
+
+    <div fxLayoutAlign="start center" fxLayout="row">
+
+      <div *ngFor="let dash of dashCard" fxFlex.lt-sm="70">
+        <of-dashboard-card [dashData]="dash"></of-dashboard-card>
+      </div>
+
+    </div>
+
+  </div>
+
+  <div fxFlex="30" fxLayout="column" class="mat-elevation-z2 activity-add">
+    <div fxFlex="10" fxLayout="row" fxLayoutAlign="space-between center">
+      <h3 class="mat-headline" fxFlex="80">Activities</h3>
+    </div>
+    <mat-divider></mat-divider>
+    <div>
+      <mat-list>
+        <mat-list-item *ngFor="let message of messages" (click)="handleActivityClick(message)">
+          <img matListAvatar src="assets/images/user-image2.jpg" alt="...">
+          <h4 mat-line>{{message.content}} </h4>
+          <p mat-line>{{message.date}} {{message.from}}</p>
+        </mat-list-item>
+      </mat-list>
+    </div>
   </div>
 </div>
+<div>
+  <button mat-raised-button (click)="openDialog()">Pick one</button>
+</div>

src/app/pages/overview/overview-page.component.scss

@@ -0,0 +1,50 @@
+.full {
+	width: 100%;
+}
+.activity-list-container {
+	background-color: white;
+	padding: 10px;
+
+	.activity-list {
+		height: 400px;
+		overflow: auto;
+		div {
+			margin: 0;
+		}
+		h3 {
+			margin: 0;
+		}
+		p {
+			margin: 0;
+		}
+		.avatar {
+			width: 40px;
+			height: 40px;
+			border-radius: 50%;
+		}
+	}
+	
+	.activity-list-header {
+		background-color: #eee;
+		padding: 10px;
+		div {
+			margin: auto;
+		}
+		
+	}
+}
+.activity-add {
+		padding: 10px;
+		background: white;
+		.avatar {
+			width: 120px;
+			height: 120px;
+			border-radius: 50%;
+		}
+		h3 {
+			margin: auto;
+		}
+	}
+
+
+    

src/app/pages/overview/overview-page.component.ts

@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Inject } from '@angular/core';
+import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
+import { AddDashboardDialogComponent } from 'app/pages/overview/add-dashboard-dialog/add-dashboard-dialog.component';
 
 @Component({
   selector: 'of-page-overview',
@@ -14,9 +16,46 @@ export class OverviewPageComponent implements OnInit {
     // { colorDark: '#66BB6A', colorLight: '#81C784', number: 1221, title: 'BANKING', icon: 'account_balance' }
   ];
 
-  constructor() { }
+  public messages = [
+    {
+      from: '존버왕김단타',
+      content: 'pac코인 여태 안 탄 혹우 있냐',
+      date: '2017-01-01'
+    },
+    {
+      from: '코인왕박손절',
+      content: '큉텀이 낳냐 아다가 낳냐',
+      date: '2017-01-01'
+    },
+    {
+      from: '존버왕김단타',
+      content: 'pac코인 여태 안 탄 혹우 있냐',
+      date: '2017-01-01'
+    },
+    {
+      from: '코인왕박손절',
+      content: '큉텀이 낳냐 아다가 낳냐',
+      date: '2017-01-01'
+    },
+  ];
+
+  constructor(public dialog: MatDialog) { }
 
   ngOnInit() {
   }
 
+  handleActivityClick(message: any) {
+    alert(message.content);
+  }
+
+  openDialog() {
+    const dialogRef = this.dialog.open(AddDashboardDialogComponent, {
+      width: '350px',
+      data: { }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('The dialog was closed');
+    });
+  }
 }

src/app/pages/overview/overview-page.module.ts

@@ -5,6 +5,7 @@ import { OverviewPageComponent } from 'app/pages/overview/overview-page.componen
 import { DashboardCardComponent } from 'app/commons/component/dashboard-card/dashboard-card.component';
 import { DashboardCardModule } from 'app/commons/component/dashboard-card/dashboard-card.module';
 import { MaterialModule } from 'app/commons/ui/material/material.module';
+import { AddDashboardDialogComponent } from './add-dashboard-dialog/add-dashboard-dialog.component';
 
 @NgModule({
   imports: [
@@ -14,7 +15,11 @@ import { MaterialModule } from 'app/commons/ui/material/material.module';
     MaterialModule
   ],
   declarations: [
-    OverviewPageComponent
+    OverviewPageComponent,
+    AddDashboardDialogComponent
+  ],
+  entryComponents: [
+    AddDashboardDialogComponent
   ]
 })
 export class OverviewPageModule { }