From f6dc8a37faf92363687659fb7a4bff1cb7b73c57 Mon Sep 17 00:00:00 2001
From: woothu <woothu@gmail.com>
Date: Mon, 8 Oct 2018 17:00:29 +0200
Subject: [PATCH] Widgets converted to components

---
 src/views/Widgets.vue                   | 506 ++++--------------------
 src/views/widgets/SocialMediaWidget.vue |  60 +++
 src/views/widgets/Widget01.vue          |  51 +++
 src/views/widgets/Widget02.vue          |  42 ++
 src/views/widgets/Widget03.vue          |  42 +-
 src/views/widgets/Widget04.vue          |  51 +++
 6 files changed, 291 insertions(+), 461 deletions(-)
 create mode 100644 src/views/widgets/SocialMediaWidget.vue
 create mode 100644 src/views/widgets/Widget01.vue
 create mode 100644 src/views/widgets/Widget02.vue
 create mode 100644 src/views/widgets/Widget04.vue

diff --git a/src/views/Widgets.vue b/src/views/Widgets.vue
index 65371150..3334e2f4 100644
--- a/src/views/Widgets.vue
+++ b/src/views/Widgets.vue
@@ -1,490 +1,116 @@
 <template>
   <div class="animated fadeIn">
     <b-row>
-      <b-col sm="6" lg="3">
-        <b-card>
-          <div class="h4 m-0">89.9%</div>
-          <div>Lorem ipsum...</div>
-          <b-progress height={} class="progress-xs my-3" variant="success" :value="25"/>
-          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
-        </b-card>
-      </b-col>
-      <b-col sm="6" lg="3">
-        <b-card>
-          <div class="h4 m-0">12.124</div>
-          <div>Lorem ipsum...</div>
-          <b-progress height={} class="progress-xs my-3" variant="info" :value="25"/>
-          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
-        </b-card>
-      </b-col>
-      <b-col sm="6" lg="3">
-        <b-card>
-          <div class="h4 m-0">$98.111,00</div>
-          <div>Lorem ipsum...</div>
-          <b-progress height={} class="progress-xs my-3" variant="warning" :value="25"/>
-          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
-        </b-card>
-      </b-col>
-      <b-col sm="6" lg="3">
-        <b-card>
-          <div class="h4 m-0">2 TB</div>
-          <div>Lorem ipsum...</div>
-          <b-progress height={} class="progress-xs my-3" variant="danger" :value="25"/>
-          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
-        </b-card>
-      </b-col>
+      <widget01 header="89.9%" variant="success"/>
+      <widget01 header="12.124" variant="info"/>
+      <widget01 header="$98.111,00" variant="warning"/>
+      <widget01 header="2 TB" variant="danger"/>
     </b-row><!--/.row-->
     <b-row>
-      <b-col sm="6" lg="3">
-        <b-card class="text-white bg-primary">
-          <div class="h4 m-0">89.9%</div>
-          <div>Lorem ipsum...</div>
-          <b-progress height={} class="progress-white progress-xs my-3" :value="25"/>
-          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
-        </b-card>
-      </b-col>
-      <b-col sm="6" lg="3">
-        <b-card class="text-white bg-warning">
-          <div class="h4 m-0">12.124</div>
-          <div>Lorem ipsum...</div>
-          <b-progress height={} class="progress-white progress-xs my-3" :value="25"/>
-          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
-        </b-card>
-      </b-col>
-      <b-col sm="6" lg="3">
-        <b-card class="text-white bg-danger">
-          <div class="h4 m-0">$98.111,00</div>
-          <div>Lorem ipsum...</div>
-          <b-progress height={} class="progress-white progress-xs my-3" :value="25"/>
-          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
-        </b-card>
-      </b-col>
-      <b-col sm="6" lg="3">
-        <b-card class="text-white bg-info">
-          <div class="h4 m-0">2 TB</div>
-          <div>Lorem ipsum...</div>
-          <b-progress height={} class="progress-white progress-xs my-3" :value="25"/>
-          <small class="text-muted">Lorem ipsum dolor sit amet enim.</small>
-        </b-card>
-      </b-col>
+      <widget01 header="89.9%"  variant="background-success"/>
+      <widget01 header="12.124" variant="background-info"/>
+      <widget01 header="$98.111,00" variant="background-warning"/>
+      <widget01 header="2 TB" variant="background-danger"/>
     </b-row><!--/.row-->
     <b-row>
