kiso_themes 1.0.2

data/lib/generators/kiso_themes/templates/views/dashboards/dashboard_3.html.erb

@@ -0,0 +1,148 @@
+<% content_for :js_libs, "modernizr gmaps flot chartjs demo-dashboard demo-chartjs demo-sparklines" %>
+<% content_for :no_page_header, true %>
+
+<section class="bg-light px-3 mb-3 d-flex flex-column">
+  <header class="d-flex pt-4 pb-3 align-items-center">
+    <h3 class="mr-auto">International Order Shipping</h3>
+    <button class="btn btn-icon btn-outline-primary" href="javascript:"> <i class="ti-settings "></i> </button>
+  </header>
+  <div class="row">
+    <ul class="nav nav-tabs p-0 inspectable" id="myTab" role="tablist">
+      <li class="nav-item">
+        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home"
+          role="tab" aria-controls="home" aria-expanded="true" aria-selected="true">Reports</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile"
+          role="tab" aria-controls="profile" aria-selected="false">Analytics</a>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile"
+          role="tab" aria-controls="profile" aria-selected="false">Invoices</a>
+      </li>
+    </ul>
+  </div>
+</section>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-12 col-md-4">
+      <div class="card">
+        <div class="card-body">
+          <p class="m-0"><strong>Subject Compliance Summary</strong></p>
+          <p class="small m-0 text-uppercase text-muted">Period: Nov 1 - Dec 1</p>
+          <div class="mt-3 py-4">
+            <canvas class="sales-vs-refunds" style="display: block; height: 300px; width: 600px;"></canvas>
+          </div>
+        </div>
+        <div class="card-footer d-flex align-items-center">
+          <h6 class='m-0 mr-auto'>Subject Compliance Report</h6>
+          <a class="btn btn-circle btn-outline-dark" href="">View Report</a>
+        </div>
+      </div>
+    </div>
+    <div class="col-12 col-md-4">
+      <div class="card">
+        <div class="card-body">
+          <p class="m-0"><strong>Subject Compliance Summary</strong></p>
+          <p class="small m-0 text-uppercase text-muted">Period: Nov 1 - Dec 1</p>
+          <div class="mt-3 py-4">
+            <canvas class="sales-vs-refunds-bars" style="display: block; height: 300px; width: 600px;"></canvas>
+          </div>
+        </div>
+        <div class="card-footer d-flex align-items-center">
+          <h6 class='m-0 mr-auto'>Subject Compliance Report</h6>
+          <a class="btn btn-circle btn-outline-dark" href="">View Report</a>
+        </div>
+      </div>
+    </div>
+    <div class="col-12 col-md-4">
+      <div class="card">
+        <div class="card-body">
+          <p class="m-0"><strong>Subject Compliance Summary</strong></p>
+          <p class="small m-0 text-uppercase text-muted">Period: Nov 1 - Dec 1</p>
+          <div class="mt-3 py-4">
+            <canvas class="demo-pie" style="display: block; height: 300px; width: 600px;"></canvas>
+          </div>
+        </div>
+        <div class="card-footer d-flex align-items-center">
+          <h6 class='m-0 mr-auto'>Subject Compliance Report</h6>
+          <a class="btn btn-circle btn-outline-dark" href="javascript:">View Report</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-12">
+      <div class="card card-tabbed inspectable">
+        <div class="card-header">
+          <h6>BIG CHART</h6>
+          <div class="dropdown">
+            <button class="nav-link btn btn-icon " type="button" id="salesAndRefundButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              <%= theme_icon_tag "more" %>
+            </button>
+            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="salesAndRefundButton" x-placement="bottom-end" style="position: absolute; top: 26px; left: -148px; will-change: top, left;">
+              <a class="dropdown-item" href="#">Refresh</a>
+              <a class="dropdown-item" href="#">Share</a>
+              <a class="dropdown-item" href="#">Remove</a>
+            </div>
+          </div>
+        </div>
+        <div class="card-body">
+          <div class="container-fluid">
+            <div class="row equal-cols">
+              <div class="col-12 col-md-8 d-flex align-self-center">
+                <canvas data-chartjs-line-demo="true"></canvas>
+              </div>
+              <div class="col-12 col-md-4">
+                <div class="card card-mini inspectable">
+                  <!-- component-title: Mini Card -->
+                  <div class="card-body">
+                    <div class="media">
+                      <div class="d-flex align-self-center mr-3">
+                        <span class="spark-bar-1" sparkbarcolor="#6886a7" style="width: 80px;"><%=(0..8).to_a.shuffle.join(', ') %></span>
+                      </div>
+                      <div class="media-body text-right">
+                        <h6 class="m-0 pt-2 text-muted">Page Hits</h6>
+                        <h4 class="m-0 counter" data-from="0" data-to="100" data-speed="5000" data-refresh-interval="80">192</h4>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="card card-mini inspectable">
+                  <!-- component-title: Mini Card -->
+                  <div class="card-body">
+                    <div class="media">
+                      <div class="d-flex align-self-center mr-3">
+                        <span class="spark-bar-1" sparkbarcolor="#6886a7" style="width: 80px;"><%=(0..8).to_a.shuffle.join(', ') %></span>
+                      </div>
+                      <div class="media-body text-right">
+                        <h6 class="m-0 pt-2 text-muted">Return Visitors</h6>
+                        <h4 class="m-0 counter" data-from="0" data-to="100" data-speed="5000" data-refresh-interval="80">192</h4>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="card card-mini inspectable">
+                  <!-- component-title: Mini Card -->
+                  <div class="card-body">
+                    <div class="media">
+                      <div class="d-flex align-self-center mr-3">
+                        <span class="spark-bar-1" sparkbarcolor="#6886a7" style="width: 80px;"><%=(0..8).to_a.shuffle.join(', ') %></span>
+                      </div>
+                      <div class="media-body text-right">
+                        <h6 class="m-0 pt-2 text-muted">Cancellations</h6>
+                        <h4 class="m-0 counter" data-from="0" data-to="100" data-speed="5000" data-refresh-interval="80">192</h4>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/generators/kiso_themes/templates/views/dashboards/dashboard_3.html.haml

