<div class="p-a white lt box-shadow">
	<div class="row">
		<div class="col-sm-6">
			<h4 class="mb-0 _300">Welcome to {{app.name}}</h4>
			<small class="text-muted">Bootstrap <strong>4</strong> Web App Kit with AngularJS</small>
		</div>
		<div class="col-sm-6 text-sm-right">
			<div class="m-y-sm">
				<span class="m-r-sm">Start manage:</span>
				<div class="btn-group dropdown">
		          <button class="btn white btn-sm ">Projects</button>
		          <button class="btn white btn-sm dropdown-toggle" data-toggle="dropdown"></button>
		          <div class="dropdown-menu dropdown-menu-scale pull-right">
		            <a class="dropdown-item" href>Members</a>
		            <a class="dropdown-item" href>Tasks</a>
		            <a class="dropdown-item" href>Inbox</a>
		            <div class="dropdown-divider"></div>
		            <a class="dropdown-item">Profile</a>
		          </div>
		        </div>
	        </div>
		</div>
	</div>
</div>
<div class="padding">
	<div class="row">
		<div class="col-xs-12 col-sm-4">
	        <div class="box p-a">
	          <div class="pull-left m-r">
	            <span class="w-48 rounded  {{app.setting.theme.accent}}">
	              <i class="material-icons">&#xe151;</i>
	            </span>
	          </div>
	          <div class="clear">
	            <h4 class="m-0 text-lg _300"><a href>125 <span class="text-sm">Emails</span></a></h4>
	            <small class="text-muted">6 new arrivals.</small>
	          </div>
	        </div>
	    </div>
	    <div class="col-xs-6 col-sm-4">
	        <div class="box p-a">
	          <div class="pull-left m-r">
	            <span class="w-48 rounded {{app.setting.theme.primary}}">
	              <i class="material-icons">&#xe54f;</i>
	            </span>
	          </div>
	          <div class="clear">
	            <h4 class="m-0 text-lg _300"><a href>40 <span class="text-sm">Projects</span></a></h4>
	            <small class="text-muted">38 open.</small>
	          </div>
	        </div>
	    </div>
	    <div class="col-xs-6 col-sm-4">
	        <div class="box p-a">
	          <div class="pull-left m-r">
	            <span class="w-48 rounded {{app.setting.theme.warn}}">
	              <i class="material-icons">&#xe8d3;</i>
	            </span>
	          </div>
	          <div class="clear">
	            <h4 class="m-0 text-lg _300"><a href>600 <span class="text-sm">Users</span></a></h4>
	            <small class="text-muted">632 vips.</small>
	          </div>
	        </div>
	    </div>
	</div>
	<div class="row">
		<div class="col-sm-6 col-md-4">
	        <div class="box">
	          <div class="box-header">
	            <h3>Projects monitor</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 class="text-center m-b">
	          		<div class="btn-group" data-toggle="buttons">
					  <label class="btn btn-sm white">
					    <input type="radio" name="options" autocomplete="off"> Month
					  </label>
					  <label class="btn btn-sm white">
					    <input type="radio" name="options" autocomplete="off"> Day
					  </label>
					</div>
	          	</div>
	            <div ui-jp="plot" ui-refresh="app.setting.color" ui-options="
	              [
	                { data: {{p_l_5}}, 
	                  points: { show: true, radius: 0}, 
                  	  splines: { show: true, tension: 0.45, lineWidth: 2, fill: 1 }
	                },
	                { data: {{p_l_4}}, 
	                  points: { show: true, radius: 0}, 
                  	  splines: { show: true, tension: 0.45, lineWidth: 2, fill: 1 } 
	                },
	                { data: {{p_l_3}}, 
	                  points: { show: true, radius: 0}, 
                  	  splines: { show: true, tension: 0.45, lineWidth: 2, fill: 1 } 
	                }
	              ], 
	              {
	                colors: ['{{app.setting.color.accent}}','{{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:188px" >
	            </div>
	          </div>
	        </div>
	    </div>
	    <div class="col-sm-6 col-md-4">
	        <div class="box">
	          <div class="box-header">
	            <h3>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="box-body">
	          	<div class="text-center m-b">
	          		<div class="btn-group" data-toggle="buttons">
					  <label class="btn btn-sm rounded white">
					    <input type="radio" name="options" autocomplete="off"> This Month
					  </label>
					  <label class="btn btn-sm rounded white">
					    <input type="radio" name="options" autocomplete="off"> This Week
					  </label>
					</div>
	          	</div>
	            <div ui-jp="plot" ui-refresh="app.setting.color" ui-options="
	              [
	                { data: {{p_b_1}} }
	              ], 
	              {
	                bars: { show: true, fill: true,  barWidth: 0.25, lineWidth: 1, fillColor: { colors: [{ opacity: 0.8 }, { opacity: 1}] }, align: 'center' },
	                colors: ['{{app.setting.color.accent}}'],
	                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:188px" >
	            </div>
	          </div>
	        </div>
	    </div>
	    <div class="col-sm-12 col-md-4">
	    	<div class="box">
	          <div class="box-header">
	            <h3>Sales</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="box-body">
	          	<div class="text-center m-b">
	          		<div class="btn-group" data-toggle="buttons">
					  <label class="btn btn-sm rounded white">
					    <input type="radio" name="options" autocomplete="off"> Market
					  </label>
					  <label class="btn btn-sm rounded white">
					    <input type="radio" name="options" autocomplete="off"> Referral
					  </label>
					</div>
	          	</div>
		    	<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:188px" >
	            </div>
	          </div>
	        </div>
	    </div>
	</div>
	<div class="row">
	    <div class="col-sm-12 col-md-6">
	    	<div class="box">
	    		<div class="box-header">
	    			<h3>Open Projects <span class="label warning">9</span></h3>
	    			<small>Your data status</small>
	    		</div>
		    	<ul class="list inset">
			        <li class="list-item">
			          <a herf class="list-left">
			          	<span class="w-40 r-2x _600 text-lg accent">
			            	B
			            </apan>
			          </a>
			          <div class="list-body">
			          	<div class="m-y-sm pull-right">
			            	<a href class="btn btn-xs white">Manage</a>
			            	<a href class="btn btn-xs white btn-icon"><i class="fa fa-pencil"></i></a>
		            	</div>
			            <div><a href>Broadcast web app mockup</a></div>
			            <div class="text-sm">
			            	<span class="text-muted"><strong>5</strong> tasks, <strong>3</strong> issues</span> 
			            	<span class="label"></span>
			            </div>
			          </div>
			        </li>
			        <li class="list-item">
			          <a herf class="list-left">
			          	<span class="w-40 r-2x _600 text-lg success">
			            	G
			            </apan>
			          </a>
			          <div class="list-body">
			          	<div class="m-y-sm pull-right">
			            	<a href class="btn btn-xs white">Manage</a>
			            	<a href class="btn btn-xs white btn-icon"><i class="fa fa-pencil"></i></a>
		            	</div>
			            <div><a href>GoodDesign Bootstrap 4 migration</a></div>
			            <div class="text-sm">
			            	<span class="text-muted"><strong>35</strong> tasks, <strong>6</strong> issues</span> 
			            	<span class="label"></span>
			            </div>
			          </div>
			        </li>
			        <li class="list-item">
			          <a herf class="list-left">
			          	<span class="w-40 r-2x _600 text-lg purple">
			            	#
			            </apan>
			          </a>
			          <div class="list-body">
			          	<div class="m-y-sm pull-right">
			            	<a href class="btn btn-xs white">Manage</a>
			            	<a href class="btn btn-xs white btn-icon"><i class="fa fa-pencil"></i></a>
		            	</div>
			            <div><a href>#Hashtag android app develop</a></div>
			            <div class="text-sm">
			            	<span class="text-muted"><strong>52</strong> tasks, <strong>13</strong> issues</span> 
			            	<span class="label"></span>
			            </div>
			          </div>
			        </li>
			        <li class="list-item">
			          <a herf class="list-left">
			          	<span class="w-40 r-2x _600 blue">
			            	<i class="fa fa-lg fa-google"></i>
			            </apan>
			          </a>
			          <div class="list-body">
			          	<div class="m-y-sm pull-right">
			            	<a href class="btn btn-xs white">Manage</a>
			            	<a href class="btn btn-xs white btn-icon"><i class="fa fa-pencil"></i></a>
		            	</div>
			            <div><a href>Google material design application</a></div>
			            <div class="text-sm">
			            	<span class="text-muted"><strong>15</strong> tasks, <strong>3</strong> issues</span> 
			            	<span class="label"></span>
			            </div>
			          </div>
			        </li>
			        <li class="list-item">
			          <a herf class="list-left">
			          	<span class="w-40 r-2x _600 blue-800">
			            	<i class="fa fa-lg fa-facebook"></i>
			            </apan>
			          </a>
			          <div class="list-body">
			          	<div class="m-y-sm pull-right">
			            	<a href class="btn btn-xs white">Manage</a>
			            	<a href class="btn btn-xs white btn-icon"><i class="fa fa-pencil"></i></a>
		            	</div>
			            <div><a href>Facebook connection web application</a></div>
			            <div class="text-sm">
			            	<span class="text-muted"><strong>30</strong> tasks, <strong>5</strong> issues</span> 
			            	<span class="label"></span>
			            </div>
			          </div>
			        </li>
			    </ul>
		    </div>
	    </div>
	    <div class="col-sm-12 col-md-6">
	    	<div class="box">
		      <div class="box-header">
		        <h3>Stats</h3>
		        <small>Your data status</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>
		      <table class="table">
		        <thead>
		          <tr>
		            <th style="width:60px;" class="text-center">Graph</th>
		            <th>Item</th>                    
		            <th style="width:70px;"></th>
		          </tr>
		        </thead>
		        <tbody>
		          <tr>
		            <td>
		              <div ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[ 16,15,15,14,17,18,16,15,16 ], {type:'bar', height:19, barWidth:4, barSpacing:2, barColor:'{{app.setting.color.primary}}'}" class="sparkline inline">loading...</div>
		            </td>
		            <td>App downloads</td>
		            <td class="text-success">
		              <i class="fa fa-level-up"></i> 40%
		            </td>
		          </tr>
		          <tr>
		            <td class="text-center">
		              <div ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[ 60,30,10 ], {type:'pie', height:19, sliceColors:['{{app.setting.color.warn}}','#fff','{{app.setting.color.primary}}']}" class="sparkline inline">loading...</div>
		            </td>
		            <td>Social connection</td>
		            <td class="text-success">
		              <i class="fa fa-level-up"></i> 20%
		            </td>
		          </tr>
		          <tr>                    
		            <td>
		              <div ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[ 16,15,15,14,17,18,16,15,16 ], {type:'line', height:19, width:60, lineColor:'{{app.setting.color.primary}}', fillColor:'transparent'}" class="sparkline inline">loading...</div>
		            </td>
		            <td>Revenue</td>
		            <td class="text-warning">
		              <i class="fa fa-level-down"></i> 5%
		            </td>
		          </tr>
		          <tr>                    
		            <td>
		              <div ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[ 16,15,15,14,17,18,16,15,16 ], {type:'discrete', height:19, width:60, lineColor:'{{app.color.success}}'}" class="sparkline inline">loading...</div>
		            </td>
		            <td>Customer increase</td>
		            <td class="text-danger">
		              <i class="fa fa-level-down"></i> 20%
		            </td>
		          </tr>
		          <tr>                    
		            <td>
		              <div ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[ 16,15,15,14,17,18,16,15,16 ], {type:'line', height:19, width:60, lineColor:'{{app.setting.color.warn}}', fillColor:'{{app.setting.color.warn}}'}" class="sparkline inline">loading...</div>
		            </td>
		            <td>Order placed</td>
		            <td class="text-warning">
		              <i class="fa fa-level-down"></i> 5%
		            </td>
		          </tr>
		          <tr>
		            <td>
		              <div ui-jp="sparkline" ui-refresh="app.setting.color" ui-options="[ 16,15,15,16,15,16,14,17,18 ], {type:'line', height:19, width:60, lineColor:'{{app.setting.color.warn}}', fillColor:'transparent'}" class="sparkline inline">loading...</div>
		            </td>
		            <td>Visitors</td>
		            <td class="text-warning">
		              <i class="fa fa-level-down"></i> 8%
		            </td>
		          </tr>
		        </tbody>
		      </table>
		    </div>
	    </div>
	</div>
	<div class="row">
	    <div class="col-sm-6 col-md-4">
	        <div class="box">
	            <div class="box-header">
	              <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">
		                  <img src="../assets/images/a4.jpg" alt="...">
		                  <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">
		                  <img src="../assets/images/a5.jpg" alt="...">
		                  <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">
		                  <img src="../assets/images/a6.jpg" alt="...">
		                  <i class="away 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">
		                  <img src="../assets/images/a7.jpg" alt="...">
		                  <i class="busy 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 col-md-4">
			<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 warn text-u-c pull-right">Add one</a>
			  		<a href class="btn btn-sm white text-u-c">More</a>
			  	</div>
		  	</div>
		</div>
	    <div class="col-sm-12 col-md-4">
	    	<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 text-u-c m-y-xs">Load More</a>
		  		</div>
			</div>
	    </div>
	</div>
</div>