-      <b-col cols="12" sm="6" lg="3">
-        <b-card :no-body="true">
-          <b-card-body class="p-3 clearfix">
-            <i class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
-            <div class="h5 text-primary mb-0 mt-2">$1.999,50</div>
-            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
-          </b-card-body>
-        </b-card>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <b-card :no-body="true">
-          <b-card-body class="p-3 clearfix">
-            <i class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"></i>
-            <div class="h5 text-info mb-0 mt-2">$1.999,50</div>
-            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
-          </b-card-body>
-        </b-card>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <b-card :no-body="true">
-          <b-card-body class="p-3 clearfix">
-            <i class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"></i>
-            <div class="h5 text-warning mb-0 mt-2">$1.999,50</div>
-            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
-          </b-card-body>
-        </b-card>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <b-card :no-body="true">
-          <b-card-body class="p-3 clearfix">
-            <i class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"></i>
-            <div class="h5 text-danger mb-0 mt-2">$1.999,50</div>
-            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
-          </b-card-body>
-        </b-card>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <b-card :no-body="true" footer-class="px-3 py-2">
-          <b-card-body class="p-3 clearfix">
-            <i class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
-            <div class="h5 text-primary mb-0 mt-2">$1.999,50</div>
-            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
-          </b-card-body>
-          <div slot="footer">
-            <b-link class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></b-link>
-          </div>
-        </b-card>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <b-card :no-body="true" footer-class="px-3 py-2">
-          <b-card-body class="p-3 clearfix">
-            <i class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"></i>
-            <div class="h5 text-info mb-0 mt-2">$1.999,50</div>
-            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
-          </b-card-body>
-          <div slot="footer">
-            <b-link class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></b-link>
-          </div>
-        </b-card>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <b-card :no-body="true" footer-class="px-3 py-2">
-          <b-card-body class="p-3 clearfix">
-            <i class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"></i>
-            <div class="h5 text-warning mb-0 mt-2">$1.999,50</div>
-            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
-          </b-card-body>
-          <div slot="footer">
-            <b-link class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></b-link>
-          </div>
-        </b-card>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <b-card :no-body="true" footer-class="px-3 py-2">
-          <b-card-body class="p-3 clearfix">
-            <i class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"></i>
-            <div class="h5 text-danger mb-0 mt-2">$1.999,50</div>
-            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
-          </b-card-body>
-          <div slot="footer">
-            <b-link class="font-weight-bold font-xs btn-block text-muted" href="#">View More <i class="fa fa-angle-right float-right font-lg"></i></b-link>
-          </div>
-        </b-card>
-      </b-col>
+      <widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary"/>
+      <widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info"/>
+      <widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
+      <widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger"/>
     </b-row><!--/.row-->
     <b-row>