@@ -0,0 +1,96 @@
+%body
+  - content_for :js_libs, "modernizr gmaps flot chartjs demo-dashboard demo-chartjs demo-sparklines"
+  - content_for :no_page_header, true
+  %section.bg-light.px-3.mb-3.d-flex.flex-column
+    %header.d-flex.pt-4.pb-3.align-items-center
+      %h3.mr-auto International Order Shipping
+      %button.btn.btn-icon.btn-outline-primary{href: "javascript:"}
+        %i.ti-settings
+    .row
+      %ul#myTab.nav.nav-tabs.p-0.inspectable{role: "tablist"}
+        %li.nav-item
+          %a#home-tab.nav-link.active{"aria-controls" => "home", "aria-expanded" => "true", "aria-selected" => "true", "data-toggle" => "tab", href: "#home", role: "tab"} Reports
+        %li.nav-item
+          %a#profile-tab.nav-link{"aria-controls" => "profile", "aria-selected" => "false", "data-toggle" => "tab", href: "#profile", role: "tab"} Analytics
+        %li.nav-item.dropdown
+          %a#profile-tab.nav-link{"aria-controls" => "profile", "aria-selected" => "false", "data-toggle" => "tab", href: "#profile", role: "tab"} Invoices
+  .container-fluid
+    .row
+      .col-12.col-md-4
+        .card
+          .card-body
+            %p.m-0
+              %strong Subject Compliance Summary
+            %p.small.m-0.text-uppercase.text-muted Period: Nov 1 - Dec 1
+            .mt-3.py-4
+              %canvas.sales-vs-refunds{style: "display: block; height: 300px; width: 600px;"}
+          .card-footer.d-flex.align-items-center
+            %h6.m-0.mr-auto Subject Compliance Report
+            %a.btn.btn-circle.btn-outline-dark{href: ""} View Report
+      .col-12.col-md-4
+        .card
+          .card-body
+            %p.m-0
+              %strong Subject Compliance Summary
+            %p.small.m-0.text-uppercase.text-muted Period: Nov 1 - Dec 1
+            .mt-3.py-4
+              %canvas.sales-vs-refunds-bars{style: "display: block; height: 300px; width: 600px;"}
+          .card-footer.d-flex.align-items-center
+            %h6.m-0.mr-auto Subject Compliance Report
+            %a.btn.btn-circle.btn-outline-dark{href: ""} View Report
+      .col-12.col-md-4
+        .card
+          .card-body
+            %p.m-0
+              %strong Subject Compliance Summary
+            %p.small.m-0.text-uppercase.text-muted Period: Nov 1 - Dec 1
+            .mt-3.py-4
+              %canvas.demo-pie{style: "display: block; height: 300px; width: 600px;"}
+          .card-footer.d-flex.align-items-center
+            %h6.m-0.mr-auto Subject Compliance Report
+            %a.btn.btn-circle.btn-outline-dark{href: "javascript:"} View Report
+    .row
+      .col-12
+        .card.card-tabbed.inspectable
+          .card-header
+            %h6 BIG CHART
+            .dropdown
+              %button#salesAndRefundButton.nav-link.btn.btn-icon{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", type: "button"}
+                = theme_icon_tag "more"
+              .dropdown-menu.dropdown-menu-right{"aria-labelledby" => "salesAndRefundButton", style: "position: absolute; top: 26px; left: -148px; will-change: top, left;", "x-placement" => "bottom-end"}
+                %a.dropdown-item{href: "#"} Refresh
+                %a.dropdown-item{href: "#"} Share
+                %a.dropdown-item{href: "#"} Remove
+          .card-body
+            .container-fluid
+              .row.equal-cols
+                .col-12.col-md-8.d-flex.align-self-center
+                  %canvas{"data-chartjs-line-demo" => "true"}
+                .col-12.col-md-4
+                  .card.card-mini.inspectable
+                    / component-title: Mini Card
+                    .card-body
+                      .media
+                        .d-flex.align-self-center.mr-3
+                          %span.spark-bar-1{sparkbarcolor: "#6886a7", style: "width: 80px;"}= (0..8).to_a.shuffle.join(', ')
+                        .media-body.text-right
+                          %h6.m-0.pt-2.text-muted Page Hits
+                          %h4.m-0.counter{"data-from" => "0", "data-refresh-interval" => "80", "data-speed" => "5000", "data-to" => "100"} 192
+                  .card.card-mini.inspectable
+                    / component-title: Mini Card
+                    .card-body
+                      .media
+                        .d-flex.align-self-center.mr-3
+                          %span.spark-bar-1{sparkbarcolor: "#6886a7", style: "width: 80px;"}= (0..8).to_a.shuffle.join(', ')
+                        .media-body.text-right
+                          %h6.m-0.pt-2.text-muted Return Visitors
+                          %h4.m-0.counter{"data-from" => "0", "data-refresh-interval" => "80", "data-speed" => "5000", "data-to" => "100"} 192
+                  .card.card-mini.inspectable
+                    / component-title: Mini Card
+                    .card-body
+                      .media
+                        .d-flex.align-self-center.mr-3
+                          %span.spark-bar-1{sparkbarcolor: "#6886a7", style: "width: 80px;"}= (0..8).to_a.shuffle.join(', ')
+                        .media-body.text-right
+                          %h6.m-0.pt-2.text-muted Cancellations
+                          %h4.m-0.counter{"data-from" => "0", "data-refresh-interval" => "80", "data-speed" => "5000", "data-to" => "100"} 192

