700 lines
21 KiB
PHP
700 lines
21 KiB
PHP
<!doctype html>
|
|
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
|
|
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
|
|
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
|
|
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>SPK PUPUK ORGANIK</title>
|
|
<meta name="description" content="Ela Admin - HTML5 Admin Template">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<link rel="apple-touch-icon" href="https://i.imgur.com/QRAUqs9.png">
|
|
<link rel="shortcut icon" href="https://i.imgur.com/QRAUqs9.png">
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.0/normalize.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pixeden-stroke-7-icon@1.2.3/pe-icon-7-stroke/dist/pe-icon-7-stroke.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.2.0/css/flag-icon.min.css">
|
|
<link rel="stylesheet" href="{{ asset('asset/css/cs-skin-elastic.css') }}">
|
|
<link rel="stylesheet" href="{{asset('asset/css/style.css') }}">
|
|
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> -->
|
|
<link href="https://cdn.jsdelivr.net/npm/chartist@0.11.0/dist/chartist.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/jqvmap@1.5.1/dist/jqvmap.min.css" rel="stylesheet">
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/weathericons@2.1.0/css/weather-icons.css" rel="stylesheet" />
|
|
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@3.9.0/dist/fullcalendar.min.css" rel="stylesheet" />
|
|
|
|
<style>
|
|
#weatherWidget .currentDesc {
|
|
color: #ffffff!important;
|
|
}
|
|
.traffic-chart {
|
|
min-height: 335px;
|
|
}
|
|
#flotPie1 {
|
|
height: 150px;
|
|
}
|
|
#flotPie1 td {
|
|
padding:3px;
|
|
}
|
|
#flotPie1 table {
|
|
top: 20px!important;
|
|
right: -10px!important;
|
|
}
|
|
.chart-container {
|
|
display: table;
|
|
min-width: 270px ;
|
|
text-align: left;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
#flotLine5 {
|
|
height: 105px;
|
|
}
|
|
|
|
#flotBarChart {
|
|
height: 150px;
|
|
}
|
|
#cellPaiChart{
|
|
height: 160px;
|
|
}
|
|
|
|
/* Reset dan Base */
|
|
body {
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
min-height: 100vh;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
/* Mobile Navigation */
|
|
.mobile-nav-toggle {
|
|
display: none;
|
|
position: fixed;
|
|
top: 15px;
|
|
right: 15px;
|
|
z-index: 1002;
|
|
background: #fff;
|
|
border: 1px solid #ddd;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 4px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Sidebar Base */
|
|
#left-panel {
|
|
width: 260px;
|
|
height: 100vh;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background: #fff;
|
|
border-right: 1px solid #eee;
|
|
z-index: 1001;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* Content Wrapper */
|
|
#right-panel {
|
|
margin-left: 260px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* Mobile Styles */
|
|
@media (max-width: 768px) {
|
|
.mobile-nav-toggle {
|
|
display: flex;
|
|
}
|
|
|
|
#left-panel {
|
|
left: -260px;
|
|
}
|
|
|
|
#left-panel.show {
|
|
left: 0;
|
|
box-shadow: 0 0 15px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
#right-panel {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.nav-open {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
|
|
/* Overlay */
|
|
.overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0,0,0,0.3);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.overlay.show {
|
|
display: block;
|
|
}
|
|
|
|
/* Navigation Menu */
|
|
.app-brand {
|
|
padding: 20px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.app-title {
|
|
color: #333;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav {
|
|
padding: 10px;
|
|
}
|
|
|
|
.nav li {
|
|
list-style: none;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.nav li a {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 12px 15px;
|
|
color: #333;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.nav li a:hover {
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.nav li.active a {
|
|
background: #f8f9fa;
|
|
color: #28a745;
|
|
}
|
|
|
|
.menu-icon {
|
|
width: 20px;
|
|
margin-right: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Ensure sidebar is visible when active on mobile */
|
|
@media (max-width: 768px) {
|
|
#left-panel.show {
|
|
transform: translateX(0);
|
|
visibility: visible;
|
|
}
|
|
|
|
#left-panel {
|
|
transform: translateX(-100%);
|
|
visibility: hidden;
|
|
}
|
|
|
|
.nav {
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
}
|
|
|
|
.nav li a {
|
|
opacity: 1 !important;
|
|
visibility: visible !important;
|
|
}
|
|
}
|
|
|
|
/* Desktop Styles */
|
|
@media (min-width: 769px) {
|
|
#left-panel {
|
|
left: 0;
|
|
}
|
|
|
|
#right-panel {
|
|
margin-left: 260px;
|
|
}
|
|
|
|
.overlay {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* Header adjustments */
|
|
.header {
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
|
|
/* Content adjustments */
|
|
.content {
|
|
padding: 15px;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.content {
|
|
margin-top: 70px;
|
|
padding: 10px;
|
|
}
|
|
}
|
|
|
|
/* Navigation menu adjustments */
|
|
.navbar .navbar-nav {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.navbar .navbar-nav > li {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Card adjustments for mobile */
|
|
.card {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 15px;
|
|
}
|
|
|
|
/* Table adjustments for mobile */
|
|
.table-responsive {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
/* Form adjustments for mobile */
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
/* Button adjustments for mobile */
|
|
.btn {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* Menu Item Styles */
|
|
.nav-link,
|
|
.navbar-nav li a {
|
|
color: #333 !important;
|
|
padding: 12px 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
transition: all 0.3s ease;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
margin: 2px 8px;
|
|
}
|
|
|
|
.nav-link:hover,
|
|
.navbar-nav li a:hover {
|
|
background: #f8f9fa;
|
|
color: #28a745 !important;
|
|
}
|
|
|
|
.active > a {
|
|
background: #e8f5e9 !important;
|
|
color: #28a745 !important;
|
|
}
|
|
|
|
.active .menu-icon {
|
|
color: #28a745;
|
|
}
|
|
|
|
/* Menu Title */
|
|
.menu-title {
|
|
color: #6c757d;
|
|
padding: 12px 20px;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* Logout item */
|
|
.logout-item {
|
|
margin-top: 20px;
|
|
border-top: 1px solid #e9ecef;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.logout-item a {
|
|
color: #dc3545 !important;
|
|
}
|
|
|
|
.logout-item a:hover {
|
|
background: #fff5f5 !important;
|
|
}
|
|
|
|
/* Logo area */
|
|
.navbar-brand {
|
|
padding: 15px 20px;
|
|
border-bottom: 1px solid #e9ecef;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Improve scrollbar appearance */
|
|
#left-panel::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
#left-panel::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
|
|
#left-panel::-webkit-scrollbar-thumb {
|
|
background: #ddd;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Logo Styles */
|
|
.navbar-header {
|
|
padding: 15px 20px;
|
|
border-bottom: 1px solid #eee;
|
|
width: 100%;
|
|
}
|
|
|
|
.navbar-brand {
|
|
color: #333 !important;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
padding: 0;
|
|
margin: 0;
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
</style>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
@stack('styles')
|
|
</head>
|
|
|
|
<body>
|
|
<button class="mobile-nav-toggle">
|
|
<i class="fa fa-bars"></i>
|
|
</button>
|
|
|
|
<div class="overlay"></div>
|
|
|
|
<!-- Left Panel -->
|
|
@include('layout.sidebar')
|
|
|
|
<!-- Right Panel -->
|
|
<div id="right-panel" class="right-panel">
|
|
@include('layout.header')
|
|
|
|
<div class="content">
|
|
@yield('content')
|
|
</div>
|
|
|
|
<div class="clearfix"></div>
|
|
@include('layout.footer')
|
|
</div>
|
|
|
|
{{-- logout modal --}}
|
|
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="logoutModal"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-sm" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Apakah anda yakin untuk logout?</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
|
|
<form action="{{ route('logout') }}" method="POST">
|
|
@csrf
|
|
<button type="submit" class="btn btn-danger">Logout</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.4/dist/umd/popper.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery-match-height@0.7.2/dist/jquery.matchHeight.min.js"></script>
|
|
<script src="{{ asset('asset/assets/js/main.js') }}"></script>
|
|
|
|
<!-- Chart js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.7.3/dist/Chart.bundle.min.js"></script>
|
|
|
|
<!--Chartist Chart-->
|
|
<script src="https://cdn.jsdelivr.net/npm/chartist@0.11.0/dist/chartist.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chartist-plugin-legend@0.6.2/chartist-plugin-legend.min.js"></script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery.flot@0.8.3/jquery.flot.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/flot-pie@1.0.0/src/jquery.flot.pie.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/flot-spline@0.0.1/js/jquery.flot.spline.min.js"></script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/simpleweather@3.1.0/jquery.simpleWeather.min.js"></script>
|
|
<script src="{{asset ('asset/js/init/weather-init.js') }}"></script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/moment.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@3.9.0/dist/fullcalendar.min.js"></script>
|
|
<script src="{{ asset('asset/js/init/fullcalendar-init.js') }}"></script>
|
|
|
|
<!--Local Stuff-->
|
|
<script>
|
|
jQuery(document).ready(function($) {
|
|
"use strict";
|
|
|
|
// Pie chart flotPie1
|
|
var piedata = [
|
|
{ label: "Desktop visits", data: [[1,32]], color: '#5c6bc0'},
|
|
{ label: "Tab visits", data: [[1,33]], color: '#ef5350'},
|
|
{ label: "Mobile visits", data: [[1,35]], color: '#66bb6a'}
|
|
];
|
|
|
|
$.plot('#flotPie1', piedata, {
|
|
series: {
|
|
pie: {
|
|
show: true,
|
|
radius: 1,
|
|
innerRadius: 0.65,
|
|
label: {
|
|
show: true,
|
|
radius: 2/3,
|
|
threshold: 1
|
|
},
|
|
stroke: {
|
|
width: 0
|
|
}
|
|
}
|
|
},
|
|
grid: {
|
|
hoverable: true,
|
|
clickable: true
|
|
}
|
|
});
|
|
// Pie chart flotPie1 End
|
|
// cellPaiChart
|
|
var cellPaiChart = [
|
|
{ label: "Direct Sell", data: [[1,65]], color: '#5b83de'},
|
|
{ label: "Channel Sell", data: [[1,35]], color: '#00bfa5'}
|
|
];
|
|
$.plot('#cellPaiChart', cellPaiChart, {
|
|
series: {
|
|
pie: {
|
|
show: true,
|
|
stroke: {
|
|
width: 0
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
show: false
|
|
},grid: {
|
|
hoverable: true,
|
|
clickable: true
|
|
}
|
|
|
|
});
|
|
// cellPaiChart End
|
|
// Line Chart #flotLine5
|
|
var newCust = [[0, 3], [1, 5], [2,4], [3, 7], [4, 9], [5, 3], [6, 6], [7, 4], [8, 10]];
|
|
|
|
var plot = $.plot($('#flotLine5'),[{
|
|
data: newCust,
|
|
label: 'New Data Flow',
|
|
color: '#fff'
|
|
}],
|
|
{
|
|
series: {
|
|
lines: {
|
|
show: true,
|
|
lineColor: '#fff',
|
|
lineWidth: 2
|
|
},
|
|
points: {
|
|
show: true,
|
|
fill: true,
|
|
fillColor: "#ffffff",
|
|
symbol: "circle",
|
|
radius: 3
|
|
},
|
|
shadowSize: 0
|
|
},
|
|
points: {
|
|
show: true,
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
grid: {
|
|
show: false
|
|
}
|
|
});
|
|
// Line Chart #flotLine5 End
|
|
// Traffic Chart using chartist
|
|
if ($('#traffic-chart').length) {
|
|
var chart = new Chartist.Line('#traffic-chart', {
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
|
|
series: [
|
|
[0, 18000, 35000, 25000, 22000, 0],
|
|
[0, 33000, 15000, 20000, 15000, 300],
|
|
[0, 15000, 28000, 15000, 30000, 5000]
|
|
]
|
|
}, {
|
|
low: 0,
|
|
showArea: true,
|
|
showLine: false,
|
|
showPoint: false,
|
|
fullWidth: true,
|
|
axisX: {
|
|
showGrid: true
|
|
}
|
|
});
|
|
|
|
chart.on('draw', function(data) {
|
|
if(data.type === 'line' || data.type === 'area') {
|
|
data.element.animate({
|
|
d: {
|
|
begin: 2000 * data.index,
|
|
dur: 2000,
|
|
from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
|
|
to: data.path.clone().stringify(),
|
|
easing: Chartist.Svg.Easing.easeOutQuint
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
// Traffic Chart using chartist End
|
|
//Traffic chart chart-js
|
|
if ($('#TrafficChart').length) {
|
|
var ctx = document.getElementById( "TrafficChart" );
|
|
ctx.height = 150;
|
|
var myChart = new Chart( ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" ],
|
|
datasets: [
|
|
{
|
|
label: "Visit",
|
|
borderColor: "rgba(4, 73, 203,.09)",
|
|
borderWidth: "1",
|
|
backgroundColor: "rgba(4, 73, 203,.5)",
|
|
data: [ 0, 2900, 5000, 3300, 6000, 3250, 0 ]
|
|
},
|
|
{
|
|
label: "Bounce",
|
|
borderColor: "rgba(245, 23, 66, 0.9)",
|
|
borderWidth: "1",
|
|
backgroundColor: "rgba(245, 23, 66,.5)",
|
|
pointHighlightStroke: "rgba(245, 23, 66,.5)",
|
|
data: [ 0, 4200, 4500, 1600, 4200, 1500, 4000 ]
|
|
},
|
|
{
|
|
label: "Targeted",
|
|
borderColor: "rgba(40, 169, 46, 0.9)",
|
|
borderWidth: "1",
|
|
backgroundColor: "rgba(40, 169, 46, .5)",
|
|
pointHighlightStroke: "rgba(40, 169, 46,.5)",
|
|
data: [1000, 5200, 3600, 2600, 4200, 5300, 0 ]
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
tooltips: {
|
|
mode: 'index',
|
|
intersect: false
|
|
},
|
|
hover: {
|
|
mode: 'nearest',
|
|
intersect: true
|
|
}
|
|
|
|
}
|
|
} );
|
|
}
|
|
//Traffic chart chart-js End
|
|
// Bar Chart #flotBarChart
|
|
$.plot("#flotBarChart", [{
|
|
data: [[0, 18], [2, 8], [4, 5], [6, 13],[8,5], [10,7],[12,4], [14,6],[16,15], [18, 9],[20,17], [22,7],[24,4], [26,9],[28,11]],
|
|
bars: {
|
|
show: true,
|
|
lineWidth: 0,
|
|
fillColor: '#ffffff8a'
|
|
}
|
|
}], {
|
|
grid: {
|
|
show: false
|
|
}
|
|
});
|
|
// Bar Chart #flotBarChart End
|
|
});
|
|
</script>
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
|
|
|
<!-- jQuery and Bootstrap JS -->
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
@stack('scripts')
|
|
|
|
<script>
|
|
jQuery(document).ready(function($) {
|
|
// Toggle mobile navigation
|
|
$('.mobile-nav-toggle').on('click', function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
$('#left-panel').toggleClass('show');
|
|
$('.overlay').toggleClass('show');
|
|
$('body').toggleClass('nav-open');
|
|
});
|
|
|
|
// Close menu when clicking overlay
|
|
$('.overlay').on('click', function() {
|
|
$('#left-panel').removeClass('show');
|
|
$('.overlay').removeClass('show');
|
|
$('body').removeClass('nav-open');
|
|
});
|
|
|
|
// Prevent menu close when clicking inside sidebar
|
|
$('#left-panel').on('click', function(e) {
|
|
e.stopPropagation();
|
|
});
|
|
|
|
// Close menu when clicking outside
|
|
$(document).on('click', function(e) {
|
|
if (!$(e.target).closest('#left-panel, .mobile-nav-toggle').length) {
|
|
$('#left-panel').removeClass('show');
|
|
$('.overlay').removeClass('show');
|
|
$('body').removeClass('nav-open');
|
|
}
|
|
});
|
|
|
|
// Ensure menu items are visible on mobile
|
|
if ($(window).width() <= 768) {
|
|
$('#left-panel .nav').css({
|
|
'opacity': '1',
|
|
'visibility': 'visible'
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|