-      <b-col cols="12" sm="6" lg="3">
-        <b-card :no-body="true">
-          <b-card-body class="p-0 clearfix">
-            <i class="fa fa-cogs bg-primary p-4 font-2xl mr-3 float-left"></i>
-            <div class="h5 text-primary mb-0 pt-3">$1.999,50</div>
-            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
-          </b-card-body>
-        </b-card>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <b-card :no-body="true">
-          <b-card-body class="p-0 clearfix">
-            <i class="fa fa-laptop bg-info p-4 font-2xl mr-3 float-left"></i>
-            <div class="h5 text-info mb-0 pt-3">$1.999,50</div>
-            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
-          </b-card-body>
-        </b-card>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <b-card :no-body="true">
-          <b-card-body class="p-0 clearfix">
-            <i class="fa fa-moon-o bg-warning p-4 font-2xl mr-3 float-left"></i>
-            <div class="h5 text-warning mb-0 pt-3">$1.999,50</div>
-            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
-          </b-card-body>
-        </b-card>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <b-card :no-body="true">
-          <b-card-body class="p-0 clearfix">
-            <i class="fa fa-bell bg-danger p-4 font-2xl mr-3 float-left"></i>
-            <div class="h5 text-danger mb-0 pt-3">$1.999,50</div>
-            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
-          </b-card-body>
-        </b-card>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <b-card :no-body="true">
-          <b-card-body class="p-0 clearfix">
-            <i class="fa fa-cogs bg-primary p-4 px-5 font-2xl mr-3 float-left"></i>
-            <div class="h5 text-primary mb-0 pt-3">$1.999,50</div>
-            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
-          </b-card-body>
-        </b-card>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <b-card :no-body="true">
-          <b-card-body class="p-0 clearfix">
-            <i class="fa fa-laptop bg-info p-4 px-5 font-2xl mr-3 float-left"></i>
-            <div class="h5 text-info mb-0 pt-3">$1.999,50</div>
-            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
-          </b-card-body>
-        </b-card>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <b-card :no-body="true">
-          <b-card-body class="p-0 clearfix">
-            <i class="fa fa-moon-o bg-warning p-4 px-5 font-2xl mr-3 float-left"></i>
-            <div class="h5 text-warning mb-0 pt-3">$1.999,50</div>
-            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
-          </b-card-body>
-        </b-card>
-      </b-col>
-      <b-col cols="12" sm="6" lg="3">
-        <b-card :no-body="true">
-          <b-card-body class="p-0 clearfix">
-            <i class="fa fa-bell bg-danger p-4 px-5 font-2xl mr-3 float-left"></i>
-            <div class="h5 text-danger mb-0 pt-3">$1.999,50</div>
-            <div class="text-muted text-uppercase font-weight-bold font-xs">Income</div>
-          </b-card-body>
-        </b-card>
-      </b-col>
+      <widget02 header="$1.999,50" iconClasses="fa fa-cogs bg-primary" :showLink="true"/>
+      <widget02 header="$1.999,50" iconClasses="fa fa-laptop bg-info" :showLink="true"/>
+      <widget02 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary" :showLink="true"/>
+      <widget02 header="$1.999,50" iconClasses="fa fa-bell bg-danger" :showLink="true"/>
     </b-row><!--/.row-->
     <b-row>