data/lib/generators/kiso_themes/templates/views/dashboards/dashboard_3.html.slim

@@ -0,0 +1,96 @@
+body
+  - content_for :js_libs, "modernizr gmaps flot chartjs demo-dashboard demo-chartjs demo-sparklines"
+  - content_for :no_page_header, true
+  section.bg-light.px-3.mb-3.d-flex.flex-column
+    header.d-flex.pt-4.pb-3.align-items-center
+      h3.mr-auto International Order Shipping
+      button.btn.btn-icon.btn-outline-primary href: "javascript:" 
+        i.ti-settings
+    .row
+      ul#myTab.nav.nav-tabs.p-0.inspectable role: "tablist" 
+        li.nav-item
+          a#home-tab.nav-link.active aria-controls="home" aria-expanded="true" aria-selected="true" data-toggle="tab", href: "#home", role: "tab"  Reports
+        li.nav-item
+          a#profile-tab.nav-link aria-controls="profile" aria-selected="false" data-toggle="tab", href: "#profile", role: "tab"  Analytics
+        li.nav-item.dropdown
+          a#profile-tab.nav-link aria-controls="profile" aria-selected="false" data-toggle="tab", href: "#profile", role: "tab"  Invoices
+  .container-fluid
+    .row
+      .col-12.col-md-4
+        .card
+          .card-body
+            p.m-0
+              strong Subject Compliance Summary
+            p.small.m-0.text-uppercase.text-muted Period: Nov 1 - Dec 1
+            .mt-3.py-4
+              canvas.sales-vs-refunds style: "display: block; height: 300px; width: 600px;" 
+          .card-footer.d-flex.align-items-center
+            h6.m-0.mr-auto Subject Compliance Report
+            a.btn.btn-circle.btn-outline-dark href: ""  View Report
+      .col-12.col-md-4
+        .card
+          .card-body
+            p.m-0
+              strong Subject Compliance Summary
+            p.small.m-0.text-uppercase.text-muted Period: Nov 1 - Dec 1
+            .mt-3.py-4
+              canvas.sales-vs-refunds-bars style: "display: block; height: 300px; width: 600px;" 
+          .card-footer.d-flex.align-items-center
+            h6.m-0.mr-auto Subject Compliance Report
+            a.btn.btn-circle.btn-outline-dark href: ""  View Report
+      .col-12.col-md-4
+        .card
+          .card-body
+            p.m-0
+              strong Subject Compliance Summary
+            p.small.m-0.text-uppercase.text-muted Period: Nov 1 - Dec 1
+            .mt-3.py-4
+              canvas.demo-pie style: "display: block; height: 300px; width: 600px;" 
+          .card-footer.d-flex.align-items-center
+            h6.m-0.mr-auto Subject Compliance Report
+            a.btn.btn-circle.btn-outline-dark href: "javascript:"  View Report
+    .row
+      .col-12
+        .card.card-tabbed.inspectable
+          .card-header
+            h6 BIG CHART
+            .dropdown
+              button#salesAndRefundButton.nav-link.btn.btn-icon aria-expanded="false" aria-haspopup="true" data-toggle="dropdown", type: "button" 
+                = theme_icon_tag "more"
+              .dropdown-menu.dropdown-menu-right aria-labelledby="salesAndRefundButton", style: "position: absolute; top: 26px; left: -148px; will-change: top, left;" x-placement="bottom-end" 
+                a.dropdown-item href: "#"  Refresh
+                a.dropdown-item href: "#"  Share
+                a.dropdown-item href: "#"  Remove
+          .card-body
+            .container-fluid
+              .row.equal-cols
+                .col-12.col-md-8.d-flex.align-self-center
+                  canvas data-chartjs-line-demo="true" 
+                .col-12.col-md-4
+                  .card.card-mini.inspectable
+                    /! component-title: Mini Card
+                    .card-body
+                      .media
+                        .d-flex.align-self-center.mr-3
+                          span.spark-bar-1 sparkbarcolor: "#6886a7", style: "width: 80px;" = (0..8).to_a.shuffle.join(', ')
+                        .media-body.text-right
+                          h6.m-0.pt-2.text-muted Page Hits
+                          h4.m-0.counter data-from="0" data-refresh-interval="80" data-speed="5000" data-to="100"  192
+                  .card.card-mini.inspectable
+                    /! component-title: Mini Card
+                    .card-body
+                      .media
+                        .d-flex.align-self-center.mr-3
+                          span.spark-bar-1 sparkbarcolor: "#6886a7", style: "width: 80px;" = (0..8).to_a.shuffle.join(', ')
+                        .media-body.text-right
+                          h6.m-0.pt-2.text-muted Return Visitors
+                          h4.m-0.counter data-from="0" data-refresh-interval="80" data-speed="5000" data-to="100"  192
+                  .card.card-mini.inspectable
+                    /! component-title: Mini Card
+                    .card-body
+                      .media
+                        .d-flex.align-self-center.mr-3
+                          span.spark-bar-1 sparkbarcolor: "#6886a7", style: "width: 80px;" = (0..8).to_a.shuffle.join(', ')
+                        .media-body.text-right
+                          h6.m-0.pt-2.text-muted Cancellations
+                          h4.m-0.counter data-from="0" data-refresh-interval="80" data-speed="5000" data-to="100"  192

