<div class="row-col b-b">
	<div class="col-md">
		<div class="padding">
			<div class="margin">
				<h5 class="mb-0 _300">Hi Jone, Welcome back</h5>
			</div>
			<div class="row no-gutter box">
				<div class="col-sm-4">
					<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>
						<a href class="btn btn-sm rounded success">Read More</a>
					</div>
		        </div>
		        <div class="col-sm-8 grey lt">
	        		<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_5}}, 
			                  points: { show: true, radius: 5}, 
			                  splines: { show: true, tension: 0.45, lineWidth: 4} 
			                }
			              ], 
			              {
			                colors: ['{{app.setting.color.primary}}'],
			                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:162px" >
			            </div>
			        </div>
		        </div>
		    </div>
			<div class="row">
			    <div class="col-sm-6">
			        <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_2}} }
			              ], 
			              {
			                bars: { horizontal: true, show: true, fill: true,  barWidth: 0.3, lineWidth: 1, fillColor: { colors: [{ opacity: 0.8 }, { opacity: 1}] }, align: 'center' },
			                colors: ['{{app.setting.color.primary}}'],
			                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 class="col-sm-6">
			    	<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_b_1}} }
			              ], 
			              {
			                bars: { show: true, fill: true,  barWidth: 0.3, lineWidth: 1, fillColor: { colors: [{ opacity: 0.8 }, { opacity: 1}] }, align: 'center' },
			                colors: ['{{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-sm-6">
			        <div class="box">
			            <div class="box-header">
			              <span class="label success pull-right">52</span>
			              <h3>Members</h3>
			            </div>
			            <ul class="list no-border p-b">
			              <li class="list-item">
			                <a herf class="list-left">
			                	<span class="w-40 avatar danger">
				                  <span>C</span>
				                  <i class="on b-white bottom"></i>
				                </span>
			                </a>
			                <div class="list-body">
			                  <div><a href>Chris Fox</a></div>
			                  <small class="text-muted text-ellipsis">Designer, Blogger</small>
			                </div>
			              </li>
			              <li class="list-item">
			                <a herf class="list-left">
			                  <span class="w-40 avatar purple">
				                  <span>M</span>
				                  <i class="on b-white bottom"></i>
				              </span>
			                </a>
			                <div class="list-body">
			                  <div><a href>Mogen Polish</a></div>
			                  <small class="text-muted text-ellipsis">Writter, Mag Editor</small>
			                </div>
			              </li>
			              <li class="list-item">
			                <a herf class="list-left">
			                  <span class="w-40 avatar info">
				                  <span>J</span>
				                  <i class="off b-white bottom"></i>
				              </span>
			                </a>
			                <div class="list-body">
			                  <div><a href>Joge Lucky</a></div>
			                  <small class="text-muted text-ellipsis">Art director, Movie Cut</small>
			                </div>
			              </li>
			              <li class="list-item">
			                <a herf class="list-left">
			                  <span class="w-40 avatar warning">
				                  <span>F</span>
				                  <i class="on b-white bottom"></i>
				              </span>
			                </a>
			                <div class="list-body">
			                  <div><a href>Folisise Chosielie</a></div>
			                  <small class="text-muted text-ellipsis">Musician, Player</small>
			                </div>
			              </li>
			              <li class="list-item">
			                <a herf class="list-left">
			                	<span class="w-40 avatar success">
				                  <span>P</span>
				                  <i class="away b-white bottom"></i>
				                </span>
			                </a>
			                <div class="list-body">
			                  <div><a href>Peter</a></div>
			                  <small class="text-muted text-ellipsis">Musician, Player</small>
			                </div>
			              </li>
			            </ul>
			        </div>
			    </div>
			    <div class="col-sm-6">
					<div class="box">
						<div class="box-header">
							<h3>Tasks</h3>
							<small>20 finished, 5 remaining</small>
						</div>
						<div class="box-tool">
					        <ul class="nav">
					          <li class="nav-item inline dropdown">
					            <a class="nav-link text-muted p-x-xs" data-toggle="dropdown">
					              <i class="fa fa-ellipsis-v"></i>
					            </a>
					            <div class="dropdown-menu dropdown-menu-scale pull-right">
					              <a class="dropdown-item" href>New task</a>
					              <a class="dropdown-item" href>Make all finished</a>
					              <a class="dropdown-item" href>Make all unfinished</a>
					              <div class="dropdown-divider"></div>
					              <a class="dropdown-item">Settings</a>
					            </div>
					          </li>
					        </ul>
					    </div>
						<div class="box-body">
						  	<div class="streamline b-l m-l">
						        <div class="sl-item b-success">
						          <div class="sl-icon">
						            <i class="fa fa-check"></i>
						          </div>
						          <div class="sl-content">
						            <div class="sl-date text-muted">8:30</div>
						            <div>Call to customer <a href class="text-info">Jacob</a> and discuss the detail about the AP project.</div>
						          </div>
						        </div>
						        <div class="sl-item b-info">
						          <div class="sl-content">
						            <div class="sl-date text-muted">Sat, 5 Mar</div>
						            <div>Prepare for presentation</div>
						          </div>
						        </div>
						        <div class="sl-item b-warning">
						          <div class="sl-content">
						            <div class="sl-date text-muted">Sun, 11 Feb</div>
						            <div><a href class="text-info">Jessi</a> assign you a task <a href class="text-info">Mockup Design</a>.</div>
						          </div>
						        </div>
						    </div>
						</div>
					  	<div class="box-footer">
					  		<a href class="btn btn-sm btn-outline b-info rounded text-u-c pull-right">Add one</a>
					  		<a href class="btn btn-sm white text-u-c rounded">More</a>
					  	</div>
				  	</div>
				</div>
			    <div class="col-sm-12">
			    	<div class="box">
						<div class="box-header">
							<span class="label success pull-right">5</span>
							<h3>Activity</h3>
							<small>10 members update their activies.</small>
						</div>
						<div class="box-body">
						  	<div class="streamline b-l m-b m-l">
				              <div class="sl-item">
				                <div class="sl-left">
				                  <img src="../assets/images/a2.jpg" class="img-circle">
				                </div>
				                <div class="sl-content">
				                  <a href class="text-info">Louis Elliott</a><span class="m-l-sm sl-date">5 min ago</span>
				                  <div>assign you a task <a href class="text-info">Mockup Design</a>.</div>
				                </div>
				              </div>
				              <div class="sl-item">
				                <div class="sl-left">
				                  <img src="../assets/images/a5.jpg" class="img-circle">
				                </div>
				                <div class="sl-content">
				                  <a href class="text-info">Terry Moore</a><span class="m-l-sm sl-date">10 min ago</span>
				                  <div>Follow up to close deal</div>
				                </div>
				              </div>
				              <div class="sl-item">
				                <div class="sl-left">
				                  <img src="../assets/images/a8.jpg" class="img-circle">
				                </div>
				                <div class="sl-content">
				                  <a href class="text-info">Walter Paler</a><span class="m-l-sm sl-date">1 hour ago</span>
				                  <div>was added to Repo</div>
				                </div>
				              </div>
				            </div>
				            <a href class="btn btn-sm white rounded text-u-c m-y-xs">Load More</a>
				  		</div>
					</div>
			    </div>
			</div>
			<div class="row">
				<div class="col-sm-6">
					<div class="box">
						<div class="box-header">
							<h3>Messages</h3>
						</div>
						<ul class="list no-border m-b">
					        <li class="list-item">
					          <a href="" class="pull-left w-40 m-r"><img src="../assets/images/a8.jpg" class="img-responsive img-circle"></a>
					          <div class="clear">
					            <a href="" class="_500 block">Jonathan Doe</a>
					            <span class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
					          </div>
					        </li>
					        <li class="list-item">
					          <a href="" class="pull-left w-40 m-r"><img src="../assets/images/a2.jpg" class="img-responsive img-circle"></a>
					          <div class="clear">
					            <a href="" class="_500 block">Jack Michale</a>
					            <span class="text-muted">Sectetur adipiscing elit</span>
					          </div>
					        </li>
					        <li class="list-item">
					          <a href="" class="pull-left w-40 m-r"><img src="../assets/images/a3.jpg" class="img-responsive img-circle"></a>
					          <div class="clear">
					            <a href="" class="_500 block">Jessi</a>
					            <span class="text-muted">Sectetur adipiscing elit</span>
					          </div>
					        </li>
					        <li class="list-item">
					          <a href="" class="pull-left w-40 m-r"><img src="../assets/images/a4.jpg" class="img-responsive img-circle"></a>
					          <div class="clear">
					            <a href="" class="_500 block">Sodake</a>
					            <span class="text-muted">Vestibulum ullamcorper sodales nisi nec condimentum</span>
					          </div>
					        </li>
					    </ul>
				    </div>
				</div>
				<div class="col-sm-6">
			        <div class="box">
			            <div class="box-header b-b">
			              <h3>Latest Tweets</h3>
			            </div>
			            <ul class="list">
			              <li class="list-item">
			                <div class="list-body">
			                  <p>Wellcome <a href class="text-info">@Drew Wllon</a> and play this web application template, have fun1 </p>
			                  <small class="block text-muted"><i class="fa fa-fw fa-clock-o"></i> 2 minuts ago</small>
			                </div>
			              </li>
			              <li class="list-item">
			                <div class="list-body">
			                  <p>Morbi nec <a href class="text-info">@Jonathan George</a> nunc condimentum ipsum dolor sit amet, consectetur</p>
			                  <small class="block text-muted"><i class="fa fa-fw fa-clock-o"></i> 1 hour ago</small>
			                </div>
			              </li>
			              <li class="list-item">
			                <div class="list-body">                   
			                  <p><a href class="text-info">@Josh Long</a> Vestibulum ullamcorper sodales nisi nec adipiscing elit. Morbi id neque quam</p>
			                  <small class="block text-muted"><i class="fa fa-fw fa-clock-o"></i> 2 hours ago</small>
			                </div>
			              </li>
			            </ul>
			        </div>
				</div>
			</div>
		</div>
	</div>
	<div class="col-md w-lg w-auto-sm light lt b-l">
		<div class="p-a b-b">
			<a href class="clear">
			    <span class="pull-left">
			      <img src="../assets/images/a1.jpg" alt="..." class="w-40 r">
			    </span>
			    <span class="clear hidden-folded p-x">
			      <span class="block _500">Jean Reyes</span>
			      <small class="block text-muted"><i class="fa fa-circle text-success m-r-sm"></i>online</small>
			    </span>
			</a>
		</div>
		<div class="list-group no-radius no-borders light lt">
            <a data-toggle="modal" data-target="#chat" data-dismiss="modal"  class="list-group-item p-x-md text-ellipsis">
                <img src="../assets/images/a2.jpg" class="w-24 m-r-sm img-circle">
                <span>Jonathan Morina</span>
            </a>
            <a data-toggle="modal" data-target="#chat" data-dismiss="modal"  class="list-group-item p-x-md text-ellipsis">
                <img src="../assets/images/a3.jpg" class="w-24 m-r-sm img-circle">
                <span>Mason Yarnell</span>
            </a>
            <a data-toggle="modal" data-target="#chat" data-dismiss="modal"  class="list-group-item p-x-md text-ellipsis">
                <img src="../assets/images/a4.jpg" class="w-24 m-r-sm img-circle">
                <span>Mike Mcalidek</span>
            </a>
            <a data-toggle="modal" data-target="#chat" data-dismiss="modal"  class="list-group-item p-x-md text-ellipsis">
                <img src="../assets/images/a5.jpg" class="w-24 m-r-sm img-circle">
                <span>Cris Labiso</span>
            </a>
            <a data-toggle="modal" data-target="#chat" data-dismiss="modal"  class="list-group-item p-x-md text-ellipsis">
                <img src="../assets/images/a6.jpg" class="w-24 m-r-sm img-circle">
                <span>Daniel Sandvid</span>
            </a>
            <a data-toggle="modal" data-target="#chat" data-dismiss="modal"  class="list-group-item p-x-md text-ellipsis">
                <img src="../assets/images/a7.jpg" class="w-24 m-r-sm img-circle">
                <span>Helder Oliveira</span>
            </a>
            <a data-toggle="modal" data-target="#chat" data-dismiss="modal"  class="list-group-item p-x-md text-ellipsis">
                <img src="../assets/images/a8.jpg" class="w-24 m-r-sm img-circle">
                <span>Jeff Broderik</span>
            </a>
            <a data-toggle="modal" data-target="#chat" data-dismiss="modal"  class="list-group-item p-x-md text-ellipsis">
                <img src="../assets/images/a9.jpg" class="w-24 m-r-sm img-circle">
                <span>Daniel Sandvid</span>
            </a>
            <a data-toggle="modal" data-target="#chat" data-dismiss="modal"  class="list-group-item p-x-md text-ellipsis">
                <img src="../assets/images/a0.jpg" class="w-24 m-r-sm img-circle">
                <span>Helder Oliveira</span>
            </a>
            <a data-toggle="modal" data-target="#chat" data-dismiss="modal"  class="list-group-item p-x-md text-ellipsis">
                <img src="../assets/images/a2.jpg" class="w-24 m-r-sm img-circle">
                <span>Jeff Broderik</span>
            </a>
            <div class="p-x-md m-t p-v-xs">Online members</div>            
            <a data-toggle="modal" data-target="#chat" data-dismiss="modal"  class="list-group-item p-x-md text-ellipsis">
                <i class="fa fa-circle text-success text-xs m-r-xs"></i>
                <span>Mason Yarnell</span>
            </a>
            <a data-toggle="modal" data-target="#chat" data-dismiss="modal"  class="list-group-item p-x-md text-ellipsis">
                <i class="fa fa-circle text-success text-xs m-r-xs"></i>
                <span>Mike Mcalidek</span>
            </a>
            <a data-toggle="modal" data-target="#chat" data-dismiss="modal"  class="list-group-item p-x-md text-ellipsis">
                <i class="fa fa-circle text-success text-xs m-r-xs"></i>
                <span>Cris Labiso</span>
            </a>
            <a data-toggle="modal" data-target="#chat" data-dismiss="modal"  class="list-group-item p-x-md text-ellipsis">
                <i class="fa fa-circle text-success text-xs m-r-xs"></i>
                <span>Jonathan Morina</span>
            </a>
            <a data-toggle="modal" data-target="#chat" data-dismiss="modal"  class="list-group-item p-x-md text-ellipsis">
                <i class="fa fa-circle text-success text-xs m-r-xs"></i>
                <span>Daniel Sandvid</span>
            </a>
            <a data-toggle="modal" data-target="#chat" data-dismiss="modal"  class="list-group-item p-x-md text-ellipsis">
                <i class="fa fa-circle text-success text-xs m-r-xs"></i>
                <span>Helder Oliveira</span>
            </a>
        </div>
	</div>
</div>

<div class="modal inactive" id="chat" data-backdrop="false">
  <div class="right w-xxl grey lt b-l">
  	<div ui-include="'../views/blocks/modal.chat.html'"></div>
  </div>
</div>