-      <b-col md="3" sm="6">
-        <div class="brand-card">
-          <div class="brand-card-header bg-facebook">
-            <i class="fa fa-facebook"></i>
-            <div class="chart-wrapper">
-              <social-box-chart-example :data="[65, 59, 84, 84, 51, 55, 40]" />
-            </div>
-          </div>
-          <div class="brand-card-body">
-            <div>
-              <div class="text-value">89k</div>
-              <div class="text-uppercase text-muted small">friends</div>
-            </div>
-            <div>
-              <div class="text-value">459</div>
-              <div class="text-uppercase text-muted small">feeds</div>
-            </div>
-          </div>
-        </div>
-      </b-col>
-      <b-col md="3" sm="6">
-        <div class="brand-card">
-          <div class="brand-card-header bg-twitter">
-            <i class="fa fa-twitter"></i>
-            <div class="chart-wrapper">
-              <social-box-chart-example :data="[1, 13, 9, 17, 34, 41, 38]" />
-            </div>
-          </div>
-          <div class="brand-card-body">
-            <div>
-              <div class="text-value">973k</div>
-              <div class="text-uppercase text-muted small">followers</div>
-            </div>
-            <div>
-              <div class="text-value">1.792</div>
-              <div class="text-uppercase text-muted small">tweets</div>
-            </div>
-          </div>
-        </div>
-      </b-col>
-      <b-col md="3" sm="6">
-        <div class="brand-card">
-          <div class="brand-card-header bg-linkedin">
-            <i class="fa fa-linkedin"></i>
-            <div class="chart-wrapper">
-              <social-box-chart-example :data="[78, 81, 80, 45, 34, 12, 40]" />
-            </div>
-          </div>
-          <div class="brand-card-body">
-            <div>
-              <div class="text-value">500+</div>
-              <div class="text-uppercase text-muted small">contacts</div>
-            </div>
-            <div>
-              <div class="text-value">292</div>
-              <div class="text-uppercase text-muted small">feeds</div>
-            </div>
-          </div>
-        </div>
-      </b-col>
-      <b-col md="3" sm="6">
-        <div class="brand-card">
-          <div class="brand-card-header bg-google-plus">
-            <i class="fa fa-google-plus"></i>
-            <div class="chart-wrapper">
-              <social-box-chart-example :data="[35, 23, 56, 22, 97, 23, 64]" />
-            </div>
-          </div>
-          <div class="brand-card-body">
-            <div>
-              <div class="text-value">894</div>
-              <div class="text-uppercase text-muted small">followers</div>
-            </div>
-            <div>
-              <div class="text-value">92</div>
-              <div class="text-uppercase text-muted small">circles</div>
-            </div>
-          </div>
-        </div>
-      </b-col>
+      <widget03 header="$1.999,50" iconClasses="fa fa-cogs bg-primary"/>
+      <widget03 header="$1.999,50" iconClasses="fa fa-laptop bg-info"/>
+      <widget03 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary"/>
+      <widget03 header="$1.999,50" iconClasses="fa fa-bell bg-danger"/>
+    </b-row><!--/.row-->
+    <b-row>
+      <widget03 header="$1.999,50" iconClasses="fa fa-cogs bg-primary px-5"/>
+      <widget03 header="$1.999,50" iconClasses="fa fa-laptop bg-info px-5"/>
+      <widget03 header="$1.999,50" iconClasses="fa fa-moon-o bg-warning bg-primary px-5"/>
+      <widget03 header="$1.999,50" iconClasses="fa fa-bell bg-danger px-5"/>
+    </b-row><!--/.row-->
+    <b-row>
+      <social-media-widget type="facebook" :dataPoints="[65, 59, 84, 84, 51, 55, 40]"
+                           rightHeader="89k" rightFooter="friends" leftHeader="459" leftFooter="feeds"/>
+      <social-media-widget type="twitter" :dataPoints="[1, 13, 9, 17, 34, 41, 38]"
+                           rightHeader="973k" rightFooter="followers" leftHeader="1.792" leftFooter="tweets"/>
+      <social-media-widget type="linkedin" :dataPoints="[78, 81, 80, 45, 34, 12, 40]"
+                           rightHeader="500+" rightFooter="contracts" leftHeader="292" leftFooter="feeds"/>
+      <social-media-widget type="google-plus" :dataPoints="[35, 23, 56, 22, 97, 23, 64]"
+                           rightHeader="894" rightFooter="followers" leftHeader="92" leftFooter="circles"/>
     </b-row><!--/.row-->
     <b-card-group class="mb-4">
