"Raissa Petshop"
Bootstrap 4.1.1 Snippet by Raissa Petshop

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="csrf-token" content="lx38KN2khdKCtzqkSn9sRLW5837QuDYavjfUC99h"> <title>Technity Sales and Logistic</title> <!-- Tell the browser to be responsive to screen width --> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <!-- Bootstrap 3.3.7 --> <link rel="stylesheet" href="http://manukan.diazpetshopkedurus.com/bower_components/bootstrap/dist/css/bootstrap.min.css"> <!-- jQuery UI --> <link rel="stylesheet" type="text/css" href="http://manukan.diazpetshopkedurus.com/bower_components/jquery-ui/themes/base/jquery-ui.css"> <!-- Font Awesome --> <link rel="stylesheet" href="http://manukan.diazpetshopkedurus.com/bower_components/font-awesome/css/font-awesome.min.css"> <!-- Ionicons --> <link rel="stylesheet" href="http://manukan.diazpetshopkedurus.com/bower_components/Ionicons/css/ionicons.min.css"> <!-- DataTables --> <link rel="stylesheet" href="http://manukan.diazpetshopkedurus.com/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css"> <!-- Morris chart --> <link rel="stylesheet" href="http://manukan.diazpetshopkedurus.com/bower_components/morris.js/morris.css"> <!-- Date Picker --> <link rel="stylesheet" href="http://manukan.diazpetshopkedurus.com/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css"> <!-- Daterange picker --> <link rel="stylesheet" href="http://manukan.diazpetshopkedurus.com/bower_components/bootstrap-daterangepicker/daterangepicker.css"> <!-- Google Font --> <link rel="stylesheet" href="http://manukan.diazpetshopkedurus.com/fonts/font.css"> <!-- Toastr --> <link rel="stylesheet" href="http://manukan.diazpetshopkedurus.com/plugins/toastr/toastr.css"> <!-- Theme style --> <link rel="stylesheet" href="http://manukan.diazpetshopkedurus.com/dist/css/AdminLTE.min.css"> <!-- Red skin --> <link rel="stylesheet" href="http://manukan.diazpetshopkedurus.com/dist/css/skins/skin-blue.css"> <!-- Custom CSS --> <link rel="stylesheet" href="http://manukan.diazpetshopkedurus.com/css/custom.css"> </head> <body class="hold-transition skin-blue sidebar-mini"> <div class="wrapper"> <header class="main-header"> <a href="http://manukan.diazpetshopkedurus.com/admin/dashboard" class="logo"> <span class="logo-lg"> <b> Admin </b> Panel </span> </a> <nav class="navbar navbar-static-top" role="navigation"> <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button"> <span class="sr-only"> Toggle navigation </span> </a> <div class="navbar-custom-menu"> <ul class="nav navbar-nav"> <li class="dropdown user user-menu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Admin - <b>Cabang:</b> RAISSA PETSHO </a> <ul class="dropdown-menu"> <li class="user-header"> <p> Admin <small> Admin </small> </p> </li> <li class="user-footer"> <div class="pull-left"> </div> <div class="pull-right"> <form action="http://manukan.diazpetshopkedurus.com/admin/logout" method="post"> <input type="hidden" name="_token" value="lx38KN2khdKCtzqkSn9sRLW5837QuDYavjfUC99h"> <button type="submit" class="btn btn-default btn-flat"> Keluar </button> </form> </div> </li> </ul> </li> </ul> </div> </nav> </header> <!-- Left side column. contains the logo and sidebar --> <aside class="main-sidebar"> <!-- sidebar: style can be found in sidebar.less --> <section class="sidebar"> <!-- Sidebar user panel --> <div class="user-panel"> <div class="pull-left info"> <p>Admin dyah</p> <a href="#"><i class="fa fa-circle text-success"></i> Online</a> </div> </div> <!-- sidebar menu: : style can be found in sidebar.less --> <ul class="sidebar-menu" data-widget="tree"> <li class="header">NAVIGASI UTAMA</li> <li class="active"> <a href="http://manukan.diazpetshopkedurus.com/admin/dashboard"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a> </li> <li class="treeview "> <a href=""> <i class="fa fa-briefcase"></i> <span>Data Master</span> <i class="fa fa-angle-left pull-right"></i> </a> <ul class="treeview-menu"> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/supplier"> <i class="fa fa-circle-o"></i> Supplier </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/customer"> <i class="fa fa-circle-o"></i> Customer </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/cabang"> <i class="fa fa-circle-o"></i> Cabang </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/pembayaran"> <i class="fa fa-circle-o"></i> Jenis Pembayaran </a> </li> </ul> </li> <li class="treeview "> <a href=""> <i class="fa fa-dropbox"></i> <span>Data Barang</span> <i class="fa fa-angle-left pull-right"></i> </a> <ul class="treeview-menu"> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/kategori"> <i class="fa fa-circle-o"></i> Kategori </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/merk"> <i class="fa fa-circle-o"></i> Merk </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/barang"> <i class="fa fa-circle-o"></i> Barang </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/barang/harga-stok"> <i class="fa fa-circle-o"></i> Harga dan Stok </a> </li> </ul> </li> <li class="treeview "> <a href=""> <i class="fa fa-apple"></i> <span>Logistik</span> <i class="fa fa-angle-left pull-right"></i> </a> <ul class="treeview-menu"> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/gudang"> <i class="fa fa-circle-o"></i> Gudang </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/pengirim"> <i class="fa fa-circle-o"></i> Pengirim </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/penyesuaian"> <i class="fa fa-circle-o"></i> Penyesuaian </a> </li> </ul> </li> <li class="treeview "> <a href=""> <i class="fa fa-dollar"></i> <span>Penjualan</span> <i class="fa fa-angle-left pull-right"></i> </a> <ul class="treeview-menu"> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/penjualan"> <i class="fa fa-circle-o"></i> Penjualan </a> </li> </ul> </li> <li class="treeview "> <a href=""> <i class="fa fa-dollar"></i> <span>Pembelian</span> <i class="fa fa-angle-left pull-right"></i> </a> <ul class="treeview-menu"> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/pembelian"> <i class="fa fa-circle-o"></i> Pembelian </a> </li> </ul> </li> <li class="treeview "> <a href=""> <i class="fa fa-file-text-o"></i> <span>Laporan</span> <i class="fa fa-angle-left pull-right"></i> </a> <ul class="treeview-menu"> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/laporan-penjualan"> <i class="fa fa-circle-o"></i> Penjualan </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/laporan-detail-penjualan"> <i class="fa fa-circle-o"></i> Detail Penjualan </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/laporan-pembelian"> <i class="fa fa-circle-o"></i> Pembelian </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/laporan-detail-pembelian"> <i class="fa fa-circle-o"></i> Detail Pembelian </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/laporan-cashflow"> <i class="fa fa-circle-o"></i> Cashflow </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/laporan-hutang"> <i class="fa fa-circle-o"></i> Hutang </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/laporan-piutang"> <i class="fa fa-circle-o"></i> Piutang </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/laporan-pembayaran"> <i class="fa fa-circle-o"></i> Pembayaran </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/laporan-pegawai"> <i class="fa fa-circle-o"></i> Pegawai </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/laporan-customer"> <i class="fa fa-circle-o"></i> Customer </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/laporan-kategori"> <i class="fa fa-circle-o"></i> Kategori </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/laporan-barang"> <i class="fa fa-circle-o"></i> Barang </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/laporan-stok"> <i class="fa fa-circle-o"></i> Stok </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/laporan-stok-detail"> <i class="fa fa-circle-o"></i> Stok Detail </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/laporan-tarikan-barang"> <i class="fa fa-circle-o"></i> Tarikan Barang </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/laporan-status-stok"> <i class="fa fa-circle-o"></i> Status Stok </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/laporan-harga"> <i class="fa fa-circle-o"></i> Harga Barang </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/laporan-barang-masuk"> <i class="fa fa-circle-o"></i> Barang Masuk </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/laporan-transfer-gudang"> <i class="fa fa-circle-o"></i> Transfer Gudang </a> </li> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/laporan-fast-dead-moving"> <i class="fa fa-circle-o"></i> Fast Dead Moving </a> </li> </ul> </li> <li class="treeview "> <a href=""> <i class="fa fa-bank"></i> <span>Accounting</span> <i class="fa fa-angle-left pull-right"></i> </a> <ul class="treeview-menu"> <li > <a href="http://manukan.diazpetshopkedurus.com/admin/bukti-bayar"> <i class="fa fa-circle-o"></i> Bukti Bayar </a> </li> </ul> </li> </ul> </section> <!-- /.sidebar --> </aside> <!-- Content Wrapper. Contains page content --> <div class="content-wrapper"> <!-- Content Header (Page header) --> <section class="content-header"> <h1> Dashboard </h1> <ol class="breadcrumb"> <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> <li class="active">Dashboard</li> </ol> </section> <!-- Main content --> <section class="content"> </section> <!-- /.content --> </div> <!-- /.content-wrapper --> <footer class="main-footer"> <div class="pull-right hidden-xs"> <b>Version</b> 4.1.1 </div> <strong>Copyright © 2021 <a href="https://technityindonesia.com">Technity Indonesia</a>.</strong> All rights reserved. </footer> </div> <!-- ./wrapper --> <!-- jQuery 3 --> <script src="http://manukan.diazpetshopkedurus.com/bower_components/jquery/dist/jquery.min.js"></script> <!-- jQuery Overlay --> <script src="http://manukan.diazpetshopkedurus.com/plugins/jquery-overlay/loadingoverlay.min.js"></script> <!-- jQuery UI 1.11.4 --> <script src="http://manukan.diazpetshopkedurus.com/bower_components/jquery-ui/jquery-ui.min.js"></script> <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip --> <script> $.widget.bridge('uibutton', $.ui.button); </script> <!-- Bootstrap 3.3.7 --> <script src="http://manukan.diazpetshopkedurus.com/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <!-- DataTables --> <script src="http://manukan.diazpetshopkedurus.com/bower_components/datatables.net/js/jquery.dataTables.min.js"></script> <script src="http://manukan.diazpetshopkedurus.com/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script> <!-- Morris.js charts --> <script src="http://manukan.diazpetshopkedurus.com/bower_components/raphael/raphael.min.js"></script> <script src="http://manukan.diazpetshopkedurus.com/bower_components/morris.js/morris.min.js"></script> <!-- jQuery Knob Chart --> <script src="http://manukan.diazpetshopkedurus.com/bower_components/jquery-knob/dist/jquery.knob.min.js"></script> <!-- daterangepicker --> <script src="http://manukan.diazpetshopkedurus.com/bower_components/moment/min/moment.min.js"></script> <script src="http://manukan.diazpetshopkedurus.com/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script> <!-- datepicker --> <script src="http://manukan.diazpetshopkedurus.com/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script> <!-- FastClick --> <script src="http://manukan.diazpetshopkedurus.com/bower_components/fastclick/lib/fastclick.js"></script> <!-- Toastr --> <script src="http://manukan.diazpetshopkedurus.com/plugins/toastr/toastr.js"></script> <!-- AdminLTE App --> <script src="http://manukan.diazpetshopkedurus.com/dist/js/adminlte.min.js"></script> <script src="http://manukan.diazpetshopkedurus.com/js/formatUang.js"></script> <script src="http://manukan.diazpetshopkedurus.com/js/keyPressuang.js"></script> <script type="text/javascript"> var base_route = "http://manukan.diazpetshopkedurus.com/admin"; var _token = $('[name="csrf-token"]').attr('content'); $(function () { var table = $('.datatable').DataTable({ 'orderCellsTop': true, 'destroy': true, "language": { "lengthMenu": 'Display <select class="form-control">'+ '<option value="25">25</option>'+ '<option value="50" selected>50</option>'+ '<option value="100">100</option>'+ '</select> records' }, "pageLength" : 50, }); // Apply the search $('.datatable thead input').on('keyup', function (e) { if (e.keyCode == 13) { $('.datatable thead input').each(function () { table.column($(this).parent().index()).search($(this).val()).draw(); }); } }); $('.datatable thead select').on('change', function (e) { var val = $.fn.dataTable.util.escapeRegex($(this).val()); $('.datatable thead select').each(function () { table.column($(this).parent().index()).search(val ? '^' + val + '$' : '', true, false).draw(); }); }); $('.daterange').daterangepicker({ locale: { format: 'DD/MM/YYYY' } }); $('.see-password').mousedown(function () { $(this).find('#see-password-icon').removeClass('fa-eye-slash').addClass('fa-eye'); var password_element = $(this).siblings('input.password'); password_element.attr('type', 'text'); }); $('.see-password').mouseup(function () { $(this).find('#see-password-icon').removeClass('fa-eye').addClass('fa-eye-slash'); var password_element = $(this).siblings('input.password'); password_element.attr('type', 'password'); }); $(document).ajaxStart(function () { $.LoadingOverlay('show'); $(document.body).css({'cursor': 'wait'}); }); $(document).ajaxStop(function () { $.LoadingOverlay('hide'); $(document.body).css({'cursor': 'default'}); }); }); </script> </body> </html>

Related: See More

Paper Dashboard 2

Questions / Comments: