<div class="padding">
	<div class="margin">
		<h5 class="mb-0 _300">Hi Jone, Welcome back</h5>
		<small class="text-muted">Awesome uikit for your next Material Design project</small>
	</div>
	<div class="row">
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="box p-a">
          <div class="pull-left m-r">
            <span class="w-40 {{app.setting.theme.warn}} text-center rounded">
              <i class="material-icons">shopping_basket</i>
            </span>
          </div>
          <div class="clear">
            <h4 class="m-0 text-md"><a href>75 <span class="text-sm">Sales</span></a></h4>
            <small class="text-muted">6 waiting payment.</small>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="box-color p-a {{app.setting.theme.primary}}">
          <div class="pull-right m-l">
            <span class="w-40 dker text-center rounded">
              <i class="material-icons">local_shipping</i>
            </span>
          </div>
          <div class="clear">
            <h4 class="m-0 text-md"><a href>40 <span class="text-sm">Orders</span></a></h4>
            <small class="text-muted">38 Shipped.</small>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="box p-a">
          <div class="pull-right m-l">
            <span class="w-40 {{app.setting.theme.accent}} text-center rounded">
              <i class="material-icons">people</i>
            </span>
          </div>
          <div class="clear">
            <h4 class="m-0 text-md"><a href>6,000 <span class="text-sm">Members</span></a></h4>
            <small class="text-muted">632 activities post.</small>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="box-color p-a {{app.setting.theme.accent}}">
          <div class="pull-left m-r">
            <span class="w-40 dker text-center rounded">
              <i class="material-icons">comment</i>
            </span>
          </div>
          <div class="clear">
            <h4 class="m-0 text-md"><a href>69 <span class="text-sm">Comments</span></a></h4>
            <small class="text-muted">5 approved.</small>
          </div>
        </div>
      </div>
	</div>
	<div class="row no-gutter box">
        <div class="col-sm-8">
    		<div class="box-header">
	          <h3>Activities</h3>
	          <small>Your last activity is posted 4 hours ago</small>
	        </div>
	        <div class="box-body">
	            <div ui-jp="plot" ui-refresh="app.setting.color" ui-options="
	              [
	                { 
	                  data: {{p_l_1}}, 
	                  bars: { show: true, barWidth: 0.2, align: 'left', lineWidth: 1, fillColor: { colors: [{ opacity: 0.6 }, { opacity: 1}] } } 
	                },
	                { 
	                  data: {{p_l_2}}, 
	                  bars: { show: true, barWidth: 0.2, align: 'right', lineWidth: 1, fillColor: { colors: [{ opacity: 0.6 }, { opacity: 1}] } } 
	                }
	              ], 
	              {
	                colors: ['{{app.setting.color.primary}}','{{app.setting.color.warn}}'],
	                series: { shadowSize: 3 },
	                xaxis: { show: true, font: { color: '#ccc' }, position: 'bottom' },
	                yaxis:{ show: true, font: { color: '#ccc' }},
	                grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' },
	                tooltip: true,
	                tooltipOpts: { content: '%x.0 is %y.4',  defaultTheme: false, shifts: { x: 0, y: -40 } }
	              }
	            " style="height:200px" >
	            </div>
	        </div>
        </div>
        <div class="col-sm-4 dker">
			<div class="box-header">
				<h3>Reports</h3>
			</div>
			<div class="box-body">
				<p class="text-muted m-b-md">Dales nisi nec adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis</p>
				<button class="md-btn md-raised m-b-sm p-x success">Read more</button>
			</div>
        </div>
    </div>

	<div class="row">
	    <div class="col-md-12 col-xl-4">
	        <div class="box">
	          <div class="box-header">
	            <h3>Your tasks</h3>
	            <small>Calculated in last 7 days</small>
	          </div>
	          <div class="box-tool">
		        <ul class="nav">
		          <li class="nav-item inline">
		            <a class="nav-link">
		              <i class="material-icons md-18">&#xe863;</i>
		            </a>
		          </li>
		          <li class="nav-item inline dropdown">
		            <a class="nav-link" data-toggle="dropdown">
		              <i class="material-icons md-18">&#xe5d4;</i>
		            </a>
		            <div class="dropdown-menu dropdown-menu-scale pull-right">
		              <a class="dropdown-item" href>This week</a>
		              <a class="dropdown-item" href>This month</a>
		              <a class="dropdown-item" href>This week</a>
		              <div class="dropdown-divider"></div>
		              <a class="dropdown-item">Today</a>
		            </div>
		          </li>
		        </ul>
		      </div>
	          <div class="text-center b-t">
	            <div class="row-col">
	              <div class="row-cell p-a">
	                <div class="inline m-b">
	                  <div ui-jp="easyPieChart" class="easyPieChart" ui-refresh="app.setting.color" data-redraw='true' data-percent="55" ui-options="{
	                      lineWidth: 8,
	                      trackColor: 'rgba(0,0,0,0.05)',
	                      barColor: '{{app.setting.color.primary}}',
	                      scaleColor: 'transparent',
	                      size: 100,
	                      scaleLength: 0,
	                      animate:{
	                        duration: 3000,
	                        enabled:true
	                      }
	                    }">
	                    <div>
	                      <h5>55%</h5>
	                    </div>
	                  </div>
	                </div>
	                <div>
	                	Finished
	                	<small class="block m-b">320</small>
	                	<a href class="btn btn-sm white rounded">Manage</a>
	                </div>
	              </div>
	              <div class="row-cell p-a dker">
	                <div class="inline m-b">
	                  <div ui-jp="easyPieChart" class="easyPieChart" ui-refresh="app.setting.color" data-redraw='true' data-percent="45" ui-options="{
	                      lineWidth: 8,
	                      trackColor: 'rgba(0,0,0,0.05)',
	                      barColor: '{{app.setting.color.warn}}',
	                      scaleColor: 'transparent',
	                      size: 100,
	                      scaleLength: 0,
	                      animate:{
	                        duration: 3000,
	                        enabled:true
	                      }
	                    }">
	                    <div>
	                      <h5>45%</h5>
	                    </div>
	                  </div>
	                </div>
	                <div>
	                	Remaining
	                	<small class="block m-b">205</small>
	                	<a href class="btn btn-sm white rounded">Manage</a>
	                </div>
	              </div>
	            </div>
	          </div>
	        </div>
	    </div>
	    <div class="col-md-6 col-xl-4">
	    	<div class="box">
	          <div class="box-header">
	            <h3>Your projects</h3>
	            <small>Calculated in last 30 days</small>
	          </div>
	          <div class="box-tool">
		        <ul class="nav">
		          <li class="nav-item inline">
		            <a class="nav-link">
		              <i class="material-icons md-18">&#xe863;</i>
		            </a>
		          </li>
		          <li class="nav-item inline dropdown">
		            <a class="nav-link" data-toggle="dropdown">
		              <i class="material-icons md-18">&#xe5d4;</i>
		            </a>
		            <div class="dropdown-menu dropdown-menu-scale pull-right">
		              <a class="dropdown-item" href>This week</a>
		              <a class="dropdown-item" href>This month</a>
		              <a class="dropdown-item" href>This week</a>
		              <div class="dropdown-divider"></div>
		              <a class="dropdown-item">Today</a>
		            </div>
		          </li>
		        </ul>
		      </div>
	          <div class="box-body">
	            <div ui-jp="plot" ui-refresh="app.setting.color" ui-options="
	              [
	                { data: {{p_l_4}}, 
	                  points: { show: true, radius: 0}, 
                  	  splines: { show: true, tension: 0.45, lineWidth: 2, fill: 0.2 } 
	                },
	                { data: {{p_l_5}}, 
	                  points: { show: true, radius: 0}, 
                  	  splines: { show: true, tension: 0.45, lineWidth: 2, fill: 0.1 } 
	                }
	              ], 
	              {
	                colors: ['{{app.setting.color.warn}}','{{app.setting.color.primary}}'],
	                series: { shadowSize: 3 },
	                xaxis: { show: true, font: { color: '#ccc' }, position: 'bottom' },
	                yaxis:{ show: true, font: { color: '#ccc' },  min: 2},
	                grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' },
	                tooltip: true,
	                tooltipOpts: { content: '%x.0 is %y.4',  defaultTheme: false, shifts: { x: 0, y: -40 } }
	              }
	            " style="height:200px" >
	            </div>
	          </div>
	        </div>
	    </div>
	    <div class="col-md-6 col-xl-4">
	        <div class="box">
	          <div class="box-header">
	            <h3>Your Sales</h3>
	            <small>A general overview of your sales</small>
	          </div>
	          <div class="box-tool">
		        <ul class="nav">
		          <li class="nav-item inline">
		            <a class="nav-link">
		              <i class="material-icons md-18">&#xe863;</i>
		            </a>
		          </li>
		          <li class="nav-item inline dropdown">
		            <a class="nav-link" data-toggle="dropdown">
		              <i class="material-icons md-18">&#xe5d4;</i>
		            </a>
		            <div class="dropdown-menu dropdown-menu-scale pull-right">
		              <a class="dropdown-item" href>This week</a>
		              <a class="dropdown-item" href>This month</a>
		              <a class="dropdown-item" href>This week</a>
		              <div class="dropdown-divider"></div>
		              <a class="dropdown-item">Today</a>
		            </div>
		          </li>
		        </ul>
		      </div>
	          <div class="box-body">
	            <div ui-jp="plot" ui-refresh="app.setting.color" ui-options="
	              [
	                { data: {{p_b_1}} },
	                { data: {{p_b_4}} }
	              ], 
	              {
	                bars: { show: true, fill: true,  barWidth: 0.3, lineWidth: 2, order: 1, fillColor: { colors: [{ opacity: 0.2 }, { opacity: 0.2}] }, align: 'center'},
	                colors: ['{{app.setting.color.primary}}','{{app.setting.color.warn}}'],
	                series: { shadowSize: 3 },
	                xaxis: { show: true, font: { color: '#ccc' }, position: 'bottom' },
	                yaxis:{ show: true, font: { color: '#ccc' }},
	                grid: { hoverable: true, clickable: true, borderWidth: 0, color: 'rgba(120,120,120,0.5)' },
	                tooltip: true,
	                tooltipOpts: { content: '%x.0 is %y.4',  defaultTheme: false, shifts: { x: 0, y: -40 } }
	              }
	            " style="height:200px" >
	            </div>
	          </div>
	        </div>
	    </div>
	</div>

	<div class="row">
		<div class="col-lg-8">
			<div class="box">
				<div class="box-header">
					<h3>Feeds <span class="label success">5</span></h3>
				</div>
				<div class="box-body">
				  	<div class="streamline b-l m-l-md">
		              <div class="sl-item">
		                <div class="sl-left">
		                  <img src="../assets/images/a0.jpg" class="img-circle">
		                </div>
		                <div class="sl-content">
		                  <div class="sl-date text-muted">2 minutes ago</div>
		                  <div class="sl-author">
		                    <a href>Peter Joo</a>
		                  </div>
		                  <div>
		                    <p>Consectetur adipiscing elit. Morbi id neque quam. Aliquam sollicitudin venenatis ipsum ac feugiat. Vestibulum ullamcorper sodales nisi nec condimentum. Mauris convallis mauris at pellentesque volutpat. Phasellus at ultricies neque, quis malesuada augue. Donec eleifend</p>
		                  </div>
		                  <div class="sl-footer">
		                    <a href data-toggle="collapse" data-target="#reply-1">
		                      <i class="fa fa-fw fa-mail-reply text-muted"></i> Reply
		                    </a>
		                  </div>
		                  <div class="box collapse m-0 b-a" id="reply-1">
		                    <form>
		                      <textarea class="form-control no-border" rows="3" placeholder="Type something..."></textarea>
		                    </form>
		                    <div class="box-footer clearfix">
		                      <button class="btn btn-info pull-right btn-sm">Post</button>
		                      <ul class="nav nav-pills nav-sm">
		                        <li class="nav-item"><a class="nav-link" href><i class="fa fa-camera text-muted"></i></a></li>
		                        <li class="nav-item"><a class="nav-link" href><i class="fa fa-video-camera text-muted"></i></a></li>
		                      </ul>
		                    </div>
		                  </div>
		                </div>
		              </div>
		              <div class="sl-item">
		                <div class="sl-left">
		                  <img src="../assets/images/a2.jpg" class="img-circle">
		                </div>
		                <div class="sl-content">
		                  <div class="sl-date text-muted">8:30</div>
		                  <div class="sl-author">
		                    <a href>Moke</a>
		                  </div>
		                  <div>
		                    <p>Just followed <a href class="text-info">Jacob</a> and she followed you too.</p>
		                  </div>
		                </div>
		              </div>
		              <div class="sl-item">
		                <div class="sl-left">
		                  <img src="../assets/images/a3.jpg" class="img-circle">
		                </div>
		                <div class="sl-content">
		                  <div class="sl-date text-muted">Sat, 5 Mar</div>
		                  <div class="sl-author">
		                    <a href>Moke</a>
		                  </div>
		                  <blockquote>
		                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante soe aiea ose dos soois.</p>
		                    <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
		                  </blockquote>


			              <div class="sl-item">
			                <div class="sl-left">
			                  <img src="../assets/images/a2.jpg" class="img-circle">
			                </div>
			                <div class="sl-content">
			                  <div class="sl-date text-muted">Sun, 11 Feb</div>
			                  <p><a href class="text-info">Jessi</a> assign you a task <a href class="text-info">Mockup Design</a>.</p>
			                </div>
			              </div>
			              <div class="sl-item">
			                <div class="sl-left">
			                  <img src="../assets/images/a5.jpg" class="img-circle">
			                </div>
			                <div class="sl-content">
			                  <div class="sl-date text-muted">Thu, 17 Jan</div>
			                  <p>Follow up to close deal</p>
			                </div>
			              </div>

		                </div>
		              </div>
		            </div>
		  		</div>
			</div>
		</div>

		<div class="col-lg-4">
			<div class="box">
	    		<div class="box-header">
	    			<h4>Just followed you</h4>
	    		</div>
				<div class="list-group no-radius no-borders">
		            <a class="list-group-item text-ellipsis">
		            	<span class="w-8 rounded m-r-sm success"></span>
		                <img src="../assets/images/a2.jpg" class="w-24 m-r-sm img-circle">
		                <span>Jonathan Morina</span>
		            </a>
		            <a class="list-group-item text-ellipsis">
		            	<span class="w-8 rounded m-r-sm success"></span>
		                <img src="../assets/images/a3.jpg" class="w-24 m-r-sm img-circle">
		                <span>Mason Yarnell</span>
		            </a>
		            <a class="list-group-item text-ellipsis">
		            	<span class="w-8 rounded m-r-sm warning"></span>
		                <img src="../assets/images/a4.jpg" class="w-24 m-r-sm img-circle">
		                <span>Mike Mcalidek</span>
		            </a>
		            <a class="list-group-item text-ellipsis">
		            	<span class="w-8 rounded m-r-sm danger"></span>
		                <img src="../assets/images/a5.jpg" class="w-24 m-r-sm img-circle">
		                <span>Cris Labiso</span>
		            </a>
		            <a class="list-group-item text-ellipsis">
		            	<span class="w-8 rounded m-r-sm dker"></span>
		                <img src="../assets/images/a6.jpg" class="w-24 m-r-sm img-circle">
		                <span>Daniel Sandvid</span>
		            </a>
		            <a class="list-group-item text-ellipsis">
		            	<span class="w-8 rounded m-r-sm dker"></span>
		                <img src="../assets/images/a7.jpg" class="w-24 m-r-sm img-circle">
		                <span>Helder Oliveira</span>
		            </a>
		            <a class="list-group-item text-ellipsis">
		            	<span class="w-8 rounded m-r-sm dker"></span>
		                <img src="../assets/images/a8.jpg" class="w-24 m-r-sm img-circle">
		                <span>Jeff Broderik</span>
		            </a>
		            <a class="list-group-item text-ellipsis">
		            	<span class="w-8 rounded m-r-sm dker"></span>
		                <img src="../assets/images/a9.jpg" class="w-24 m-r-sm img-circle">
		                <span>Daniel Sandvid</span>
		            </a>
		            <a class="list-group-item text-ellipsis">
		            	<span class="w-8 rounded m-r-sm dker"></span>
		                <img src="../assets/images/a0.jpg" class="w-24 m-r-sm img-circle">
		                <span>Helder Oliveira</span>
		            </a>
		            <a class="list-group-item text-ellipsis">
		            	<span class="w-8 rounded m-r-sm dker"></span>
		                <img src="../assets/images/a2.jpg" class="w-24 m-r-sm img-circle">
		                <span>Jeff Broderik</span>
		            </a>
		            <a class="list-group-item text-ellipsis">
		            	<span class="w-8 rounded m-r-sm dker"></span>
		                <img src="../assets/images/a8.jpg" class="w-24 m-r-sm img-circle">
		                <span>Jeff Broderik</span>
		            </a>
		            <a class="list-group-item text-ellipsis">
		            	<span class="w-8 rounded m-r-sm dker"></span>
		                <img src="../assets/images/a9.jpg" class="w-24 m-r-sm img-circle">
		                <span>Daniel Sandvid</span>
		            </a>
		        </div>
		        <div class="p-a">
		        	<a href="#" class="btn white btn-xs rounded m-b-sm">See all</a>
		        </div>
	        </div>
		</div>

	</div>
</div>