-      <b-card>
-        <div class="h1 text-muted text-right mb-4">
-          <i class="icon-people"></i>
-        </div>
-        <div class="h4 mb-0">87.500</div>
-        <small class="text-muted text-uppercase font-weight-bold">Visitors</small>
-        <b-progress height={} class="progress-xs mt-3 mb-0" variant="info" :value="25"/>
-      </b-card>
-      <b-card>
-        <div class="h1 text-muted text-right mb-4">
-          <i class="icon-user-follow"></i>
-        </div>
-        <div class="h4 mb-0">385</div>
-        <small class="text-muted text-uppercase font-weight-bold">New Clients</small>
-        <b-progress height={} class="progress-xs mt-3 mb-0" variant="success" :value="25"/>
-      </b-card>
-      <b-card>
-        <div class="h1 text-muted text-right mb-4">
-          <i class="icon-basket-loaded"></i>
-        </div>
-        <div class="h4 mb-0">1238</div>
-        <small class="text-muted text-uppercase font-weight-bold">Products sold</small>
-        <b-progress height={} class="progress-xs mt-3 mb-0" variant="warning" :value="25"/>
-      </b-card>
-      <b-card>
-        <div class="h1 text-muted text-right mb-4">
-          <i class="icon-pie-chart"></i>
-        </div>
-        <div class="h4 mb-0">28%</div>
-        <small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
-        <b-progress height={} class="progress-xs mt-3 mb-0" :value="25"/>
-      </b-card>
-      <b-card>
-        <div class="h1 text-muted text-right mb-4">
-          <i class="icon-speedometer"></i>
-        </div>
-        <div class="h4 mb-0">5:34:11</div>
-        <small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
-        <b-progress height={} class="progress-xs mt-3 mb-0" variant="danger" :value="25"/>
-      </b-card>
+      <widget04 iconClasses="icon-people" header="87.500" text="Visitors" variant="info"/>
+      <widget04 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
+      <widget04 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
+      <widget04 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
+      <widget04 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
     </b-card-group>
     <b-row>
       <b-col sm="6" md="2">
-        <b-card>
-          <div class="h1 text-muted text-right mb-4">
-            <i class="icon-people"></i>
-          </div>
-          <div class="h4 mb-0">87.500</div>
-          <small class="text-muted text-uppercase font-weight-bold">Visitors</small>
-          <b-progress height={} class="progress-xs mt-3 mb-0" variant="info" :value="25"/>
-        </b-card>
+        <widget04 iconClasses="icon-people" header="87.500" text="visitors" variant="info"/>
       </b-col>
       <b-col sm="6" md="2">
-        <b-card>
-          <div class="h1 text-muted text-right mb-4">
-            <i class="icon-user-follow"></i>
-          </div>
-          <div class="h4 mb-0">385</div>
-          <small class="text-muted text-uppercase font-weight-bold">New Clients</small>
-          <b-progress height={} class="progress-xs mt-3 mb-0" variant="success" :value="25"/>
-        </b-card>
+        <widget04 iconClasses="icon-user-follow" header="385" text="New Clients" variant="success"/>
       </b-col>
       <b-col sm="6" md="2">
-        <b-card>
-          <div class="h1 text-muted text-right mb-4">
-            <i class="icon-basket-loaded"></i>
-          </div>
-          <div class="h4 mb-0">1238</div>
-          <small class="text-muted text-uppercase font-weight-bold">Products sold</small>
-          <b-progress height={} class="progress-xs mt-3 mb-0" variant="warning" :value="25"/>
-        </b-card>
+        <widget04 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="warning"/>
       </b-col>
       <b-col sm="6" md="2">
-        <b-card>
-          <div class="h1 text-muted text-right mb-4">
-            <i class="icon-pie-chart"></i>
-          </div>
-          <div class="h4 mb-0">28%</div>
-          <small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
-          <b-progress height={} class="progress-xs mt-3 mb-0" :value="25"/>
-        </b-card>
+        <widget04 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors"/>
       </b-col>
       <b-col sm="6" md="2">
-        <b-card>
-          <div class="h1 text-muted text-right mb-4">
-            <i class="icon-speedometer"></i>
-          </div>
-          <div class="h4 mb-0">5:34:11</div>
-          <small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
-          <b-progress height={} class="progress-xs mt-3 mb-0" variant="danger" :value="25"/>
-        </b-card>
+        <widget04 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="danger"/>
       </b-col>
       <b-col sm="6" md="2">
-        <b-card>
-          <div class="h1 text-muted text-right mb-4">
-            <i class="icon-speech"></i>
-          </div>
-          <div class="h4 mb-0">972</div>
-          <small class="text-muted text-uppercase font-weight-bold">Comments</small>
-          <b-progress height={} class="progress-xs mt-3 mb-0" variant="info" :value="25"/>
-        </b-card>
+        <widget04 iconClasses="icon-speech" header="972" text="Comments" variant="info"/>
       </b-col>
