429 lines
14 KiB
Plaintext
429 lines
14 KiB
Plaintext
<div class="row">
|
|
<div class="col-md-9 col-lg-9">
|
|
<!-- <h4><strong>Role Features</strong></h4> -->
|
|
<!-- <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p> -->
|
|
<div class="panel-group" id="accordion">
|
|
<% if current_user.role == 'administrator' || current_user.role == 'manager' %>
|
|
<!-- <div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
Administrator
|
|
</h4>
|
|
</div>
|
|
<div id="admin" class="panel-collapse collapse in">
|
|
<div class="panel-body">
|
|
<ul class="col-md-4">
|
|
<li><strong>All Settings</strong></li>
|
|
<ul>
|
|
<li>Zone</li>
|
|
<li>OQS</li>
|
|
<li>Menu</li>
|
|
<li>Cashier Terminal</li>
|
|
<li>Payment</li>
|
|
<li>Merbership</li>
|
|
<li>Print</li>
|
|
<li>Employees</li>
|
|
<li>Accounts</li>
|
|
</ul>
|
|
</ul>
|
|
<ul class="col-md-4">
|
|
<li><strong>Transactions</strong></li>
|
|
<ul class="">
|
|
<li>Order</li>
|
|
<li>Sale</li>
|
|
<li>Credit Note</li>
|
|
</ul><br>
|
|
<li><strong>Reports</strong></li>
|
|
<ul class="">
|
|
<li>Daily Sale</li>
|
|
<li>Sale Item</li>
|
|
<li>Receipt</li>
|
|
<li>Shift Sale</li>
|
|
<li>Credit Sale</li>
|
|
<li>Void Sale</li>
|
|
</ul>
|
|
</ul>
|
|
<ul class="col-md-4">
|
|
<li><strong>OQS</strong></li><br>
|
|
<li><strong>Cashier</strong></li><br>
|
|
<li><strong>CRM</strong></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="panel">
|
|
<div class="panel-heading"><h4>Top Products</h4></div>
|
|
<div class="panel-body">
|
|
<canvas id="top_products" width="400" height="200"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="panel">
|
|
<div class="panel-heading"><h4>Inventory</h4></div>
|
|
<div class="panel-body">
|
|
<canvas id="inventory" width="400" height="200"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br><br>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="panel">
|
|
<div class="panel-heading"><h4>Hourly Sales</h4></div>
|
|
<div class="panel-body">
|
|
<canvas id="hourly_sales" width="400" height="200"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="panel">
|
|
<div class="panel-heading"><h4>Employee Sales</h4></div>
|
|
<div class="panel-body">
|
|
<canvas id="employee_sales" width="400" height="200"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% elsif current_user.role == 'manager' %>
|
|
<!-- <div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
Manager
|
|
</h4>
|
|
</div>
|
|
<div id="admin" class="panel-collapse collapse in">
|
|
<div class="panel-body">
|
|
<ul class="col-md-4">
|
|
<li class="">All Settings</li>
|
|
<ul class="">
|
|
<li>Zone</li>
|
|
<li>OQS</li>
|
|
<li>Menu</li>
|
|
<li>Cashier Terminal</li>
|
|
<li>Print</li>
|
|
<li>Employees</li>
|
|
<li>Accounts</li>
|
|
</ul>
|
|
</ul>
|
|
<ul class="col-md-4">
|
|
<li class="">Transactions</li>
|
|
<ul class="">
|
|
<li>Order</li>
|
|
<li>Sale</li>
|
|
<li>Credit Note</li>
|
|
</ul><br>
|
|
<li>Reports</li>
|
|
<ul class="">
|
|
<li>Daily Sale</li>
|
|
<li>Sale Item</li>
|
|
<li>Receipt</li>
|
|
<li>Shift Sale</li>
|
|
<li>Credit Sale</li>
|
|
<li>Void Sale</li>
|
|
</ul>
|
|
</ul>
|
|
<ul class="col-md-4">
|
|
<li>OQS</li><br>
|
|
<li>Cashier</li><br>
|
|
<li>CRM</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<% elsif current_user.role == 'supervisour' %>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
Supervisor
|
|
</h4>
|
|
</div>
|
|
<div id="supervisor" class="panel-collapse collapse in">
|
|
<div class="panel-body">
|
|
<ul class="">
|
|
<li>OQS</li>
|
|
<ul>
|
|
<li class="">Void</li>
|
|
<li class="">FOC</li>
|
|
<li class="">Edit</li>
|
|
<li class="">Credit</li>
|
|
<li class="">Payment</li>
|
|
</ul>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% elsif current_user.role == 'cashier' %>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
Cashier
|
|
</h4>
|
|
</div>
|
|
<div id="cashier" class="panel-collapse collapse in">
|
|
<div class="panel-body">
|
|
<ul class="">
|
|
<li class="">Cashier Panel except Edit and Void</li>
|
|
<li class="">Sale and Order</li>
|
|
<li class="">and Queue in CRM</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% elsif current_user.role == 'account' %>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
<h4 class="panel-title">
|
|
Accountant
|
|
</h4>
|
|
</div>
|
|
<div id="accountant" class="panel-collapse collapse in">
|
|
<div class="panel-body">
|
|
<ul class="">
|
|
<li class="">Daily Sale Report</li>
|
|
<li class="">Sale Item Report</li>
|
|
<li class="">Receipt No Report</li>
|
|
<li class="">ShiftSale Report</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<div class="card" id="oqs" onclick="location.href='<%= oqs_root_path %>'">
|
|
<div class="card-content dashboard-nav">OQS</div>
|
|
</div>
|
|
|
|
<div class="card" id="origami" onclick="location.href='<%= origami_root_path %>'">
|
|
<div class="card-content dashboard-nav">Cashier</div>
|
|
</div>
|
|
|
|
<div class="card" id="crm" onclick="location.href='<%= crm_root_path %>'">
|
|
<div class="card-content dashboard-nav">CRM</div>
|
|
</div>
|
|
|
|
<!-- No Needs
|
|
<div class="card" id="backend" onclick="location.href='<%= dashboard_path %>'">
|
|
<div class="card-content">
|
|
<span class="card-title">Backend</span>
|
|
</div>
|
|
</div> -->
|
|
|
|
<div class="card" id="backend" onclick="location.href='<%= inventory_path %>'">
|
|
<div class="card-content dashboard-nav">Inventory</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="footer" style="background-color: inherit">
|
|
<div class="card">
|
|
<div class="page-header center-text">
|
|
<h4 class="footer-header">
|
|
<%= @shop.name %>
|
|
</h4>
|
|
</div>
|
|
<div class="center-text">
|
|
<%= @shop.address %>
|
|
</div>
|
|
<div class="center-text">
|
|
<%= @shop.phone_no %>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
<script src="js/Chart.js"></script>
|
|
<script>
|
|
$(document).ready(function(){
|
|
var top_products = JSON.parse('<%= @top_products.to_json.html_safe %>');
|
|
var hourly_sales = JSON.parse('<%= @hourly_sales.to_json.html_safe %>');
|
|
var employee_sales = JSON.parse('<%= @employee_sales.to_json.html_safe %>');
|
|
var inventories = JSON.parse('<%= @inventories.to_json.html_safe %>');
|
|
showTopProductsChartData(top_products);
|
|
showHourlySalesChartData(hourly_sales);
|
|
showEmployeeSalesChartData(employee_sales);
|
|
showInventoryChartData(inventories);
|
|
});
|
|
|
|
function randomColorGenerator () {
|
|
return '#' + (Math.random().toString(16) + '0000000').slice(2, 8);
|
|
};
|
|
|
|
function showTopProductsChartData(top_products) {
|
|
var labels = [];
|
|
var datasets = [];
|
|
var backgroundColor = [];
|
|
|
|
if(top_products!=undefined && top_products!=''){
|
|
if(top_products.length>0){
|
|
$.each(top_products,function(k,val){
|
|
labels.push(val.product_name);
|
|
datasets.push(val.total_item);
|
|
backgroundColor.push(randomColorGenerator());
|
|
});
|
|
|
|
var chart = new Chart("top_products", {
|
|
type: 'pie',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
data: datasets,
|
|
backgroundColor: backgroundColor
|
|
}]
|
|
},
|
|
options: {
|
|
legend: {
|
|
labels: {
|
|
fontColor: 'black'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
function showHourlySalesChartData(hourly_sales) {
|
|
var labels = [];
|
|
var datasets = [];
|
|
var backgroundColor = [];
|
|
|
|
if(hourly_sales!=undefined && hourly_sales!=''){
|
|
if(Object.keys(hourly_sales).length > 0){
|
|
$.each(hourly_sales,function(k,val){
|
|
labels.push(k.toString());
|
|
datasets.push(val);
|
|
backgroundColor.push(randomColorGenerator());
|
|
});
|
|
|
|
|
|
var myChart = new Chart("hourly_sales", {
|
|
type: 'bar',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: '',
|
|
data: datasets,
|
|
backgroundColor: backgroundColor,
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
legend: {
|
|
display:false
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
stacked: true,
|
|
categorySpacing: 0,
|
|
barPercentage: 0.5
|
|
}],
|
|
yAxes: [{
|
|
stacked: true,
|
|
ticks: {
|
|
beginAtZero:true
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
function showEmployeeSalesChartData(employee_sales) {
|
|
var labels = [];
|
|
var datasets = [];
|
|
var backgroundColor = [];
|
|
|
|
if(employee_sales!=undefined && employee_sales!=''){
|
|
if(Object.keys(employee_sales).length > 0){
|
|
$.each(employee_sales,function(k,val){
|
|
labels.push(k.toString());
|
|
datasets.push(val);
|
|
backgroundColor.push(randomColorGenerator());
|
|
});
|
|
|
|
var myChart = new Chart("employee_sales", {
|
|
type: 'bar',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: '',
|
|
data: datasets,
|
|
backgroundColor: backgroundColor,
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
legend: {
|
|
display:false
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
stacked: true,
|
|
categorySpacing: 0,
|
|
barPercentage: 0.5
|
|
}],
|
|
yAxes: [{
|
|
stacked: true,
|
|
ticks: {
|
|
beginAtZero:true
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
function showInventoryChartData(inventories) {
|
|
var labels = [];
|
|
var datasets = [];
|
|
var borderColor = [];
|
|
|
|
if(inventories!=undefined && inventories!=''){
|
|
if(Object.keys(inventories).length > 0){
|
|
$.each(inventories,function(k,val){
|
|
labels.push(k.toString());
|
|
datasets.push(val);
|
|
borderColor.push(randomColorGenerator());
|
|
});
|
|
|
|
var myChart = new Chart("inventory", {
|
|
type: 'line',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
fill: false,
|
|
data: datasets,
|
|
borderColor: borderColor
|
|
}]
|
|
},
|
|
options: {
|
|
legend: {
|
|
display:false
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
stacked: true
|
|
}],
|
|
yAxes: [{
|
|
stacked: false,
|
|
ticks: {
|
|
beginAtZero:true
|
|
}
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script> |