data/lib/generators/kiso_themes/templates/views/dashboards/dashboard_4.html.erb

@@ -0,0 +1,126 @@
+<% content_for :no_page_header, true %>
+<% content_for :js_libs, "modernizr gmaps flot chartjs demo-dashboard demo-chartjs demo-sparklines" %>
+
+<section class="bg-light px-3 pt-5 pb-3 mb-3 d-flex flex-column">
+  <div class="container-fluid">
+    <div class="row equal-cols">
+
+      <div class="col-12 col-md-3">
+        <h4 class="leading-normal m-0 p-0">Welcome back, Elliot.</h4>
+        <p class="leading-normal small">Today is going to be a great day!</p>
+        <ul class="m-0 p-0 mb-5 small">
+          <li>You have 5 new followers.</li>
+          <li>132 people have liked your posts.</li>
+          <li>Network maintenance is happening at 5pm today.</li>
+        </ul>
+        <a class="btn btn-primary mb-3" href="javascript:">Go to Timeline &rarr;</a>
+        <a class="btn btn-info" href="javascript:">See activity feed &rarr;</a>
+      </div>
+
+      <div class="col-12 col-md-6">
+        <div class="card card-full-height">
+          <div class="card-body">
+            <canvas data-chartjs-line-demo></canvas>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 col-md-3 d-flex flex-column justify-items-between">
+
+        <div class="card card-mini card-mini-solid-icon">
+          <div class="card-body">
+            <div class="media">
+              <div class="media-body text-left">
+                <h6 class="m-0 text-muted">Page Hits</h6>
+                <h4 class="m-0 counter" data-from="0" data-to="100" data-speed="5000"
+                  data-refresh-interval="80">192</h4>
+              </div>
+              <div class="d-flex align-self-center text-primary ml-3">
+                <span>
+                  <i class="display-4 ti-world  "></i>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="card card-mini card-mini-solid-icon">
+          <div class="card-body">
+            <div class="media">
+              <div class="media-body text-left">
+                <h6 class="m-0 text-muted">Ecoin Transfers</h6>
+                <h4 class="m-0 counter" data-from="0" data-to="22000" data-speed="5000"
+                  data-refresh-interval="80">22,000</h4>
+              </div>
+              <div class="d-flex align-self-center text-primary ml-3">
+                <span>
+                  <i class="display-4 ti-pulse  "></i>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="card card-mini card-mini-solid-icon">
+          <div class="card-body">
+            <div class="media">
+              <div class="media-body text-left">
+                <h6 class="m-0 text-muted">Transactions</h6>
+                <h4 class="m-0 counter" data-from="0" data-to="1383" data-speed="5000"
+                  data-refresh-interval="80">22,000</h4>
+              </div>
+              <div class="d-flex align-self-center text-primary ml-3">
+                <span>
+                  <i class="display-4 ti-package  "></i>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-12">
+      <div class="card inspectable">
+        <div class="card-header d-flex align-items-center">
+          <h6>Most Active Users</h6>
+          <div class="ml-auto btn-group" role="group" aria-label="Basic example">
+            <button type="button" class="btn btn-default active">Week</button>
+            <button type="button" class="btn btn-default">Month</button>
+            <button type="button" class="btn btn-default">Quarter</button>
+          </div>
+        </div>
+        <div class="table-responsive">
+          <table class="table table-hover table-striped">
+            <thead>
+              <tr>
+                <th>Rank</th>
+                <th>Email</th>
+                <th>Name</th>
+                <th>Installs</th>
+                <th>Last Active</th>
+                <th>Countries</th>
+                <th>Activity</th>
+              </tr>
+            </thead>
+            <% (1..10).each do |index| %>
+              <tr>
+                <td><%= index %></td>
+                <td>johnny@appleseed.com</td>
+                <td>Johnny Appleseed</td>
+                <td><%=sprintf('%.2f', (rand * 1000).round).gsub('.00','').reverse.scan(/(\d*\.\d{1,3}|\d{1,3})/).join(',').reverse %></td>
+                <td>Wed, 3rd Oct 2018</td>
+                <td>Canada, USA</td>
+                <td><span class="spark-bar-1" sparkbarcolor="#6886a7" style="width: 100px;"><%=(0..8).to_a.shuffle.join(', ') %></span></td>
+              </tr>
+            <% end %>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/generators/kiso_themes/templates/views/dashboards/dashboard_4.html.haml