-    </b-row><!--/.row-->
+    </b-row>
     <b-row>
       <b-col sm="6" md="2">
-        <b-card class="text-white bg-info">
-          <div class="h1 text-muted text-right mb-4">
-            <i class="icon-people"></i>
-          </div>
-          <div class="h4 mb-0">87.500</div>
-          <small class="text-muted text-uppercase font-weight-bold">Visitors</small>
-          <b-progress height={} class="progress-white progress-xs mt-3" :value="25"/>
-        </b-card>
+        <widget04 iconClasses="icon-people" header="87.500" text="visitors" variant="background-info"/>
       </b-col>
       <b-col sm="6" md="2">
-        <b-card class="text-white bg-success">
-          <div class="h1 text-muted text-right mb-4">
-            <i class="icon-user-follow"></i>
-          </div>
-          <div class="h4 mb-0">385</div>
-          <small class="text-muted text-uppercase font-weight-bold">New Clients</small>
-          <b-progress height={} class="progress-white progress-xs mt-3" :value="25"/>
-        </b-card>
+        <widget04 iconClasses="icon-user-follow" header="385" text="New Clients" variant="background-success"/>
       </b-col>
       <b-col sm="6" md="2">
-        <b-card class="text-white bg-warning">
-          <div class="h1 text-muted text-right mb-4">
-            <i class="icon-basket-loaded"></i>
-          </div>
-          <div class="h4 mb-0">1238</div>
-          <small class="text-muted text-uppercase font-weight-bold">Products sold</small>
-          <b-progress height={} class="progress-white progress-xs mt-3" :value="25"/>
-        </b-card>
+        <widget04 iconClasses="icon-basket-loaded" header="1238" text="Products sold" variant="background-warning"/>
       </b-col>
       <b-col sm="6" md="2">
-        <b-card class="text-white bg-primary">
-          <div class="h1 text-muted text-right mb-4">
-            <i class="icon-pie-chart"></i>
-          </div>
-          <div class="h4 mb-0">28%</div>
-          <small class="text-muted text-uppercase font-weight-bold">Returning Visitors</small>
-          <b-progress height={} class="progress-white progress-xs mt-3" :value="25"/>
-        </b-card>
+        <widget04 iconClasses="icon-pie-chart" header="28%" text="Returning Visitors" variant="background-primary"/>
       </b-col>
       <b-col sm="6" md="2">
-        <b-card class="text-white bg-danger">
-          <div class="h1 text-muted text-right mb-4">
-            <i class="icon-speedometer"></i>
-          </div>
-          <div class="h4 mb-0">5:34:11</div>
-          <small class="text-muted text-uppercase font-weight-bold">Avg. Time</small>
-          <b-progress height={} class="progress-white progress-xs mt-3" :value="25"/>
-        </b-card>
+        <widget04 iconClasses="icon-speedometer" header="5:34:11" text="Avg. Time" variant="background-danger"/>
       </b-col>
       <b-col sm="6" md="2">
-        <b-card class="text-white bg-info">
-          <div class="h1 text-muted text-right mb-4">
-            <i class="icon-speech"></i>
-          </div>
-          <div class="h4 mb-0">972</div>
-          <small class="text-muted text-uppercase font-weight-bold">Comments</small>
-          <b-progress height={} class="progress-white progress-xs mt-3" :value="25"/>
-        </b-card>
+        <widget04 iconClasses="icon-speech" header="972" text="Comments" variant="background-info"/>
       </b-col>
-    </b-row><!--/.row-->
+    </b-row>
   </div>
 </template>
 
 <script>
