%PDF-
%PDF-
Mini Shell
Mini Shell
<div class="content-wrapper">
<section class="content-header">
<h1>Dashboard</h1>
</section>
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<!-- Profile Image -->
<div class="card card-primary card-outline">
<div class="card-body box-profile">
<div class="text-center">
<img class="profile-user-img img-fluid img-circle"
src="<?php echo base_url().'assets/';?>/dist/img/user4-128x128.jpg"
alt="User profile picture">
</div>
<h3 class="profile-username text-center"><?=$customer['name']?></h3>
<p class="text-muted text-center">Sales Staff</p>
<ul class="list-group list-group-unbordered mb-3">
<li class="list-group-item">
<b>Leads Closed</b> <a class="float-right"><h3><?=$closedleads;?></h3></a>
</li>
<li class="list-group-item">
<b>Leads Generated</b> <a class="float-right"><?=$totalleads;?></a>
</li>
</ul>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
<div class="col-md-9">
<div class="card">
<div class="card-header p-2">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link active" href="#activity" data-toggle="tab">Activity</a></li>
<li class="nav-item"><a class="nav-link" href="#timeline" data-toggle="tab">Timeline</a></li>
<li class="nav-item"><a class="nav-link" href="#settings" data-toggle="tab">Settings</a></li>
</ul>
</div><!-- /.card-header -->
<div class="card-body">
<div class="tab-content">
<div class="active tab-pane" id="activity">
<!-- Post -->
<div class="card-body">
<table class="table table-bordered">
<thead>
<tr>
<th style="width: 10px">#</th>
<th>Task</th>
<th>Progress</th>
<th style="width: 40px">Label</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.</td>
<td>Hot Leads</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
</div>
</td>
<td><span class="badge bg-danger">55%</span></td>
</tr>
<tr>
<td>2.</td>
<td>Warm Leads</td>
<td>
<div class="progress progress-xs">
<div class="progress-bar bg-warning" style="width: 70%"></div>
</div>
</td>
<td><span class="badge bg-warning">70%</span></td>
</tr>
<tr>
<td>3.</td>
<td>Cold Leads</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar bg-primary" style="width: 30%"></div>
</div>
</td>
<td><span class="badge bg-primary">30%</span></td>
</tr>
<tr>
<td>4.</td>
<td>Closed Leads</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar bg-success" style="width: 90%"></div>
</div>
</td>
<td><span class="badge bg-success"><?=$closedleads;?></span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /.tab-pane -->
<div class="tab-pane" id="timeline">
<!-- The timeline -->
<!-- PIE CHART -->
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<!-- AREA CHART -->
<div class="card card-primary">
<div class="card-header">
<h3 class="card-title">Area Chart</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
</div>
</div>
<div class="card-body">
<div class="chart">
<canvas id="areaChart" style="height:250px; min-height:250px"></canvas>
</div>
</div>
<!-- /.card-body -->
</div>
</div>
</section>
</div>
<div class="tab-pane" id="settings">
<form class="form-horizontal">
<div class="form-group row">
<label for="inputName" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputName" placeholder="Name">
</div>
</div>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputName2" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputName2" placeholder="Name">
</div>
</div>
<div class="form-group row">
<label for="inputExperience" class="col-sm-2 col-form-label">Experience</label>
<div class="col-sm-10">
<textarea class="form-control" id="inputExperience" placeholder="Experience"></textarea>
</div>
</div>
<div class="form-group row">
<label for="inputSkills" class="col-sm-2 col-form-label">Skills</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputSkills" placeholder="Skills">
</div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> I agree to the <a href="#">terms and conditions</a>
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<button type="submit" class="btn btn-danger">Submit</button>
</div>
</div>
</form>
</div>
<!-- /.tab-pane -->
</div>
<!-- /.tab-content -->
</div><!-- /.card-body -->
</div>
<!-- /.nav-tabs-custom -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<script src="<?php echo base_url().'assets/';?>plugins/chart.js/Chart.min.js"></script>
<!-- AdminLTE App -->
<script src=".<?php echo base_url().'assets/';?>dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="<?php echo base_url().'assets/';?>dist/js/demo.js"></script>
<script src="<?php echo base_url().'assets/';?>plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="<?php echo base_url().'assets/';?>plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- page script -->
<script>
$(function () {
/* ChartJS
* -------
* Here we will create a few charts using ChartJS
*/
//--------------
//- AREA CHART -
//--------------
// Get context with jQuery - using jQuery's .get() method.
var areaChartCanvas = $('#areaChart').get(0).getContext('2d')
var areaChartData = {
labels : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label : 'Digital Goods',
backgroundColor : 'rgba(60,141,188,0.9)',
borderColor : 'rgba(60,141,188,0.8)',
pointRadius : false,
pointColor : '#3b8bba',
pointStrokeColor : 'rgba(60,141,188,1)',
pointHighlightFill : '#fff',
pointHighlightStroke: 'rgba(60,141,188,1)',
data : [28, 48, 40, 19, 86, 27, 90]
},
{
label : 'Electronics',
backgroundColor : 'rgba(210, 214, 222, 1)',
borderColor : 'rgba(210, 214, 222, 1)',
pointRadius : false,
pointColor : 'rgba(210, 214, 222, 1)',
pointStrokeColor : '#c1c7d1',
pointHighlightFill : '#fff',
pointHighlightStroke: 'rgba(220,220,220,1)',
data : [65, 59, 80, 81, 56, 55, 40]
},
]
}
var areaChartOptions = {
maintainAspectRatio : false,
responsive : true,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines : {
display : false,
}
}],
yAxes: [{
gridLines : {
display : false,
}
}]
}
}
// This will get the first returned node in the jQuery collection.
var areaChart = new Chart(areaChartCanvas, {
type: 'line',
data: areaChartData,
options: areaChartOptions
})
//-------------
//- LINE CHART -
//--------------
var lineChartCanvas = $('#lineChart').get(0).getContext('2d')
var lineChartOptions = jQuery.extend(true, {}, areaChartOptions)
var lineChartData = jQuery.extend(true, {}, areaChartData)
lineChartData.datasets[0].fill = false;
lineChartData.datasets[1].fill = false;
lineChartOptions.datasetFill = false
var lineChart = new Chart(lineChartCanvas, {
type: 'line',
data: lineChartData,
options: lineChartOptions
})
//-------------
//- DONUT CHART -
//-------------
// Get context with jQuery - using jQuery's .get() method.
var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
var donutData = {
labels: [
'Chrome',
'IE',
'FireFox',
'Safari',
'Opera',
'Navigator',
],
datasets: [
{
data: [700,500,400,600,300,100],
backgroundColor : ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de'],
}
]
}
var donutOptions = {
maintainAspectRatio : false,
responsive : true,
}
//Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
var donutChart = new Chart(donutChartCanvas, {
type: 'doughnut',
data: donutData,
options: donutOptions
})
//-------------
//- PIE CHART -
//-------------
// Get context with jQuery - using jQuery's .get() method.
var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
var pieData = donutData;
var pieOptions = {
maintainAspectRatio : false,
responsive : true,
}
//Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
var pieChart = new Chart(pieChartCanvas, {
type: 'pie',
data: pieData,
options: pieOptions
})
//-------------
//- BAR CHART -
//-------------
var barChartCanvas = $('#barChart').get(0).getContext('2d')
var barChartData = jQuery.extend(true, {}, areaChartData)
var temp0 = areaChartData.datasets[0]
var temp1 = areaChartData.datasets[1]
barChartData.datasets[0] = temp1
barChartData.datasets[1] = temp0
var barChartOptions = {
responsive : true,
maintainAspectRatio : false,
datasetFill : false
}
var barChart = new Chart(barChartCanvas, {
type: 'bar',
data: barChartData,
options: barChartOptions
})
//---------------------
//- STACKED BAR CHART -
//---------------------
var stackedBarChartCanvas = $('#stackedBarChart').get(0).getContext('2d')
var stackedBarChartData = jQuery.extend(true, {}, barChartData)
var stackedBarChartOptions = {
responsive : true,
maintainAspectRatio : false,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
var stackedBarChart = new Chart(stackedBarChartCanvas, {
type: 'bar',
data: stackedBarChartData,
options: stackedBarChartOptions
})
})
</script>
Zerion Mini Shell 1.0