@@ -0,0 +1,77 @@
+- content_for :no_page_header, true
+- content_for :js_libs, "modernizr gmaps flot chartjs demo-dashboard demo-chartjs demo-sparklines"
+%section.bg-light.px-3.pt-5.pb-3.mb-3.d-flex.flex-column
+  .container-fluid
+    .row.equal-cols
+      .col-12.col-md-3
+        %h4.leading-normal.m-0.p-0 Welcome back, Elliot.
+        %p.leading-normal.small Today is going to be a great day!
+        %ul.m-0.p-0.mb-5.small
+          %li You have 5 new followers.
+          %li 132 people have liked your posts.
+          %li Network maintenance is happening at 5pm today.
+        %a.btn.btn-primary.mb-3{href: "javascript:"} Go to Timeline →
+        %a.btn.btn-info{href: "javascript:"} See activity feed →
+      .col-12.col-md-6
+        .card.card-full-height
+          .card-body
+            %canvas{"data-chartjs-line-demo" => ""}
+      .col-12.col-md-3.d-flex.flex-column.justify-items-between
+        .card.card-mini.card-mini-solid-icon
+          .card-body
+            .media
+              .media-body.text-left
+                %h6.m-0.text-muted Page Hits
+                %h4.m-0.counter{"data-from" => "0", "data-refresh-interval" => "80", "data-speed" => "5000", "data-to" => "100"} 192
+              .d-flex.align-self-center.text-primary.ml-3
+                %span
+                  %i.display-4.ti-world
+        .card.card-mini.card-mini-solid-icon
+          .card-body
+            .media
+              .media-body.text-left
+                %h6.m-0.text-muted Ecoin Transfers
+                %h4.m-0.counter{"data-from" => "0", "data-refresh-interval" => "80", "data-speed" => "5000", "data-to" => "22000"} 22,000
+              .d-flex.align-self-center.text-primary.ml-3
+                %span
+                  %i.display-4.ti-pulse
+        .card.card-mini.card-mini-solid-icon
+          .card-body
+            .media
+              .media-body.text-left
+                %h6.m-0.text-muted Transactions
+                %h4.m-0.counter{"data-from" => "0", "data-refresh-interval" => "80", "data-speed" => "5000", "data-to" => "1383"} 22,000
+              .d-flex.align-self-center.text-primary.ml-3
+                %span
+                  %i.display-4.ti-package
+.container-fluid
+  .row
+    .col-12
+      .card.inspectable
+        .card-header.d-flex.align-items-center
+          %h6 Most Active Users
+          .ml-auto.btn-group{"aria-label" => "Basic example", role: "group"}
+            %button.btn.btn-default.active{type: "button"} Week
+            %button.btn.btn-default{type: "button"} Month
+            %button.btn.btn-default{type: "button"} Quarter
+        .table-responsive
+          %table.table.table-hover.table-striped
+            %thead
+              %tr
+                %th Rank
+                %th Email
+                %th Name
+                %th Installs
+                %th Last Active
+                %th Countries
+                %th Activity
+            - (1..10).each do |index|
+              %tr
+                %td= index
+                %td johnny@appleseed.com
+                %td Johnny Appleseed
+                %td= sprintf('%.2f', (rand * 1000).round).gsub('.00','').reverse.scan(/(\d*\.\d{1,3}|\d{1,3})/).join(',').reverse
+                %td Wed, 3rd Oct 2018
+                %td Canada, USA
+                %td
+                  %span.spark-bar-1{sparkbarcolor: "#6886a7", style: "width: 100px;"}= (0..8).to_a.shuffle.join(', ')