-import SocialBoxChartExample from './dashboard/SocialBoxChartExample'
+import Widget01 from './widgets/Widget01'
+import Widget02 from './widgets/Widget02'
+import Widget03 from './widgets/Widget03'
+import SocialMediaWidget from './widgets/SocialMediaWidget'
+import Widget04 from './widgets/Widget04'
+
 export default {
   name: 'widgets',
   components: {
-    SocialBoxChartExample
+    Widget01,
+    Widget02,
+    Widget03,
+    SocialMediaWidget,
+    Widget04
   },
   data () {
     return {
diff --git a/src/views/widgets/SocialMediaWidget.vue b/src/views/widgets/SocialMediaWidget.vue
new file mode 100644
index 00000000..1640014a
--- /dev/null
+++ b/src/views/widgets/SocialMediaWidget.vue
@@ -0,0 +1,60 @@
+<template>
+  <b-col md="3" sm="6">
+    <div class="brand-card">
+      <div :class="'bg-' + type" class="brand-card-header bg-facebook">
+        <i  class="fa" :class="'fa-'+ type"></i>
+        <div class="chart-wrapper">
+          <social-box-chart-example :data="dataPoints" />
+        </div>
+      </div>
+      <div class="brand-card-body">
+        <div>
+          <div class="text-value">{{rightHeader}}</div>
+          <div class="text-uppercase text-muted small">{{rightFooter}}</div>
+        </div>
+        <div>
+          <div class="text-value">{{leftHeader}}</div>
+          <div class="text-uppercase text-muted small">{{leftFooter}}</div>
+        </div>
+      </div>
+    </div>
+  </b-col>
+</template>
+
+<script>
+import SocialBoxChartExample from './../dashboard/SocialBoxChartExample'
+
+
+export default {
+  name: 'SocialMediaWidget',
+  components: {
+    SocialBoxChartExample
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'facebook'
+    },
+    dataPoints: {
+      type: Array,
+      default: [65, 59, 84, 84, 51, 55, 40]
+    },
+    rightHeader: {
+      type: String,
+      default: '89k'
+    },
+    rightFooter: {
+      type: String,
+      default: 'friends'
+    },
+    leftHeader: {
+      type: String,
+      default: '459'
+    },
+    leftFooter: {
+      type: String,
+      default: 'feeds'
+    },
+  }
+}
+</script>
diff --git a/src/views/widgets/Widget01.vue b/src/views/widgets/Widget01.vue
new file mode 100644
index 00000000..5c40c4fd
--- /dev/null
+++ b/src/views/widgets/Widget01.vue
@@ -0,0 +1,51 @@
+<template>
+  <b-col sm="6" lg="3">
+    <b-card :class="styleClasses">
+      <div class="h4 m-0">{{header}}</div>
+      <div>{{text}}</div>
+      <b-progress height={} :variant="variant" :value="value"
+                  :class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
+      <small class="text-muted">{{footer}}</small>
+    </b-card>
+  </b-col>
+</template>
+
+<script>
+export default {
+  name: 'Widget01',
+  data () {
+    return{
+      backgroundColor: '',
+      styleClasses: '',
+    }
+  },
+  created ()  {
+    if(this.variant.includes('background')){
+      this.backgroundColor = this.variant.replace('background-','');
+      this.styleClasses = 'text-white bg-' + this.backgroundColor
+    }
+  },
+  props: {
+    header: {
+      type: String,
+      default: 'Lorem ipsum...'
+    },
+    text: {
+      type: String,
+      default: 'Lorem ipsum...'
+    },
+    variant: {
+      type: String,
+      default: ''
+    },
+    footer: {
+      type: String,
+      default: 'Lorem ipsum dolor sit amet enim.'
+    },
+    value: {
+      type: Number,
+      default: 25
+    },
+  }
+}
+</script>
diff --git a/src/views/widgets/Widget02.vue b/src/views/widgets/Widget02.vue
new file mode 100644
index 00000000..bc4f767c
--- /dev/null
+++ b/src/views/widgets/Widget02.vue
@@ -0,0 +1,42 @@
+<template>
+  <b-col cols="12" sm="6" lg="3">
+    <b-card :no-body="true" footer-class="px-3 py-2">
+      <b-card-body class="p-3 clearfix">
+        <i :class="iconClasses" class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
+        <div class="h5 text-primary mb-0 mt-2">{{header}}</div>
+        <div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
+      </b-card-body>
+      <div slot="footer" v-if="showLink">
+        <b-link class="font-weight-bold font-xs btn-block text-muted" :href="link">View More <i class="fa fa-angle-right float-right font-lg"></i></b-link>
+      </div>
+    </b-card>
+  </b-col>
+</template>
+
+<script>
+export default {
+  name: 'Widget02',
+  props: {
+    iconClasses: {
+      type: String,
+      default: 'fa fa-cogs bg-primary'
+    },
+    header: {
+      type: String,
+      default: 'Lorem ipsum...'
+    },
+    text: {
+      type: String,
+      default: 'Income'
+    },
+    showLink: {
+      type: Boolean,
+      default: false
+    },
+    link: {
+      type: String,
+      default: '#'
+    },
+  }
+}
+</script>
diff --git a/src/views/widgets/Widget03.vue b/src/views/widgets/Widget03.vue
index 008d4a7f..083a1146 100644
--- a/src/views/widgets/Widget03.vue
+++ b/src/views/widgets/Widget03.vue
@@ -1,31 +1,31 @@
 <template>
-  <div class={classes}>
-    <div class={classCardHeader}>
-      <i class={icon}></i>
-      {children}
-    </div>
-    <div class={classCardBody}>
-      <div>
-        <div class="text-value">{vals[1]}</div>
-        <div class="text-uppercase text-muted small">{keys[1]}</div>
-      </div>
-      <div>
-        <div class="text-value">{vals[2]}</div>
-        <div class="text-uppercase text-muted small">{keys[2]}</div>
-      </div>
-    </div>
-  </div>
+  <b-col cols="12" sm="6" lg="3">
+    <b-card :no-body="true">
+      <b-card-body class="p-0 clearfix">
+        <i :class="iconClasses" class="p-4 font-2xl mr-3 float-left"></i>
+        <div class="h5 text-primary mb-0 pt-3">{{header}}</div>
+        <div class="text-muted text-uppercase font-weight-bold font-xs">{{text}}</div>
+      </b-card-body>
+    </b-card>
+  </b-col>
 </template>
 
 <script>
 export default {
   name: 'Widget03',
   props: {
-    value: {
-      type: Boolean,
-      default: true
-    }
+    iconClasses: {
+      type: String,
+      default: 'fa fa-cogs bg-primary'
+    },
+    header: {
+      type: String,
+      default: 'Lorem ipsum...'
+    },
+    text: {
+      type: String,
+      default: 'Income'
+    },
   }
 }
 </script>
-
diff --git a/src/views/widgets/Widget04.vue b/src/views/widgets/Widget04.vue
new file mode 100644
index 00000000..6cd63cfe
--- /dev/null
+++ b/src/views/widgets/Widget04.vue
@@ -0,0 +1,51 @@
+<template>
+    <b-card :class="styleClasses">
+      <div class="h1 text-muted text-right mb-4">
+        <i :class="iconClasses"></i>
+      </div>
+      <div class="h4 mb-0">{{header}}</div>
+      <small class="text-muted text-uppercase font-weight-bold">{{text}}</small>
+      <b-progress height={} :variant="variant" :value="value"
+                  :class="[backgroundColor ? 'progress-white' : '', 'progress-xs my-3 mb-0']"/>
+    </b-card>
+</template>
+
+<script>
+export default {
+  name: 'Widget04',
+  data () {
+    return{
+      backgroundColor: '',
+      styleClasses: '',
+    }
+  },
+  created ()  {
+    if(this.variant.includes('background')){
+      this.backgroundColor = this.variant.replace('background-','');
+      this.styleClasses = 'text-white bg-' + this.backgroundColor
+    }
+  },
+  props: {
+    iconClasses: {
+      type: String,
+      default: 'icon-people'
+    },
+    header: {
+      type: String,
+      default: 'Lorem ipsum...'
+    },
+    text: {
+      type: String,
+      default: 'Lorem ipsum...'
+    },
+    variant: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: Number,
+      default: 25
+    },
+  }
+}
+</script>