| Server IP : 210.245.233.93 / Your IP : 216.73.216.226 Web Server : Apache/2.2.15 (CentOS) System : Linux webserver2.onesolution.com.hk 2.6.32-754.35.1.el6.x86_64 #1 SMP Sat Nov 7 12:42:14 UTC 2020 x86_64 User : apache ( 48) PHP Version : 5.3.3 Disable Function : exec, shell_exec, system, passthru, popen, proc_open, pcntl_exec MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/hkosl.com/billingsystem/dashboard/ |
Upload File : |
<!DOCTYPE html>
<html lang="en-HK" prefix="og: http://ogp.me/ns#">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Dashboard</title>
<!-- css -->
<?php include 'inc/headlinks.php'; ?>
<?php include 'inc/link-js.php'; ?>
<!-- End layout styles -->
<link rel="shortcut icon" href="../assets/images/favicon.png" />
</head>
<body>
<div class="container-scroller">
<!-- partial:partials/_sidebar.html -->
<?php include 'inc/sidebar.php'; ?>
<!-- partial -->
<div class="container-fluid page-body-wrapper">
<!-- partial:partials/_navbar.html -->
<?php include 'inc/navbar.php'; ?>
<!-- partial -->
<div class="main-panel dasbordWrap">
<div class="content-wrapper pb-0">
<div class="row">
<!--<div class="col-md-12">
<a href="javascript:" class="sbutton moreBtn loadMore" data-items="12" data-time="4"
data-shown="4">LOAD MORE</a>
<a href="javascript:" class="sbutton btn-secondary showLess">SHOW LESS</a>
</div>-->
<div class="col-md-8 col-xl-9">
<!-- <div class="load-more-container">
</div>-->
<div class="boxShadow whiteBg mb-4 d-flex align-items-center flexWrap justify-content-between">
<div class="d-flex">
<div class="form-group mb-0 d-flex align-items-center mr-4">
<label for="exampleSelectGender" class="mr-2 nowrap"><i class="mdi mdi-calendar-clock"></i>
<span class="">Data Range</span></label>
<select class="form-control" id="Daterange">
<option value="Today">Today</option>
<option value="Yesterday">Yesterday</option>
<option value="Last7">Last 7 Day</option>
<option value="Last30">Last 30 Day</option>
<option value="ThisMonth">This Month</option>
<option value="LastMonth">Last Month</option>
<option value="ThisYear">This Year</option>
<option value="LastYear">Last Year</option>
<option value="Custom">Custom Range</option>
</select>
</div>
</div>
<div class="d-flex align-items-center small">
<i class="mdi mdi-calendar-clock mr-2"></i>
<p class="mb-0"><span class="showStartday">30 Jan 2020</span> to <span class="showEndday">30 Feb 2020</span></p>
</div>
</div>
<ul class="row p-0 ">
<li class="col-xl-3 col-6 stretch-card grid-margin">
<div class="boxShadow mt-4 summaryItem whiteBg">
<div class="iconBox bg-gr-pruple whiteFont shadow_pruple">
<i class="mdi mdi-checkbox-multiple-blank"></i>
</div>
<div class="box-body">
<p class="h1">200</p>
<p class="textellipsis mb-0 small">Total Categories</p>
</div>
</div>
</li>
<li class="col-xl-3 col-6 stretch-card grid-margin">
<div class="boxShadow mt-4 summaryItem whiteBg">
<div class="iconBox bg-gr-orange whiteFont shadow_orange">
<i class="mdi mdi-cube"></i>
</div>
<div class="box-body">
<p class="h1">1000</p>
<p class="textellipsis mb-0 small">Total Products</p>
</div>
</div>
</li>
<li class="col-xl-3 col-6 stretch-card grid-margin">
<div class="boxShadow mt-4 summaryItem whiteBg">
<div class="iconBox bg-gr-green whiteFont shadow_green">
<i class="mdi mdi-account-multiple"></i>
</div>
<div class="box-body">
<p class="h1">2000</p>
<p class="textellipsis mb-0 small">Total Customers</p>
</div>
</div>
</li>
<li class="col-xl-3 col-6 stretch-card grid-margin">
<div class="boxShadow mt-4 summaryItem whiteBg">
<div class="iconBox bg-gr-pink whiteFont shadow_pink">
<i class="mdi mdi-account"></i>
</div>
<div class="box-body">
<p class="h1">100</p>
<p class="textellipsis mb-0 small">Total Outstanding Invoices</p>
</div>
</div>
</li>
</ul>
<div class="boxShadow whiteBg mb-4">
<div class="card-body">
<div class="d-flex justify-content-between flex-wrap">
<div class="mb-3">
<div class="card-title mb-0">Sales Summary</div>
<div class="d-flex flex-wrap pt-2 justify-content-between sales-header-right">
<div class="d-flex me-5 mr-4">
<button type="button" class="btn btn-social-icon btn-outline-sales mr-2"><i class="mdi mdi-inbox-arrow-down"></i></button>
<div class="ps-2">
<h3 class="mb-0 font-weight-bold head-count">$8,217.00</h3>
<span class="font-10 font-weight-semibold text-muted">TOTAL
SALES</span>
</div>
</div>
</div>
</div>
<div class="mb-3">
<div class="d-flex text-muted align-items-center">
<a href="javascript: void(0);" class="smallTabBtn active">Day</a>
<a href="javascript: void(0);" class="smallTabBtn">Week</a>
<a href="javascript: void(0);" class="smallTabBtn">Month</a>
</div>
</div>
</div>
<div class="flot-chart-wrapper">
<div id="flotChart" class="flot-chart">
<canvas class="flot-base"></canvas>
</div>
</div>
</div>
</div>
<div class="boxShadow whiteBg mb-4">
<div class="card-body">
<div class="d-flex justify-content-between flex-wrap">
<div class="mb-3">
<div class="card-title mb-0">Order Summary</div>
<h3 class="font-weight-bold mb-0">$32,409.00</h3>
</div>
<div class="mb-3">
<div class="d-flex text-muted align-items-center">
<a href="javascript: void(0);" class="smallTabBtn active">Day</a>
<a href="javascript: void(0);" class="smallTabBtn">Week</a>
<a href="javascript: void(0);" class="smallTabBtn">Month</a>
</div>
</div>
</div>
<div class="flot-chart-wrapper">
<div id="flotChart2" class="flot-chart">
<canvas class="flot-base"></canvas>
</div>
</div>
</div>
</div>
<div class="boxShadow whiteBg mb-4 card-body">
<a class="h4 collapseBtn mb-3" data-toggle="collapse" href="#Variants" role="button" aria-expanded="false" aria-controls="Variants">
Variants
</a>
<div class="collapse" id="Variants">
<div class="d-flex justify-content-between">
<p class="mb-3 font-weight-bold">5 Most Purchased Product/Services</p>
<a href="#" class="small">View report</a>
</div>
<div class="table-responsive">
<table class="table custom-table text-dark">
<thead>
<tr>
<th>Product Code</th>
<th>Product</th>
<th>Product Title</th>
<th>Stock</th>
<th class="text-right">Unit Price</th>
<th class="text-right">Qty</th>
<th class="text-right">Amount Sold</th>
</tr>
</thead>
<tbody>
<tr>
<td> <a href="#"> SKU-202102020-001 </a>
</td>
<td>
<img src="../assets/images/product_images/apple-watch_2.jpg" class="me-2" alt="image">
</td>
<td>
Apple Watch 2020
</td>
<td>
<div class="tag btn-outline-success"> In stock
</div>
</td>
<td class="text-right">$100.00</td>
<td class="text-right">2</td>
<td class="text-right">$200.00</td>
</tr>
<tr>
<td> <a href="#"> SKU-202102020-001 </a>
</td>
<td>
<img src="../assets/images/product_images/apple-watch_2.jpg" class="me-2" alt="image">
</td>
<td>
Apple Watch 2020
</td>
<td>
<div class="tag btn-outline-success"> In stock
</div>
</td>
<td class="text-right">$100.00</td>
<td class="text-right">2</td>
<td class="text-right">$200.00</td>
</tr>
<tr>
<td> <a href="#"> SKU-202102020-001 </a>
</td>
<td>
<img src="../assets/images/product_images/apple-watch_2.jpg" class="me-2" alt="image">
</td>
<td>
Apple Watch 2020
</td>
<td>
<div class="tag btn-outline-success"> In stock
</div>
</td>
<td class="text-right">$100.00</td>
<td class="text-right">2</td>
<td class="text-right">$200.00</td>
</tr>
<tr>
<td> <a href="#"> SKU-202102020-001 </a>
</td>
<td>
<img src="../assets/images/product_images/apple-watch_2.jpg" class="me-2" alt="image">
</td>
<td>
Apple Watch 2020
</td>
<td>
<div class="tag btn-outline-success"> In stock
</div>
</td>
<td class="text-right">$100.00</td>
<td class="text-right">2</td>
<td class="text-right">$200.00</td>
</tr>
<tr>
<td> <a href="#"> SKU-202102020-001 </a>
</td>
<td>
<img src="../assets/images/product_images/apple-watch_2.jpg" class="me-2" alt="image">
</td>
<td>
Apple Watch 2020
</td>
<td>
<div class="tag btn-outline-success"> In stock
</div>
</td>
<td class="text-right">$100.00</td>
<td class="text-right">2</td>
<td class="text-right">$200.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="boxShadow whiteBg mb-4">
<div class="card-body">
<div class="d-flex justify-content-between flex-wrap">
<div class="mb-3">
<div class="card-title mb-0">Accounts Receivable </div>
<h3 class="font-weight-bold mb-0"> $3000.00 <span class="text-success h5">0.20%<i class="mdi mdi-arrow-up"></i></span>
</h3>
</div>
<div>
<div class="d-flex text-muted align-items-center">
<a href="javascript: void(0);" class="smallTabBtn active">Day</a>
<a href="javascript: void(0);" class="smallTabBtn">Week</a>
<a href="javascript: void(0);" class="smallTabBtn">Month</a>
</div>
</div>
</div>
<div class="flot-chart-wrapper">
<div id="flotChart3" class="flot-chart">
<canvas class="flot-base"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-xl-3">
<div class="rightDashboard">
<div class="boxShadow mainTotal bg-gr-gary mb-4">
<div class="d-flex justify-content-between mb-3 flexWrap">
<div class="pr-4">
<p class="whiteFont mb-2"><i class="mdi mdi-chart-areaspline"></i> Total
Sales
</p>
<p class="h1 whiteFont mb-1 font-weight-bold">$865.2K</p>
</div>
<div class="orderTotal">
<p class="whiteFont mb-2">
INV Qty
</p>
<p class="h1 whiteFont mb-1 font-weight-bold">2K</p>
</div>
</div>
<div class="boxShadow whiteBg">
<p class="mb-0 font-weight-bold">Recent Invoice </p>
<hr class="mt-2">
<div class="recentItem">
<div class="d-flex justify-content-between flexWrap">
<span class="font-12 text-primary text-muted recentInvoice">INV#:202102020-001</span>
<div class="badge badge-success recentBadge"> Approval
</div>
</div>
<p class="mb-0"> Lida Fitzgerald</p>
<div class="d-flex justify-content-between align-items-center">
<p class="small mb-0 lightFont mr-2">22 Nov 2020
</p>
<span class="small ">$1000.00</span>
</div>
</div>
<div class="recentItem">
<div class="d-flex justify-content-between flexWrap align-items-center">
<span class="font-12 text-primary text-muted recentInvoice">INV#:202102020-001</span>
<div class="badge badge-primary recentBadge"> Partially Paid
</div>
</div>
<p class="mb-0"> Lida Fitzgerald</p>
<div class="d-flex justify-content-between align-items-center">
<p class="small mb-0 lightFont mr-2">22 Nov 2020
</p>
<span class="small">$1000.00</span>
</div>
</div>
<div class="recentItem">
<div class="d-flex justify-content-between flexWrap align-items-center">
<span class="font-12 text-primary text-muted recentInvoice">INV#:202102020-001</span>
<div class="badge badge-pruple recentBadge"> Paid
</div>
</div>
<p class="mb-0"> Lida Fitzgerald</p>
<div class="d-flex justify-content-between align-items-center">
<p class="small mb-0 lightFont mr-2">22 Nov 2020
</p>
<span class="small">$1000.00</span>
</div>
</div>
<div class="recentItem">
<div class="d-flex justify-content-between flexWrap align-items-center">
<span class="font-12 text-primary text-muted recentInvoice">INV#:202102020-001</span>
<div class="badge badge-close recentBadge"> Voided
</div>
</div>
<p class="mb-0"> Lida Fitzgerald</p>
<div class="d-flex justify-content-between align-items-center">
<p class="small mb-0 lightFont mr-2">22 Nov 2020
</p>
<span class="small">$1000.00</span>
</div>
</div>
<div class="recentItem">
<div class="d-flex justify-content-between flexWrap align-items-center">
<span class="font-12 text-primary text-muted recentInvoice">INV#:202102020-001</span>
<div class="badge badge-close recentBadge"> Voided
</div>
</div>
<p class="mb-0"> Lida Fitzgerald</p>
<div class="d-flex justify-content-between align-items-center">
<p class="small mb-0 lightFont mr-2">22 Nov 2020
</p>
<span class="small">$1000.00</span>
</div>
</div>
<div class="recentItem">
<div class="d-flex justify-content-between flexWrap align-items-center">
<span class="font-12 text-primary text-muted recentInvoice">INV#:202102020-001</span>
<div class="badge badge-close recentBadge"> Voided
</div>
</div>
<p class="mb-0"> Lida Fitzgerald</p>
<div class="d-flex justify-content-between align-items-center">
<p class="small mb-0 lightFont mr-2">22 Nov 2020
</p>
<span class="small">$1000.00</span>
</div>
</div>
<div class="recentItem">
<div class="d-flex justify-content-between flexWrap align-items-center">
<span class="font-12 text-primary text-muted recentInvoice">INV#:202102020-001</span>
<div class="badge badge-close recentBadge"> Voided
</div>
</div>
<p class="mb-0"> Lida Fitzgerald</p>
<div class="d-flex justify-content-between align-items-center">
<p class="small mb-0 lightFont mr-2">22 Nov 2020
</p>
<span class="small">$1000.00</span>
</div>
</div>
<div class="recentItem">
<div class="d-flex justify-content-between flexWrap align-items-center">
<span class="font-12 text-primary text-muted recentInvoice">INV#:202102020-001</span>
<div class="badge badge-close recentBadge"> Voided
</div>
</div>
<p class="mb-0"> Lida Fitzgerald</p>
<div class="d-flex justify-content-between align-items-center">
<p class="small mb-0 lightFont mr-2">22 Nov 2020
</p>
<span class="small">$1000.00</span>
</div>
</div>
</div>
</div>
<div class="boxShadow whiteBg mb-3">
<div class="d-flex flex-wrap justify-content-between ">
<div class="w-50">
<h4 class="font-weight-semibold mb-1 text-black small"> Customers </h4>
<h6 class="text-muted small">Accumulative unique customer </h6>
<h3 class="text-success font-weight-bold">+ 30% </h3>
</div>
<div class="doughnut-wrapper">
<canvas id="doughnutChart1" class="doughnutChartBody" width="100" height="100"></canvas>
</div>
</div>
</div>
<div class="boxShadow whiteBg mb-3">
<div class="d-flex flex-wrap justify-content-between">
<div class="w-50">
<h4 class="font-weight-semibold mb-1 text-black small"> Products </h4>
<h6 class="text-muted small">Accumulative unique Products </h6>
<h3 class="text-danger font-weight-bold">- 20% </h3>
</div>
<div class="doughnut-wrapper">
<canvas id="doughnutChart2" class="doughnutChartBody" width="100" height="100"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- partial:partials/_footer.html -->
<?php include 'inc/footer.php'; ?>
<!-- partial -->
</div>
<!-- content-wrapper ends -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<div class="modal fade dateRangeModal" tabindex="-1" role="dialog" aria-labelledby="dateRangeModal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Date range</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="input-group input-daterange d-flex align-items-center date datepicker">
<input type="text" class="form-control startDay" value="">
<div class="input-group-addon mx-4">to</div>
<input type="text" class="form-control endDay" value="">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary rangeDate">Submit</button>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('.startDay').datepicker({
format: 'd M yyyy'
});
$('.endDay').datepicker({
format: 'd M yyyy'
});
});
$(".rangeDate").click(function() {
let startday = $(".startDay").val();
let endday = $(".endDay").val();
$('.showStartday').text(startday);
$('.showEndday').text(endday);
$(".dateRangeModal").modal('hide');
});
$('#Daterange').change(function() {
let dateRange = $(this).val();
if (dateRange == "Custom") {
$(".endDay").val('');
$(".startDay").val('');
$(".dateRangeModal").modal('show');
}
});
</script>
<script src="../assets/js/bootstrap-datepicker.js"></script>
<script src="../assets/vendors/chart.js/Chart.min.js?<?= rand(1, 10000) / 7; ?>"></script>
<script src="../assets/js/dashboard.js?<?= rand(1, 10000) / 7; ?>"></script>
</body>
</html>