data/lib/generators/kiso_themes/templates/views/dashboards/dashboard_4.html.slim

@@ -0,0 +1,77 @@
+- content_for :no_page_header, true
+- content_for :js_libs, "modernizr gmaps flot chartjs demo-dashboard demo-chartjs demo-sparklines"
+section.bg-light.px-3.pt-5.pb-3.mb-3.d-flex.flex-column
+  .container-fluid
+    .row.equal-cols
+      .col-12.col-md-3
+        h4.leading-normal.m-0.p-0 Welcome back, Elliot.
+        p.leading-normal.small Today is going to be a great day!
+        ul.m-0.p-0.mb-5.small
+          li You have 5 new followers.
+          li 132 people have liked your posts.
+          li Network maintenance is happening at 5pm today.
+        a.btn.btn-primary.mb-3 href: "javascript:"  Go to Timeline →
+        a.btn.btn-info href: "javascript:"  See activity feed →
+      .col-12.col-md-6
+        .card.card-full-height
+          .card-body
+            canvas data-chartjs-line-demo="" 
+      .col-12.col-md-3.d-flex.flex-column.justify-items-between
+        .card.card-mini.card-mini-solid-icon
+          .card-body
+            .media
+              .media-body.text-left
+                h6.m-0.text-muted Page Hits
+                h4.m-0.counter data-from="0" data-refresh-interval="80" data-speed="5000" data-to="100"  192
+              .d-flex.align-self-center.text-primary.ml-3
+                span
+                  i.display-4.ti-world
+        .card.card-mini.card-mini-solid-icon
+          .card-body
+            .media
+              .media-body.text-left
+                h6.m-0.text-muted Ecoin Transfers
+                h4.m-0.counter data-from="0" data-refresh-interval="80" data-speed="5000" data-to="22000"  22,000
+              .d-flex.align-self-center.text-primary.ml-3
+                span
+                  i.display-4.ti-pulse
+        .card.card-mini.card-mini-solid-icon
+          .card-body
+            .media
+              .media-body.text-left
+                h6.m-0.text-muted Transactions
+                h4.m-0.counter data-from="0" data-refresh-interval="80" data-speed="5000" data-to="1383"  22,000
+              .d-flex.align-self-center.text-primary.ml-3
+                span
+                  i.display-4.ti-package
+.container-fluid
+  .row
+    .col-12
+      .card.inspectable
+        .card-header.d-flex.align-items-center
+          h6 Most Active Users
+          .ml-auto.btn-group aria-label=("Basic example"), role: "group" 
+            button.btn.btn-default.active type: "button"  Week
+            button.btn.btn-default type: "button"  Month
+            button.btn.btn-default type: "button"  Quarter
+        .table-responsive
+          table.table.table-hover.table-striped
+            thead
+              tr
+                th Rank
+                th Email
+                th Name
+                th Installs
+                th Last Active
+                th Countries
+                th Activity
+            - (1..10).each do |index|
+              tr
+                td= index
+                td johnny@appleseed.com
+                td Johnny Appleseed
+                td= sprintf('%.2f', (rand * 1000).round).gsub('.00','').reverse.scan(/(\d*\.\d 1,3}|\d{1,3 )/).join(',').reverse
+                td Wed, 3rd Oct 2018
+                td Canada, USA
+                td
+                  span.spark-bar-1 sparkbarcolor: "#6886a7", style: "width: 100px;" = (0..8).to_a.shuffle.join(', ')

data/lib/generators/kiso_themes/templates/views/emails/_email_footer.html.erb

@@ -0,0 +1,16 @@
+<table border="0" cellpadding="10" cellspacing="0" width="100%">
+  <tr>
+    <td align="left" valign="top">
+      <br />
+      <br />
+      <span class="applefix" style="font-family:Arial; font-size:14px; color:#888888;">
+        <b>Our Address:</b><br />
+        My App<br />
+        123 Second Street<br />
+        Anywhere Town, USA 45678
+      </span>
+      <br />
+      <br />
+    </td>
+  </tr>
+</table>

data/lib/generators/kiso_themes/templates/views/emails/_email_footer.html.haml

@@ -0,0 +1,15 @@
+%table{border: "0", cellpadding: "10", cellspacing: "0", width: "100%"}
+  %tr
+    %td{align: "left", valign: "top"}
+      %br/
+      %br/
+      %span.applefix{style: "font-family:Arial; font-size:14px; color:#888888;"}
+        %b Our Address:
+        %br/
+        My App
+        %br/
+        123 Second Street
+        %br/
+        Anywhere Town, USA 45678
+      %br/
+      %br/