diff --git a/CS/SPK.html b/CS/SPK.html
new file mode 100644
index 0000000..d9feb6d
--- /dev/null
+++ b/CS/SPK.html
@@ -0,0 +1,305 @@
+<!DOCTYPE html>
+<!-- 
+Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 4
+Author: KeenThemes
+Website: http://www.keenthemes.com/
+Contact: support@keenthemes.com
+Follow: www.twitter.com/keenthemes
+Dribbble: www.dribbble.com/keenthemes
+Like: www.facebook.com/keenthemes
+Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
+Renew Support: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
+License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
+-->
+<html lang="en" >
+<!-- begin::Head -->
+<head>
+	<meta charset="utf-8" />
+	<title>
+		SPK
+	</title>
+	<meta name="description" content="Latest updates and statistic charts">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<!--begin::Web font -->
+	<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
+	<script>
+		WebFont.load({
+			google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
+			active: function() {
+				sessionStorage.fonts = true;
+			}
+		});
+	</script>
+	<!--end::Web font -->
+	<!--begin::Base Styles -->  
+	<!--begin::Page Vendors -->
+	<link href="../assets/vendors/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
+	<!--end::Page Vendors -->
+	<link href="../assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
+	<link href="../assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
+	<!-- begin:: Style tambahan -->
+	<link href="../assets/demo/default/base/pelangi-style.css" rel="stylesheet" type="text/css">
+	<!-- <link href="../assets/demo/default/base/card-a5.css" rel="stylesheet" type="text/css" -->
+	<!-- end:: Style tambahan -->
+	<!--end::Base Styles -->
+	<link rel="shortcut icon" href="../assets/demo/default/media/img/logo/favicon.ico" />
+	<style>
+		@media print {
+
+			.table {
+				min-height : 275px !important;
+			}
+
+			th {
+				font-size: 1.7rem !important;
+			}
+
+			td {
+				font-size: 1.7rem !important;
+			}
+
+			p {
+				font-size: 1.8rem !important;
+			}
+			label {
+				font-size: 1.6rem !important;
+			}
+			input {
+				font-size: 1.6rem !important;
+			}
+			h3 {
+				font-size: 2rem !important;
+			}
+
+			.font-print {
+				font-size: 1.8rem !important;
+			}
+
+			.m-portlet .m-portlet__body {
+				padding: 2.2rem 2.2rem;
+			}
+
+			.informasinya {
+				padding-bottom: .1rem !important;
+			}
+
+			.col-form-label {
+				padding-top : 0px !important;
+				padding-bottom: 0px !important;
+			}
+
+			.m-datatable__table {
+				min-height: 0 !important;
+			}
+		}
+
+
+	</style>
+</head>
+<!-- end::Head -->
+<!-- end::Body -->
+<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
+	<div class="m-content">
+		<div class="face face-front">
+			<div class="row">
+				<div class="col-xl-12">
+					<div class="m-portlet m-portlet--tab">
+						<div class="m-portlet__head header">
+							<h3 class="header-pesanan"> 
+								<!-- Invoice  -->
+								<img style="height:auto;width:250px" src="..\assets\demo\default\media\img\logo\spk_logo.png">
+								
+							</h3><br>
+							<h3 name="no_pesanan" class="header-pesanan-no"> 
+								#123456789 
+							</h3><br><br>
+							<div class="info">
+								<p name="nama_pelanggan" id="namaPelanggan"><i class="flaticon-users"> </i> Ahmad Rifaldi</p> 
+								<p name="no_telpon" id="noTelpon"><i class="fa fa-phone"> </i> 085-145-322-137</p> 
+								<p name="alamat" id="alamat"><i class="flaticon-placeholder-1"> </i> Jl. Poros Malino, Griya Riski Abadi blok C6</p>
+							</div>	
+						</div>
+						<div class="m-portlet__body informasinya">
+							<div class="form-group m-form__group row">
+								<label for="example-text-input" class="col-3 col-form-label">
+									Tipe Pesanan
+								</label>
+								<div class="col-4">
+									<span class="font-print" id="tipe_pesanan"> Express </span>
+								</div>
+							</div> 
+							<div class="form-group m-form__group row">
+								<label for="example-text-input" class="col-3 col-form-label">
+									catatan 
+								</label>
+								<div class="col-4">
+									<span class="font-print" id="catatan_pesanan"> - </span>
+								</div>
+							</div>
+							<div class="form-group m-form__group row">
+								<label for="example-text-input" class="col-3 col-form-label">
+									Tanggal Pesanan 
+								</label>
+								<div class="col-4">
+									<span class="font-print" id="tanggal_pesanan"> 20/11/19 </span>
+								</div>
+							</div>
+							<div class="form-group m-form__group row">
+								<label for="example-text-input" class="col-3 col-form-label">
+									Waktu Selesai 
+								</label>
+								<div class="col-4">
+									<span class="font-print" id="tanggal_pesanan_selesai"> 22/11/19 </span>
+								</div>
+							</div>
+							<div class="form-group m-form__group row">
+								<label for="example-text-input" class="col-3 col-form-label">
+									Tipe Pemabayaran
+								</label>
+								<div class="col-4">
+									<span class="font-print" id="tipe_pembayaran"> Transfer </span>
+								</div>
+							</div>
+							<div class="form-group m-form__group row">
+								<label for="example-text-input" class="col-3 col-form-label">
+									Order Status
+								</label>
+								<div class="col-4">
+									<span class="font-print" id="tipe_pembayaran"> Lunas </span>
+								</div>
+							</div>
+						</div>
+						<!--begin::Form-->
+						<form class="m-form m-form--fit m-form--label-align-right">
+							<div class="m-portlet m-portlet--mobile">
+								<div class="m-portlet__body tablenya">
+									<!--begin: Datatable -->
+									<!-- <div class="m_datatable" id="local_data"></div> -->
+									<table class="table" id="tbl_invoice">
+										<thead>
+											<tr>
+												<th>No</th>
+												<th>Produk</th>
+												<th>Ukuran</th>
+												<th>Finishing</th>
+												<th>Jumlah</th>
+											</tr>
+										</thead>
+										<tbody>
+											<tr>
+												<td>1</td>
+												<td>Spanduk</td>
+												<td>160 x 60 cm</td>
+												<td>Cincin</td>
+												<td>320</td>
+											</tr>
+										</tbody>
+									</table>
+									<div class="m-datatable__pager m-datatable--paging-loaded clearfix">
+										<div class="form-group m-form__group row">
+											<label class="col-2">
+												<b>CS Menangani :</b>
+											</label>
+											<div class="col-4">
+												<p id="nama_cs_menangani">Ahmad Rifaldi</p>
+											</div>
+										</div>
+										<div class="form-group m-form__group row">
+											<label class="col-2">
+												<b>Designer :</b>
+											</label>
+											<div class="col-4">
+												<p id="nama_designer">Surya Aditama</p>
+											</div>
+										</div>
+										<div class="form-group m-form__group row">
+											<label class="col-2">
+												<b>Produksi :</b>
+											</label>
+											<div class="col-4">
+												<p id="nama_produksi">-</p>
+											</div>
+										</div>
+										<div class="form-group m-form__group row">
+											<label class="col-2">
+												<b>CS Pelunasan :</b>
+											</label>
+											<div class="col-4">
+												<p id="nama_cs_pelunasan">-</p>
+											</div>
+										</div>
+									</div>
+									<!--end: Datatable -->
+								</div>
+							</div>
+						</form>
+					</div>
+				</div>	
+			</div>
+		</div>
+	</div>
+</body>
+<!-- end::Body -->
+<script src="../assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
+<script src="../assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
+<script src="../assets/app/js/dashboard.js" type="text/javascript"></script>
+<script type="text/javascript">
+	var tbl_invoice = $('#tbl_invoice').mDatatable({
+		data: {
+			saveState: {cookie: false},
+		},
+			// layout definition
+			layout: {
+				theme: 'default', // datatable theme
+				class: '', // custom wrapper class
+				scroll: false, // enable/disable datatable scroll both horizontal and vertical when needed.
+				/*max-height: 200,*/ // datatable's body's fixed height
+				footer: false, // display/hide footer
+
+			},
+
+			// column sorting
+			sortable: false,
+			pagination: false,
+			search: {
+				input: $('#generalSearch'),
+			},
+			columns: [
+
+			{
+				field: 'No',
+				textAlign: 'center',
+				width : 50 
+			},
+			{
+				field: 'Produk',
+				textAlign: 'center',
+				width :130
+			},
+			{
+				field: 'Ukuran',
+				textAlign: 'center',
+				width:140
+			},
+			{
+				field: 'Finishing',
+				textAlign: 'center',
+
+			},
+			{
+				field: 'Jumlah',
+				textAlign: 'center',
+				width : 100
+
+			},
+			{
+				field: 'Harga',
+				textAlign: 'center',
+
+			}
+
+			],
+		});
+	</script>
+	</html>
diff --git a/CS/components/base/pesanan_belum_lunas_detail.html b/CS/components/base/pesanan_belum_lunas_detail.html
index a91a399..94e1efd 100644
--- a/CS/components/base/pesanan_belum_lunas_detail.html
+++ b/CS/components/base/pesanan_belum_lunas_detail.html
@@ -335,7 +335,7 @@ <h3 name="no_pesanan" class="header-pesanan-no">
 											</div>
 											<div class="form-group m-form__group row">
 												<label for="example-text-input" class="col-2 col-form-label">
-													Tanggal Selesai
+													Waktu Selesai
 												</label>
 												<div class="col-4">
 													<input name="tanggal_pesanan_selesai" class="form-control m-input" type="text" value="21-11-2018" id="example-text-input" disabled="true">
diff --git a/CS/components/base/pesanan_lunas_detail.html b/CS/components/base/pesanan_lunas_detail.html
index dcc25c8..34b8199 100644
--- a/CS/components/base/pesanan_lunas_detail.html
+++ b/CS/components/base/pesanan_lunas_detail.html
@@ -331,6 +331,22 @@ <h3 name="no_pesanan" class="header-pesanan-no">
 													<input name="tanggal_pesanan" class="form-control m-input" type="text" value="20-11-2018" id="example-text-input" disabled="true">
 												</div>
 											</div>
+											<div class="form-group m-form__group row">
+												<label for="example-text-input" class="col-2 col-form-label">
+													Waktu Selesai
+												</label>
+												<div class="col-4">
+													<input name="tanggal_pesanan_selesai" class="form-control m-input" type="text" value="21-11-2018" id="example-text-input" disabled="true">
+												</div>
+											</div>
+											<div class="form-group m-form__group row">
+												<label for="example-text-input" class="col-2 col-form-label">
+													Tipe Pembayaran
+												</label>
+												<div class="col-4">
+													<input name="tipe_pembayaran" class="form-control m-input" type="text" value="Transfer" id="example-text-input" disabled="true">
+												</div>
+											</div>
 										    <div class="form-group m-form__group row">
 												<label for="example-text-input" class="col-2 col-form-label">
 													Order Status : 
diff --git a/CS/components/base/pesanan_saya_detail.html b/CS/components/base/pesanan_saya_detail.html
index 0e09f41..42716d5 100644
--- a/CS/components/base/pesanan_saya_detail.html
+++ b/CS/components/base/pesanan_saya_detail.html
@@ -335,6 +335,22 @@ <h3 name="no_pesanan" class="header-pesanan-no">
 													<input name="tanggal_pesanan" class="form-control m-input" type="text" value="20-11-2018" id="example-text-input" disabled="true">
 												</div>
 											</div>
+											<div class="form-group m-form__group row">
+												<label for="example-text-input" class="col-2 col-form-label">
+													Waktu Selesai
+												</label>
+												<div class="col-4">
+													<input name="tanggal_pesanan_selesai" class="form-control m-input" type="text" value="21-11-2018" id="example-text-input" disabled="true">
+												</div>
+											</div>
+											<div class="form-group m-form__group row">
+												<label for="example-text-input" class="col-2 col-form-label">
+													Tipe Pembayaran
+												</label>
+												<div class="col-4">
+													<input name="tipe_pembayaran" class="form-control m-input" type="text" value="Transfer" id="example-text-input" disabled="true">
+												</div>
+											</div>
 										    <div class="form-group m-form__group row">
 												<label for="example-text-input" class="col-2 col-form-label">
 													Order Status : 
diff --git a/CS/components/base/spk_detail.html b/CS/components/base/spk_detail.html
index 7976c80..97d6cdc 100644
--- a/CS/components/base/spk_detail.html
+++ b/CS/components/base/spk_detail.html
@@ -322,6 +322,14 @@ <h3 class="header-pesanan-no">
 													<input name="tanggal_pesanan" class="form-control m-input" type="text" value="20-11-2018" disabled="true">
 												</div>
 											</div>
+											<div class="form-group m-form__group row">
+												<label for="example-text-input" class="col-2 col-form-label">
+													Waktu Selesai
+												</label>
+												<div class="col-4">
+													<input name="tanggal_pesanan_selesai" class="form-control m-input" type="text" value="21-11-2018" id="example-text-input" disabled="true">
+												</div>
+											</div>
 											<div class="form-group m-form__group row">
 												<label for="example-text-input" class="col-2 col-form-label">
 													Order Status : 
diff --git a/CS/index.html b/CS/index.html
index 99e3d7a..418beea 100644
--- a/CS/index.html
+++ b/CS/index.html
@@ -12,686 +12,686 @@
 License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
 -->
 <html lang="en" >
-	<!-- begin::Head -->
-	<head>
-		<meta charset="utf-8" />
-		<title>
-			CS | Dashboard
-		</title>
-		<meta name="description" content="Latest updates and statistic charts">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-		<!--begin::Web font -->
-		<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
-		<script>
-          WebFont.load({
-            google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
-            active: function() {
-                sessionStorage.fonts = true;
-            }
-          });
-		</script>
-		<script src="utils.js"></script>
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>
-		<!--end::Web font -->
-        <!--begin::Base Styles -->  
-        <!--begin::Page Vendors -->
-		<link href="../assets/vendors/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
-		<!--end::Page Vendors -->
-		<link href="../assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
-		<link href="../assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
-		<!-- begin:: Style tambahan -->
-		<link href="../assets/demo/default/base/pelangi-style.css" rel="stylesheet" type="text/css">
-		<!-- end:: Style tambahan -->
-		<!--end::Base Styles -->
-		<link rel="shortcut icon" href="../assets/demo/default/media/img/logo/favicon.ico" />
-		<style type="text/css">
-			.alert {
-				padding: 0.4rem 1.5rem !important;
-				width: 70%
+<!-- begin::Head -->
+<head>
+	<meta charset="utf-8" />
+	<title>
+		CS | Dashboard
+	</title>
+	<meta name="description" content="Latest updates and statistic charts">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<!--begin::Web font -->
+	<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
+	<script>
+		WebFont.load({
+			google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
+			active: function() {
+				sessionStorage.fonts = true;
 			}
-			@media (min-width: 992px) {
-				.modal-lg {
-					max-width: 90% !important;
-				}
+		});
+	</script>
+	<script src="utils.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>
+	<!--end::Web font -->
+	<!--begin::Base Styles -->  
+	<!--begin::Page Vendors -->
+	<link href="../assets/vendors/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
+	<!--end::Page Vendors -->
+	<link href="../assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
+	<link href="../assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
+	<!-- begin:: Style tambahan -->
+	<link href="../assets/demo/default/base/pelangi-style.css" rel="stylesheet" type="text/css">
+	<!-- end:: Style tambahan -->
+	<!--end::Base Styles -->
+	<link rel="shortcut icon" href="../assets/demo/default/media/img/logo/favicon.ico" />
+	<style type="text/css">
+		.alert {
+			padding: 0.4rem 1.5rem !important;
+			width: 70%
+		}
+		@media (min-width: 992px) {
+			.modal-lg {
+				max-width: 90% !important;
 			}
-		</style>
-	</head>
-	<!-- end::Head -->
-    <!-- end::Body -->
-	<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
-		<!-- begin:: Page -->
-		<div class="m-grid m-grid--hor m-grid--root m-page">
-			<!-- BEGIN: Header -->
-			<header class="m-grid__item    m-header "  data-minimize-offset="200" data-minimize-mobile-offset="200" >
-				<div class="m-container m-container--fluid m-container--full-height">
-					<div class="m-stack m-stack--ver m-stack--desktop">
-						<!-- BEGIN: Brand -->
-						<div class="m-stack__item m-brand  m-brand--skin-dark ">
-							<div class="m-stack m-stack--ver m-stack--general">
-								<div class="m-stack__item m-stack__item--middle m-brand__logo">
-									<a href="index.html" class="m-brand__logo-wrapper">
-										<img alt="" src="../assets/demo/default/media/img/logo/logo_default_dark.png"/>
-									</a>
-								</div>
-								<div class="m-stack__item m-stack__item--middle m-brand__tools">
-									<!-- BEGIN: Left Aside Minimize Toggle -->
-									<a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block">
-										<span></span>
-									</a>
-									<!-- END -->
-							<!-- BEGIN: Responsive Aside Left Menu Toggler -->
-									<a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block">
-										<span></span>
-									</a>
-									<!-- END -->
-							<!-- BEGIN: Responsive Header Menu Toggler -->
-									<a id="m_aside_header_menu_mobile_toggle" href="javascript:;" class="m-brand__icon m-brand__toggler m--visible-tablet-and-mobile-inline-block">
-										<span></span>
-									</a>
-									<!-- END -->
-							<!-- BEGIN: Topbar Toggler -->
-									<a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block">
-										<i class="flaticon-more"></i>
-									</a>
-									<!-- BEGIN: Topbar Toggler -->
-								</div>
+		}
+	</style>
+</head>
+<!-- end::Head -->
+<!-- end::Body -->
+<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
+	<!-- begin:: Page -->
+	<div class="m-grid m-grid--hor m-grid--root m-page">
+		<!-- BEGIN: Header -->
+		<header class="m-grid__item    m-header "  data-minimize-offset="200" data-minimize-mobile-offset="200" >
+			<div class="m-container m-container--fluid m-container--full-height">
+				<div class="m-stack m-stack--ver m-stack--desktop">
+					<!-- BEGIN: Brand -->
+					<div class="m-stack__item m-brand  m-brand--skin-dark ">
+						<div class="m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-stack__item--middle m-brand__logo">
+								<a href="index.html" class="m-brand__logo-wrapper">
+									<img alt="" src="../assets/demo/default/media/img/logo/logo_default_dark.png"/>
+								</a>
 							</div>
-						</div>
-						<!-- END: Brand -->
-						<div class="m-stack__item m-stack__item--fluid m-header-head" id="m_header_nav">
-							<!-- BEGIN: Horizontal Menu -->
-							<div id="m_header_menu" class="m-header-menu m-aside-header-menu-mobile m-aside-header-menu-mobile--offcanvas  m-header-menu--skin-light m-header-menu--submenu-skin-light m-aside-header-menu-mobile--skin-dark m-aside-header-menu-mobile--submenu-skin-dark "  >
-								<img style="display: inline; float: left; height: inherit; width: auto" src="../assets/demo/default/media/img/misc/customer_service.png">
+							<div class="m-stack__item m-stack__item--middle m-brand__tools">
+								<!-- BEGIN: Left Aside Minimize Toggle -->
+								<a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block">
+									<span></span>
+								</a>
+								<!-- END -->
+								<!-- BEGIN: Responsive Aside Left Menu Toggler -->
+								<a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block">
+									<span></span>
+								</a>
+								<!-- END -->
+								<!-- BEGIN: Responsive Header Menu Toggler -->
+								<a id="m_aside_header_menu_mobile_toggle" href="javascript:;" class="m-brand__icon m-brand__toggler m--visible-tablet-and-mobile-inline-block">
+									<span></span>
+								</a>
+								<!-- END -->
+								<!-- BEGIN: Topbar Toggler -->
+								<a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block">
+									<i class="flaticon-more"></i>
+								</a>
+								<!-- BEGIN: Topbar Toggler -->
 							</div>
-							<!-- END: Horizontal Menu -->								
-							<!-- BEGIN: Topbar -->
-							<div id="m_header_topbar" class="m-topbar  m-stack m-stack--ver m-stack--general">
-								<div class="m-stack__item m-topbar__nav-wrapper inline">
-									<ul class="m-topbar__nav m-nav m-nav--inline">
-										<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
-											<div class="user_wrapper">
-												<p style="margin-bottom: 0px"><i class="fa fa-user"> </i> Ahmad Rifaldi</p>
-											</div>
-										</li>
-										<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
-											<div class="logout_wrapper">
-												<a margin-right: 10px;" href="snippets/pages/user/login-1.html" class="btn m-btn--pill    btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder">
-													Logout
-												</a>
-											</div>
-										</li>
-									</ul>
-								</div>
+						</div>
+					</div>
+					<!-- END: Brand -->
+					<div class="m-stack__item m-stack__item--fluid m-header-head" id="m_header_nav">
+						<!-- BEGIN: Horizontal Menu -->
+						<div id="m_header_menu" class="m-header-menu m-aside-header-menu-mobile m-aside-header-menu-mobile--offcanvas  m-header-menu--skin-light m-header-menu--submenu-skin-light m-aside-header-menu-mobile--skin-dark m-aside-header-menu-mobile--submenu-skin-dark "  >
+							<img style="display: inline; float: left; height: inherit; width: auto" src="../assets/demo/default/media/img/misc/customer_service.png">
+						</div>
+						<!-- END: Horizontal Menu -->								
+						<!-- BEGIN: Topbar -->
+						<div id="m_header_topbar" class="m-topbar  m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-topbar__nav-wrapper inline">
+								<ul class="m-topbar__nav m-nav m-nav--inline">
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="user_wrapper">
+											<p style="margin-bottom: 0px"><i class="fa fa-user"> </i> Ahmad Rifaldi</p>
+										</div>
+									</li>
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="logout_wrapper">
+											<a margin-right: 10px;" href="snippets/pages/user/login-1.html" class="btn m-btn--pill    btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder">
+												Logout
+											</a>
+										</div>
+									</li>
+								</ul>
 							</div>
-							<!-- END: Topbar -->
 						</div>
+						<!-- END: Topbar -->
 					</div>
 				</div>
-			</header>
-			<!-- END: Header -->		
-			<!-- begin::Body -->
-			<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
-				<!-- BEGIN: Left Aside -->
-				<button class="m-aside-left-close  m-aside-left-close--skin-dark " id="m_aside_left_close_btn">
-					<i class="la la-close"></i>
-				</button>
-				<div id="m_aside_left" class="m-grid__item	m-aside-left  m-aside-left--skin-dark ">
-					<!-- BEGIN: Aside Menu -->
-					<div id="m_ver_menu" class="m-aside-menu  m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark" data-menu-vertical="true" data-menu-scrollable="false" data-menu-dropdown-timeout="500" >
-						<ul class="m-menu__nav  m-menu__nav--dropdown-submenu-arrow ">
-							<!-- DASHBOARD -->
-							<li class="m-menu__item  m-menu__item--active" aria-haspopup="true" >
-								<a  href="index.html" class="m-menu__link ">
-									<i class="m-menu__link-icon flaticon-line-graph"></i>
-									<span class="m-menu__link-title">
-										<span class="m-menu__link-wrap">
+			</div>
+		</header>
+		<!-- END: Header -->		
+		<!-- begin::Body -->
+		<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
+			<!-- BEGIN: Left Aside -->
+			<button class="m-aside-left-close  m-aside-left-close--skin-dark " id="m_aside_left_close_btn">
+				<i class="la la-close"></i>
+			</button>
+			<div id="m_aside_left" class="m-grid__item	m-aside-left  m-aside-left--skin-dark ">
+				<!-- BEGIN: Aside Menu -->
+				<div id="m_ver_menu" class="m-aside-menu  m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark" data-menu-vertical="true" data-menu-scrollable="false" data-menu-dropdown-timeout="500" >
+					<ul class="m-menu__nav  m-menu__nav--dropdown-submenu-arrow ">
+						<!-- DASHBOARD -->
+						<li class="m-menu__item  m-menu__item--active" aria-haspopup="true" >
+							<a  href="index.html" class="m-menu__link ">
+								<i class="m-menu__link-icon flaticon-line-graph"></i>
+								<span class="m-menu__link-title">
+									<span class="m-menu__link-wrap">
+										<span class="m-menu__link-text">
+											Dashboard
+										</span>
+									</span>
+								</span>
+							</a>
+						</li>
+						<!-- PESANAN -->
+						<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="#" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon flaticon-graphic-2"></i>
+								<span class="m-menu__link-text">
+									Pesanan
+								</span>
+								<i style="font-size: 1.5rem" class="m-menu__ver-arrow fa fa-caret-right"></i>
+							</a>
+							<div class="m-menu__submenu " style="">
+								<span class="m-menu__arrow"></span>
+								<ul class="m-menu__subnav">
+									<li class="m-menu__item  m-menu__item--parent" aria-haspopup="true">
+										<span class="m-menu__link">
 											<span class="m-menu__link-text">
-												Dashboard
+												Pesanan
 											</span>
 										</span>
-									</span>
-								</a>
-							</li>
-							<!-- PESANAN -->
-							<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="#" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon flaticon-graphic-2"></i>
-									<span class="m-menu__link-text">
-										Pesanan
-									</span>
-									<i style="font-size: 1.5rem" class="m-menu__ver-arrow fa fa-caret-right"></i>
-								</a>
-								<div class="m-menu__submenu " style="">
-									<span class="m-menu__arrow"></span>
-									<ul class="m-menu__subnav">
-										<li class="m-menu__item  m-menu__item--parent" aria-haspopup="true">
-											<span class="m-menu__link">
-												<span class="m-menu__link-text">
-													Pesanan
-												</span>
+									</li>
+									<li class="m-menu__item " aria-haspopup="true">
+										<a href="components/base/pesanan_belum_lunas.html" class="m-menu__link ">
+											<i class="m-menu__link-bullet m-menu__link-bullet--dot">
+												<span></span>
+											</i>
+											<span class="m-menu__link-text">
+												Pesanan Belum Lunas
+											</span>
+										</a>
+									</li>
+									<li class="m-menu__item " aria-haspopup="true">
+										<a href="components/base/pesanan_lunas.html"  class="m-menu__link ">
+											<i class="m-menu__link-bullet m-menu__link-bullet--dot">
+												<span></span>
+											</i>
+											<span class="m-menu__link-text">
+												Pesanan Lunas
+											</span>
+										</a>
+									</li>
+									<li class="m-menu__item " aria-haspopup="true">
+										<a href="components/base/pesanan_ditolak.html"  class="m-menu__link ">
+											<i class="m-menu__link-bullet m-menu__link-bullet--dot">
+												<span></span>
+											</i>
+											<span class="m-menu__link-text">
+												Pesanan Ditolak
+											</span>
+										</a>
+									</li>
+									<li class="m-menu__item " aria-haspopup="true">
+										<a href="components/base/pesanan_saya.html"  class="m-menu__link ">
+											<i class="m-menu__link-bullet m-menu__link-bullet--dot">
+												<span></span>
+											</i>
+											<span class="m-menu__link-text">
+												Pesanan Saya
 											</span>
-										</li>
-										<li class="m-menu__item " aria-haspopup="true">
-											<a href="components/base/pesanan_belum_lunas.html" class="m-menu__link ">
-												<i class="m-menu__link-bullet m-menu__link-bullet--dot">
-													<span></span>
-												</i>
-												<span class="m-menu__link-text">
-													Pesanan Belum Lunas
-												</span>
-											</a>
-										</li>
-										<li class="m-menu__item " aria-haspopup="true">
-											<a href="components/base/pesanan_lunas.html"  class="m-menu__link ">
-												<i class="m-menu__link-bullet m-menu__link-bullet--dot">
-													<span></span>
-												</i>
-												<span class="m-menu__link-text">
-													Pesanan Lunas
-												</span>
-											</a>
-										</li>
-										<li class="m-menu__item " aria-haspopup="true">
-											<a href="components/base/pesanan_ditolak.html"  class="m-menu__link ">
-												<i class="m-menu__link-bullet m-menu__link-bullet--dot">
-													<span></span>
-												</i>
-												<span class="m-menu__link-text">
-													Pesanan Ditolak
-												</span>
-											</a>
-										</li>
-										<li class="m-menu__item " aria-haspopup="true">
-											<a href="components/base/pesanan_saya.html"  class="m-menu__link ">
-												<i class="m-menu__link-bullet m-menu__link-bullet--dot">
-													<span></span>
-												</i>
-												<span class="m-menu__link-text">
-													Pesanan Saya
-												</span>
-											</a>
-										</li>
-									</ul>
-								</div>
-							</li>
-							<!-- List SPK-->
-							<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="components/base/list_spk.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon flaticon-signs"></i>
-									<span class="m-menu__link-text">
-										List SPK
-									</span>
-								</a>	
-							</li>
-	                        <!-- KEHADIRAN -->
-							<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="components/base/kehadiran.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon fa fa-user-o"></i>
-									<span class="m-menu__link-text">
-										Kehadiran
-									</span>
-								</a>
-							</li>
-							<!-- Setting -->
-							<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="components/base/setting.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon fa 	fa-gears"></i>
-									<span class="m-menu__link-text">
-										Pengaturan
-									</span>
-								</a>
-							</li>
-						</ul>
-					</div>
-					<!-- END: Aside Menu -->
-				</div>
-				<!-- END: Left Aside -->
-				<div class="m-grid__item m-grid__item--fluid m-wrapper">
-					<!-- BEGIN: Subheader -->
-					<div class="m-subheader ">
-						<div class="d-flex align-items-center">
-							<div class="mr-auto">
-								<h3 class="m-subheader__title m-subheader__title--separator">
-									Dashboard
-								</h3>
-								<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
-									<li class="m-nav__item m-nav__item--home">
-										<a href="index.html" class="m-nav__link m-nav__link--icon">
-											<i class="m-nav__link-icon la la-home"></i>
 										</a>
 									</li>
 								</ul>
-								<button type="button" name="lihat_inventory" class="btn btn-primary btn-tambahPembelian" data-toggle="modal" data-target="#lihat_inventory">
-									Lihat Inventory
-								</button>	
 							</div>
+						</li>
+						<!-- List SPK-->
+						<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="components/base/list_spk.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon flaticon-signs"></i>
+								<span class="m-menu__link-text">
+									List SPK
+								</span>
+							</a>	
+						</li>
+						<!-- KEHADIRAN -->
+						<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="components/base/kehadiran.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon fa fa-user-o"></i>
+								<span class="m-menu__link-text">
+									Kehadiran
+								</span>
+							</a>
+						</li>
+						<!-- Setting -->
+						<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="components/base/setting.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon fa 	fa-gears"></i>
+								<span class="m-menu__link-text">
+									Pengaturan
+								</span>
+							</a>
+						</li>
+					</ul>
+				</div>
+				<!-- END: Aside Menu -->
+			</div>
+			<!-- END: Left Aside -->
+			<div class="m-grid__item m-grid__item--fluid m-wrapper">
+				<!-- BEGIN: Subheader -->
+				<div class="m-subheader ">
+					<div class="d-flex align-items-center">
+						<div class="mr-auto">
+							<h3 class="m-subheader__title m-subheader__title--separator">
+								Dashboard
+							</h3>
+							<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
+								<li class="m-nav__item m-nav__item--home">
+									<a href="index.html" class="m-nav__link m-nav__link--icon">
+										<i class="m-nav__link-icon la la-home"></i>
+									</a>
+								</li>
+							</ul>
+							<button type="button" name="lihat_inventory" class="btn btn-primary btn-tambahPembelian" data-toggle="modal" data-target="#lihat_inventory">
+								Lihat Inventory
+							</button>	
 						</div>
 					</div>
-					<!-- END: Subheader -->
-					<div class="m-content">
-						<!--Begin::Section-->
-						<div class="row">
-							<div class="col-xl-12">
-								<div class="m-portlet ">
-									<div class="m-portlet__head portlet_head_color">
-										<div class="m-portlet__head-caption">
-											<div class="m-portlet__head-title">
-												<h3 style="color: white" class="m-portlet__head-text col-4">
-													No. Pesanan
-												</h3>
-												<h3 style="color: #E0F2F1" class="m-portlet__head-text col-6">
-													#1234567
-												</h3>
-											</div>
+				</div>
+				<!-- END: Subheader -->
+				<div class="m-content">
+					<!--Begin::Section-->
+					<div class="row">
+						<div class="col-xl-12">
+							<div class="m-portlet ">
+								<div class="m-portlet__head portlet_head_color">
+									<div class="m-portlet__head-caption">
+										<div class="m-portlet__head-title">
+											<h3 style="color: white" class="m-portlet__head-text col-4">
+												No. Pesanan
+											</h3>
+											<h3 style="color: #E0F2F1" class="m-portlet__head-text col-6">
+												#1234567
+											</h3>
 										</div>
 									</div>
 								</div>
 							</div>
-							<div class="col-xl-6">
-								<!--begin::Portlet--> <!-- NOMER PESANAN -->
-								<div class="m-portlet m-portlet--mobile">
-									<!--begin::Form-->
-									<form class="m-form">
-										<div class="m-portlet__body">
-											<div class="m-form__section m-form__section--first">
-												<div class="form-group m-form__group">
-													<label id="sub-header-form">
-														Informasi Pelanggan
-													</label> <br>
-												</div>
-												<div class="form-group m-form__group">
-													<label >
-														 Nomer Telpon :
-													</label>
-													<div >
-														<div class="input-group">
-															<div class="input-group-prepend">
-																<span class="input-group-text">
-																	<i class="la la-phone"></i>
-																</span>
-															</div>
-															<input type="text" name="noTlp_pelanggan" class="form-control m-input" placeholder="" value="085-145-322-xxx">
+						</div>
+						<div class="col-xl-6">
+							<!--begin::Portlet--> <!-- NOMER PESANAN -->
+							<div class="m-portlet m-portlet--mobile">
+								<!--begin::Form-->
+								<form class="m-form">
+									<div class="m-portlet__body">
+										<div class="m-form__section m-form__section--first">
+											<div class="form-group m-form__group">
+												<label id="sub-header-form">
+													Informasi Pelanggan
+												</label> <br>
+											</div>
+											<div class="form-group m-form__group">
+												<label >
+													Nomer Telpon :
+												</label>
+												<div >
+													<div class="input-group">
+														<div class="input-group-prepend">
+															<span class="input-group-text">
+																<i class="la la-phone"></i>
+															</span>
 														</div>
+														<input type="text" name="noTlp_pelanggan" class="form-control m-input" placeholder="" value="085-145-322-xxx">
 													</div>
 												</div>
-												<div class="form-group m-form__group ">
-													<label>
-														 Nama :
-													</label>
-													<div >
-														<div class="input-group">
-															<div class="input-group-prepend">
-																<span class="input-group-text">
-																	<i class="fa fa-user-o"></i>
-																</span>
-															</div>
-															<input type="text" name="nama_pelanggan" class="form-control m-input" value="Ahmad Ridwan">
+											</div>
+											<div class="form-group m-form__group ">
+												<label>
+													Nama :
+												</label>
+												<div >
+													<div class="input-group">
+														<div class="input-group-prepend">
+															<span class="input-group-text">
+																<i class="fa fa-user-o"></i>
+															</span>
 														</div>
+														<input type="text" name="nama_pelanggan" class="form-control m-input" value="Ahmad Ridwan">
 													</div>
 												</div>
-												<div class="form-group m-form__group ">
-													<label>
-														 Alamat:
-													</label>
-													<div >
-														<div class="input-group">
-															<div class="input-group-prepend">
-																<span class="input-group-text">
-																	<i class="flaticon-placeholder"></i>
-																</span>
-															</div>
-															<input type="text" name="alamat_pelanggan" class="form-control m-input" placeholder="" value="Jln. Poros Malino, Griya Riski Abadi Blok C6">
+											</div>
+											<div class="form-group m-form__group ">
+												<label>
+													Alamat:
+												</label>
+												<div >
+													<div class="input-group">
+														<div class="input-group-prepend">
+															<span class="input-group-text">
+																<i class="flaticon-placeholder"></i>
+															</span>
 														</div>
+														<input type="text" name="alamat_pelanggan" class="form-control m-input" placeholder="" value="Jln. Poros Malino, Griya Riski Abadi Blok C6">
 													</div>
 												</div>
-												<div class="form-group m-form__group ">
-													<label>
-														 E-mail:
-													</label>
-													<div >
-														<div class="input-group">
-															<div class="input-group-prepend">
-																<span class="input-group-text">
-																	<i class="fa fa-envelope-o"></i>
-																</span>
-															</div>
-															<input type="email" name="email_kostumer" class="form-control m-input" placeholder="" value="jakirolast@gmail.com">
+											</div>
+											<div class="form-group m-form__group ">
+												<label>
+													E-mail:
+												</label>
+												<div >
+													<div class="input-group">
+														<div class="input-group-prepend">
+															<span class="input-group-text">
+																<i class="fa fa-envelope-o"></i>
+															</span>
 														</div>
+														<input type="email" name="email_kostumer" class="form-control m-input" placeholder="" value="jakirolast@gmail.com">
 													</div>
 												</div>
-												<div class="m-form__group form-group">
-													<label for="">
-														Tipe Pelanggan
+											</div>
+											<div class="m-form__group form-group">
+												<label for="">
+													Tipe Pelanggan
+												</label>
+												<div class="m-radio-inline">
+													<label class="m-radio">
+														<input type="radio" name="tipe_pelanggan" value="perseorangan">
+														Perseorangan
+														<span></span>
+													</label>
+													<label class="m-radio">
+														<input type="radio" name="tipe_pelanggan" value="perusahaan">
+														Perusahaan
+														<span></span>
 													</label>
-													<div class="m-radio-inline">
-														<label class="m-radio">
-															<input type="radio" name="tipe_pelanggan" value="perseorangan">
-															Perseorangan
-															<span></span>
-														</label>
-														<label class="m-radio">
-															<input type="radio" name="tipe_pelanggan" value="perusahaan">
-															Perusahaan
-															<span></span>
-														</label>
-													</div>
 												</div>
 											</div>
 										</div>
-										<div class="m-portlet__foot m-portlet__foot--fit">
-											<div class="m-form__actions m-form__actions">
-												<button type="button" class="btn btn-primary btn-tambahPesanan" data-toggle="modal" data-target="#myModal">
-													Tambah Pesanan
-												</button>
-											</div>
+									</div>
+									<div class="m-portlet__foot m-portlet__foot--fit">
+										<div class="m-form__actions m-form__actions">
+											<button type="button" class="btn btn-primary btn-tambahPesanan" data-toggle="modal" data-target="#myModal">
+												Tambah Pesanan
+											</button>
 										</div>
-									</form>
-									<!--end::Form-->
-								</div>
-								<!--end::Portlet-->
+									</div>
+								</form>
+								<!--end::Form-->
 							</div>
-							<div class="col-xl-6">
-								<div class="m-portlet m-portlet--mobile">
-									<div class="m-portlet__head">
-										<div class="m-portlet__head-caption">
-											<div class="m-portlet__head-title">
-												<h3 class="m-portlet__head-text">
-													Pesanan
-												</h3>
-											</div>
+							<!--end::Portlet-->
+						</div>
+						<div class="col-xl-6">
+							<div class="m-portlet m-portlet--mobile">
+								<div class="m-portlet__head">
+									<div class="m-portlet__head-caption">
+										<div class="m-portlet__head-title">
+											<h3 class="m-portlet__head-text">
+												Pesanan
+											</h3>
 										</div>
 									</div>
-									<div class="m-portlet__body" class="m-scrollable" data-scrollable="true" data-max-height="540" data-scrollbar-shown="true">
-										<div class="list-pesanan" >
-											<label>
-												<h5>Pesanan 1</h5>
+								</div>
+								<div class="m-portlet__body" class="m-scrollable" data-scrollable="true" data-max-height="540" data-scrollbar-shown="true">
+									<div class="list-pesanan" >
+										<label>
+											<h5>Pesanan 1</h5>
+										</label>
+										<div class="alert alert-danger" role="alert">
+											<strong>
+												Peringatan! 
+											</strong>
+											Bahan A telah habis
+										</div>
+										<div class="form-group m-form__group">
+											<label for="example_input_full_name">
+												Nama Pesanan :
 											</label>
-											<div class="alert alert-danger" role="alert">
-												<strong>
-													Peringatan! 
-												</strong>
-												Bahan A telah habis
-											</div>
-											<div class="form-group m-form__group">
-												<label for="example_input_full_name">
-													Nama Pesanan :
-												</label>
-												<input name="nama_pesanan" type="text" value="Kartu nama" class="form-control m-input" disabled="">
-											</div>
-											<div class="form-group m-form__group">
-												<label for="example_input_full_name">
-													Jumlah Pesanan :
-												</label>
-												<input name="jumlah_pesanan" type="text" value="3 box" class="form-control m-input" disabled="">
-											</div>
-											<div class="form-group m-form__group">
-												<label for="example_input_full_name">
-													Ukuran :
-												</label>
-												<input name="ukuran" type="text" value="-" class="form-control m-input" disabled="">
-											</div>
-											<div class="form-group m-form__group">
-												<label for="example_input_full_name">
-													Jenis Finishing :
-												</label>
-												<input name="jenis_finishing" type="text" value="-" class="form-control m-input" disabled="">
-											</div>
-											<div class="form-group m-form__group">
-												<label for="example_input_full_name">
-													Jumlah Finishing :
-												</label>
-												<input name="jumlah_Finishing" type="text" value="-" class="form-control m-input" disabled="">
-											</div>
-											<hr>
+											<input name="nama_pesanan" type="text" value="Kartu nama" class="form-control m-input" disabled="">
 										</div>
-										<div style="padding-top: 20px" class="list-pesanan">
-											<label>
-												<h5>Pesanan 2</h5>
+										<div class="form-group m-form__group">
+											<label for="example_input_full_name">
+												Jumlah Pesanan :
 											</label>
-											<div class="form-group m-form__group">
-												<label for="example_input_full_name">
-													Nama Pesanan :
-												</label>
-												<input name="nama_pesanan" type="text" value="Spanduk Pengabdian" class="form-control m-input" disabled="">
-											</div>
-											<div class="form-group m-form__group">
-												<label for="example_input_full_name">
-													Jumlah Pesanan :
-												</label>
-												<input name="jumlah_pesanan" type="text" value="2" class="form-control m-input" disabled="">
-											</div>
-											<div class="form-group m-form__group">
-												<label for="example_input_full_name">
-													Ukuran :
-												</label>
-												<input name="ukuran" type="text" value="160 x 60 cm" class="form-control m-input" disabled="">
-											</div>
-											<div class="form-group m-form__group">
-												<label for="example_input_full_name">
-													Jenis Finishing :
-												</label>
-												<input name="jenis_finishing" type="text" value="-" class="form-control m-input" disabled="">
-											</div>
-											<div class="form-group m-form__group">
-												<label for="example_input_full_name">
-													Jumlah Finishing :
-												</label>
-												<input name="jumlah_Finishing" type="text" value="-" class="form-control m-input" disabled="">
-											</div>
-											<hr>
+											<input name="jumlah_pesanan" type="text" value="3 box" class="form-control m-input" disabled="">
 										</div>
-										<div style="padding-top: 20px" class="list-pesanan">
-											<label>
-												<h5>Pesanan 3</h5>
+										<div class="form-group m-form__group">
+											<label for="example_input_full_name">
+												Ukuran :
 											</label>
-											<div class="alert alert-danger" role="alert">
-												<strong>
-													Peringatan! 
-												</strong>
-												Bahan B telah habis
-											</div>
-											<div class="form-group m-form__group">
-												<label for="example_input_full_name">
-													Nama Pesanan :
-												</label>
-												<input name="nama_pesanan" type="text" class="form-control m-input" disabled="">
-											</div>
-											<div class="form-group m-form__group">
-												<label for="example_input_full_name">
-													Jumlah Pesanan :
-												</label>
-												<input name="jumlah_pesanan" type="text" class="form-control m-input" disabled="">
-											</div>
-											<div  class="form-group m-form__group">
-												<label for="example_input_full_name">
-													Ukuran :
-												</label>
-												<input name="ukuran" type="text" value="-" class="form-control m-input" disabled="">
-											</div>
-											<div class="form-group m-form__group">
-												<label for="example_input_full_name">
-													Jenis Finishing :
-												</label>
-												<input name="jenis_finishing" type="text" value="-" class="form-control m-input" disabled="">
-											</div>
-											<div class="form-group m-form__group">
-												<label for="example_input_full_name">
-													Jumlah Finishing :
-												</label>
-												<input name="jumlah_Finishing" type="text" value="-" class="form-control m-input" disabled="">
-											</div>
-											<hr>
+											<input name="ukuran" type="text" value="-" class="form-control m-input" disabled="">
+										</div>
+										<div class="form-group m-form__group">
+											<label for="example_input_full_name">
+												Jenis Finishing :
+											</label>
+											<input name="jenis_finishing" type="text" value="-" class="form-control m-input" disabled="">
+										</div>
+										<div class="form-group m-form__group">
+											<label for="example_input_full_name">
+												Jumlah Finishing :
+											</label>
+											<input name="jumlah_Finishing" type="text" value="-" class="form-control m-input" disabled="">
+										</div>
+										<hr>
+									</div>
+									<div style="padding-top: 20px" class="list-pesanan">
+										<label>
+											<h5>Pesanan 2</h5>
+										</label>
+										<div class="form-group m-form__group">
+											<label for="example_input_full_name">
+												Nama Pesanan :
+											</label>
+											<input name="nama_pesanan" type="text" value="Spanduk Pengabdian" class="form-control m-input" disabled="">
+										</div>
+										<div class="form-group m-form__group">
+											<label for="example_input_full_name">
+												Jumlah Pesanan :
+											</label>
+											<input name="jumlah_pesanan" type="text" value="2" class="form-control m-input" disabled="">
+										</div>
+										<div class="form-group m-form__group">
+											<label for="example_input_full_name">
+												Ukuran :
+											</label>
+											<input name="ukuran" type="text" value="160 x 60 cm" class="form-control m-input" disabled="">
+										</div>
+										<div class="form-group m-form__group">
+											<label for="example_input_full_name">
+												Jenis Finishing :
+											</label>
+											<input name="jenis_finishing" type="text" value="-" class="form-control m-input" disabled="">
+										</div>
+										<div class="form-group m-form__group">
+											<label for="example_input_full_name">
+												Jumlah Finishing :
+											</label>
+											<input name="jumlah_Finishing" type="text" value="-" class="form-control m-input" disabled="">
+										</div>
+										<hr>
+									</div>
+									<div style="padding-top: 20px" class="list-pesanan">
+										<label>
+											<h5>Pesanan 3</h5>
+										</label>
+										<div class="alert alert-danger" role="alert">
+											<strong>
+												Peringatan! 
+											</strong>
+											Bahan B telah habis
+										</div>
+										<div class="form-group m-form__group">
+											<label for="example_input_full_name">
+												Nama Pesanan :
+											</label>
+											<input name="nama_pesanan" type="text" class="form-control m-input" disabled="">
+										</div>
+										<div class="form-group m-form__group">
+											<label for="example_input_full_name">
+												Jumlah Pesanan :
+											</label>
+											<input name="jumlah_pesanan" type="text" class="form-control m-input" disabled="">
+										</div>
+										<div  class="form-group m-form__group">
+											<label for="example_input_full_name">
+												Ukuran :
+											</label>
+											<input name="ukuran" type="text" value="-" class="form-control m-input" disabled="">
+										</div>
+										<div class="form-group m-form__group">
+											<label for="example_input_full_name">
+												Jenis Finishing :
+											</label>
+											<input name="jenis_finishing" type="text" value="-" class="form-control m-input" disabled="">
 										</div>
+										<div class="form-group m-form__group">
+											<label for="example_input_full_name">
+												Jumlah Finishing :
+											</label>
+											<input name="jumlah_Finishing" type="text" value="-" class="form-control m-input" disabled="">
+										</div>
+										<hr>
 									</div>
 								</div>
 							</div>
-							<div class="col-xl-12">
-								<!--begin::Portlet-->
-								<div class="m-portlet m-portlet--mobile">
-									<!--begin::Form-->
-									<form class="m-form">
-										<div class="m-portlet__body">
-											<div class="m-form__section m-form__section--first">
-												<div class="form-group m-form__group">
-													<label id="sub-header-form">
-												    	Harga
-											        </label> <br>
-											        <div class="m-form__group form-group">
-														<label for="">
-															Tipe Pesanan
+						</div>
+						<div class="col-xl-12">
+							<!--begin::Portlet-->
+							<div class="m-portlet m-portlet--mobile">
+								<!--begin::Form-->
+								<form class="m-form">
+									<div class="m-portlet__body">
+										<div class="m-form__section m-form__section--first">
+											<div class="form-group m-form__group">
+												<label id="sub-header-form">
+													Harga
+												</label> <br>
+												<div class="m-form__group form-group">
+													<label for="">
+														Tipe Pesanan
+													</label>
+													<div class="m-radio-list">
+														<label class="m-radio">
+															<input type="radio" name="tipe_pesanan" value="express">
+															Express
+															<span></span>
 														</label>
-														<div class="m-radio-list">
-															<label class="m-radio">
-																<input type="radio" name="tipe_pesanan" value="express">
-																Express
-																<span></span>
-															</label>
-															<label class="m-radio">
-																<input type="radio" name="tipe_pesanan" value="preorder">
-																Pre-order
-																<span></span>
-															</label>	
-														</div>
-												    </div>
+														<label class="m-radio">
+															<input type="radio" name="tipe_pesanan" value="preorder">
+															Pre-order
+															<span></span>
+														</label>	
+													</div>
 												</div>
-												<div class="form-group m-form__group ">
-													<label>
-														 Estimasi waktu :
-													</label>
-													<div >
-														<div class="input-group">
-															<div class="input-group-prepend">
-																<span class="input-group-text">
-																	<i class="flaticon-time-3"></i>
-																</span>
-															</div>
-															<input type="text" name="estimasi_waktu" class="form-control m-input" value="2 hari">
+											</div>
+											<div class="form-group m-form__group ">
+												<label>
+													Estimasi waktu :
+												</label>
+												<div >
+													<div class="input-group">
+														<div class="input-group-prepend">
+															<span class="input-group-text">
+																<i class="flaticon-time-3"></i>
+															</span>
 														</div>
+														<input type="text" name="estimasi_waktu" class="form-control m-input" value="2 hari">
 													</div>
 												</div>
-												<div class="form-group m-form__group">
-													<label>
-														Harga :
-													</label>
-													<div >
-														<div class="input-group">
-															<div class="input-group-prepend">
-																<span class="input-group-text">
-																	Rp.
-																</span>
-															</div>
-															<input type="text" name="harga_pesanan" class="form-control m-input" value="120000">
+											</div>
+											<div class="form-group m-form__group">
+												<label>
+													Harga :
+												</label>
+												<div >
+													<div class="input-group">
+														<div class="input-group-prepend">
+															<span class="input-group-text">
+																Rp.
+															</span>
 														</div>
+														<input type="text" name="harga_pesanan" class="form-control m-input" value="120000">
 													</div>
 												</div>
-												<div class="form-group m-form__group">
-													<label>
-														Diskon :
-													</label>
-													<div >
-														<div class="input-group">
-															<div class="input-group-prepend">
-																<span class="input-group-text">
-																	<i class="fa fa-tag"></i>
-																</span>
-															</div>
-															<input type="text" name="diskon_pesanan" class="form-control m-input" value="-20000">
+											</div>
+											<div class="form-group m-form__group">
+												<label>
+													Diskon :
+												</label>
+												<div >
+													<div class="input-group">
+														<div class="input-group-prepend">
+															<span class="input-group-text">
+																<i class="fa fa-tag"></i>
+															</span>
 														</div>
+														<input type="text" name="diskon_pesanan" class="form-control m-input" value="-20000">
 													</div>
 												</div>
-												<div class="form-group m-form__group">
-													<label>
-														Down payment :
-													</label>
-													<div>
-														<div class="input-group">
-															<div class="input-group-prepend">
-																<span class="input-group-text">
-																	Rp.
-																</span>
-															</div>
-															<input type="text" name="down_payment" class="form-control m-input" value="60000">
+											</div>
+											<div class="form-group m-form__group">
+												<label>
+													Down payment :
+												</label>
+												<div>
+													<div class="input-group">
+														<div class="input-group-prepend">
+															<span class="input-group-text">
+																Rp.
+															</span>
 														</div>
+														<input type="text" name="down_payment" class="form-control m-input" value="60000">
 													</div>
 												</div>
-												<div class="m-form__group form-group">
-													<label for="">
-														Tipe Pembayaran
+											</div>
+											<div class="m-form__group form-group">
+												<label for="">
+													Tipe Pembayaran
+												</label>
+												<div class="m-radio-list col-md-12">
+													<label class="radio-inline col-3">
+														<input type="radio" name="tipe_pembayaran" value="cash">
+														Cash
+														<span></span>
+													</label>
+													<label class="radio-inline col-3">
+														<input type="radio" name="tipe_pembayaran" value="edc">
+														EDC
+														<span></span>
+													</label>
+													<label class="radio-inline col-4">
+														<input type="radio" name="tipe_pembayaran" value="transfer">
+														Transfer
+														<span></span>
 													</label>
-													<div class="m-radio-list col-md-12">
-														<label class="radio-inline col-3">
-															<input type="radio" name="tipe_pembayaran" value="cash">
-															Cash
-															<span></span>
-														</label>
-														<label class="radio-inline col-3">
-															<input type="radio" name="tipe_pembayaran" value="edc">
-															EDC
-															<span></span>
-														</label>
-														<label class="radio-inline col-4">
-															<input type="radio" name="tipe_pembayaran" value="transfer">
-															Transfer
-															<span></span>
-														</label>
-													</div>
 												</div>
-											    <div class="form-group m-form__group">
-												  	<label for="exampleTextarea">
-													Catatan :
-												  	</label>
-												  	<textarea name="catatan" style="resize: none; overflow: hidden;" class="form-control m-input" id="exampleTextarea" rows="6">
-												  	</textarea>
-											    </div>		
 											</div>
+											<div class="form-group m-form__group">
+												<label for="exampleTextarea">
+													Catatan :
+												</label>
+												<textarea name="catatan" style="resize: none; overflow: hidden;" class="form-control m-input" id="exampleTextarea" rows="6">
+												</textarea>
+											</div>		
 										</div>
-										<div class="m-portlet__foot m-portlet__foot--fit">
-											<div class="m-form__actions m-form__actions">
-												<button id="send" type="reset" class="btn btn-primary btn-kirimPesan">
-													Order
-												</button>
-											</div>
+									</div>
+									<div class="m-portlet__foot m-portlet__foot--fit">
+										<div class="m-form__actions m-form__actions">
+											<button id="send" type="reset" class="btn btn-primary btn-kirimPesan">
+												Order
+											</button>
 										</div>
-									</form>
-									<!--end::Form-->
-								</div>
-								<!--end::Portlet-->
+									</div>
+								</form>
+								<!--end::Form-->
 							</div>
+							<!--end::Portlet-->
 						</div>
-						<!--End::Section-->
 					</div>
+					<!--End::Section-->
 				</div>
 			</div>
-			<!-- end:: Body -->
-			<!-- begin::Footer -->
-			<footer class="m-grid__item		m-footer ">
-				<div class="m-container m-container--fluid m-container--full-height m-page__container">
-					<div class="m-stack m-stack--flex-tablet-and-mobile m-stack--ver m-stack--desktop">
-						<div class="m-stack__item m-stack__item--left m-stack__item--middle m-stack__item--last">
-							<span class="m-footer__copyright">
-								Upa'na Studio
-							</span>
-						</div>
+		</div>
+		<!-- end:: Body -->
+		<!-- begin::Footer -->
+		<footer class="m-grid__item		m-footer ">
+			<div class="m-container m-container--fluid m-container--full-height m-page__container">
+				<div class="m-stack m-stack--flex-tablet-and-mobile m-stack--ver m-stack--desktop">
+					<div class="m-stack__item m-stack__item--left m-stack__item--middle m-stack__item--last">
+						<span class="m-footer__copyright">
+							Upa'na Studio
+						</span>
 					</div>
 				</div>
-				<!-- MODAL -->
-				<div class="modal fade tampilan-modal" id="myModal" role="dialog">
-		          <div class="modal-dialog">
-		          	<!-- Modal Konten -->
-		          	<div class="modal-content">
-		          		<div class="modal-body">
-		          			<div class="m-portlet__body">
+			</div>
+			<!-- MODAL -->
+			<div class="modal fade tampilan-modal" id="myModal" role="dialog">
+				<div class="modal-dialog">
+					<!-- Modal Konten -->
+					<div class="modal-content">
+						<div class="modal-body">
+							<div class="m-portlet__body">
 								<div class="m-form__section m-form__section--first">
 									<div class="form-group m-form__group">
 										<label id="sub-header-form">
 											Pesanan
 										</label> <br>
 										<div class="form-group m-form__group">
-									    	<label for="exampleSelect1" style="display: inline-block;">
-										    Tipe Produk
-									    	</label>
-								    		<select style="width: 100%" class="form-control m-select2 dropdown_search" name="tipe_produk">
+											<label for="exampleSelect1" style="display: inline-block;">
+												Tipe Produk
+											</label>
+											<select style="width: 100%" class="form-control m-select2 dropdown_search" name="tipe_produk">
 												<option value="1">
 													Spanduk
 												</option>
@@ -726,13 +726,13 @@ <h5>Pesanan 3</h5>
 													Tipe n
 												</option>
 											</select>
-								        </div>
+										</div>
 									</div>
 									<div class="form-group m-form__group">
-								    	<label style="display: block;" for="exampleSelect1">
-									    Jenis Bahan
-								    	</label>
-								     	<select style="width: 100%" class="form-control m-select2 dropdown_search" name="jenis_bahan">
+										<label style="display: block;" for="exampleSelect1">
+											Jenis Bahan
+										</label>
+										<select style="width: 100%" class="form-control m-select2 dropdown_search" name="jenis_bahan">
 											<option value="1">
 												Bahan 1
 											</option>
@@ -770,8 +770,8 @@ <h5>Pesanan 3</h5>
 												Bahan 12
 											</option >
 										</select>
-							        </div>
-							        <div class="form-group m-form__group">
+									</div>
+									<div class="form-group m-form__group">
 										<label for="exampleSelect1">
 											Ukuran Bahan
 										</label>
@@ -788,7 +788,7 @@ <h5>Pesanan 3</h5>
 										</select>
 									</div>
 									<div class="form-group m-form__group">
-							            <div class="m-form__group form-group">
+										<div class="m-form__group form-group">
 											<label for="">
 												Satuan
 											</label>
@@ -822,10 +822,10 @@ <h5>Pesanan 3</h5>
 										</div>
 										<div style="display: none" id="satuan_box" class="satuan-umum">
 											<div class="form-group m-form__group row">
-									        	<label for="example-text-input" class="col-3 col-form-label">
-										        jumlah
-									        	</label>
-									        	<div class="input-group col-9">
+												<label for="example-text-input" class="col-3 col-form-label">
+													jumlah
+												</label>
+												<div class="input-group col-9">
 													<input name="input_jumlah_box" type="text" class="form-control m-input" placeholder="masukkan jumlah" aria-describedby="basic-addon2">
 													<div class="input-group-append">
 														<span class="input-group-text" id="basic-addon2">
@@ -833,14 +833,14 @@ <h5>Pesanan 3</h5>
 														</span>
 													</div>
 												</div>
-								            </div>
+											</div>
 										</div>
 										<div style="display: none" id="satuan_lembar" class="satuan-umum">
 											<div class="form-group m-form__group row">
-									        	<label for="example-text-input" class="col-3 col-form-label">
-										        jumlah
-									        	</label>
-									        	<div class="input-group col-9">
+												<label for="example-text-input" class="col-3 col-form-label">
+													jumlah
+												</label>
+												<div class="input-group col-9">
 													<input name="input_jumlah_lembar" type="text" class="form-control m-input" placeholder="masukkan jumlah" aria-describedby="basic-addon2">
 													<div class="input-group-append">
 														<span class="input-group-text" id="basic-addon2">
@@ -848,14 +848,14 @@ <h5>Pesanan 3</h5>
 														</span>
 													</div>
 												</div>
-								            </div>
+											</div>
 										</div>
 										<div style="display: none" id="satuan_pcs" class="satuan-umum">
 											<div class="form-group m-form__group row">
-									        	<label for="example-text-input" class="col-3 col-form-label">
-										        jumlah
-									        	</label>
-									        	<div class="input-group col-9">
+												<label for="example-text-input" class="col-3 col-form-label">
+													jumlah
+												</label>
+												<div class="input-group col-9">
 													<input name="input_jumlah_pcs" type="text" class="form-control m-input" placeholder="masukkan jumlah" aria-describedby="basic-addon2">
 													<div class="input-group-append">
 														<span class="input-group-text" id="basic-addon2">
@@ -863,14 +863,14 @@ <h5>Pesanan 3</h5>
 														</span>
 													</div>
 												</div>
-								            </div>
+											</div>
 										</div>
 										<div style="display: none" id="satuan_panjang" style="padding-top: 15px" class="satuan-meter">
 											<div class="form-group m-form__group row">
-									        	<label for="example-text-input" class="col-3 col-form-label">
-										        Panjang
-									        	</label>
-									        	<div class="input-group col-9">
+												<label for="example-text-input" class="col-3 col-form-label">
+													Panjang
+												</label>
+												<div class="input-group col-9">
 													<input name="input_panjang" type="text" class="form-control m-input" placeholder="masukkan panjang" aria-describedby="basic-addon2">
 													<div class="input-group-append">
 														<span class="input-group-text" id="basic-addon2">
@@ -878,12 +878,12 @@ <h5>Pesanan 3</h5>
 														</span>
 													</div>
 												</div>
-								            </div>
-								            <div class="form-group m-form__group row">
-									        	<label for="example-text-input" class="col-3 col-form-label">
-										        	Lebar 
-									        	</label>
-									        	<div class="input-group col-9">
+											</div>
+											<div class="form-group m-form__group row">
+												<label for="example-text-input" class="col-3 col-form-label">
+													Lebar 
+												</label>
+												<div class="input-group col-9">
 													<input name="input_panjang" type="text" class="form-control m-input" placeholder="masukkan lebar" aria-describedby="basic-addon2">
 													<div class="input-group-append">
 														<span class="input-group-text" id="basic-addon2">
@@ -891,16 +891,16 @@ <h5>Pesanan 3</h5>
 														</span>
 													</div>
 												</div>
-								            </div>
+											</div>
 										</div>
 										<div style="display: none" id="satuan_set" class="satuan-umum">
 											<div class="form-group m-form__group row">
 												<div class="input-group col-12">
 													<select style="width: 100%" class="form-control m-select2 dropdown_search" name="set_ukuran">
-												    	<option value="1">
-													  		1 x 2 cm
-												    	</option>
-												    	<option value="2">
+														<option value="1">
+															1 x 2 cm
+														</option>
+														<option value="2">
 															4 x 5 m
 														</option>
 														<option value="3">
@@ -912,10 +912,10 @@ <h5>Pesanan 3</h5>
 										</div>
 										<div style="display: none" id="satuan_unit" class="satuan-umum">
 											<div class="form-group m-form__group row">
-									        	<label for="example-text-input" class="col-3 col-form-label">
-										        jumlah
-									        	</label>
-									        	<div class="input-group col-9">
+												<label for="example-text-input" class="col-3 col-form-label">
+													jumlah
+												</label>
+												<div class="input-group col-9">
 													<input name="input_jumlah_box" type="text" class="form-control m-input" placeholder="masukkan jumlah" aria-describedby="basic-addon2">
 													<div class="input-group-append">
 														<span class="input-group-text" id="basic-addon2">
@@ -923,7 +923,7 @@ <h5>Pesanan 3</h5>
 														</span>
 													</div>
 												</div>
-								            </div>
+											</div>
 										</div>
 									</div>
 									<div class="form-group m-form__group">
@@ -931,37 +931,37 @@ <h5>Pesanan 3</h5>
 											Finishing :
 										</label> <br>
 										<div class="form-group m-form__group row">
-								        	<label for="example-text-input" class="col-4 col-form-label">
-									        	Tipe Finishing :
-								        	</label>
-								        	<div class="col-8">
-										     	<select style="width: 100%" class="form-control m-input dropdown_search" id="exampleSelect1" name="tipe_finishing" data-search="true">
-												<option value="1">
-													Tipe 1
-												</option>
-												<option value="2">
-													Tipe 2
-												</option>
-												<option value="3">
-													Tipe 3
-												</option >
-												<option value="4">
-													Tipe 4
-												</option>
-												<option value="5">
-													Tipe 5
-												</option>
+											<label for="example-text-input" class="col-4 col-form-label">
+												Tipe Finishing :
+											</label>
+											<div class="col-8">
+												<select style="width: 100%" class="form-control m-input dropdown_search" id="exampleSelect1" name="tipe_finishing" data-search="true">
+													<option value="1">
+														Tipe 1
+													</option>
+													<option value="2">
+														Tipe 2
+													</option>
+													<option value="3">
+														Tipe 3
+													</option >
+													<option value="4">
+														Tipe 4
+													</option>
+													<option value="5">
+														Tipe 5
+													</option>
 												</select>
-									          </div>
-							            </div>
-							            <div class="form-group m-form__group row">
-								        	<label for="example-text-input" class="col-4 col-form-label">
-									        	Jumlah (masih perlu?)
-								        	</label>
-								        	<div class="col-8">
-									    		<input class="form-control m-input" type="text" name="jumlah_finishing" value="" placeholder="masukkan jumlah" id="example-text-input">	
-								          	</div> 
-							            </div>
+											</div>
+										</div>
+										<div class="form-group m-form__group row">
+											<label for="example-text-input" class="col-4 col-form-label">
+												Jumlah (masih perlu?)
+											</label>
+											<div class="col-8">
+												<input class="form-control m-input" type="text" name="jumlah_finishing" value="" placeholder="masukkan jumlah" id="example-text-input">	
+											</div> 
+										</div>
 									</div>
 									<div class="m-form__group form-group">
 										<label for="">
@@ -982,216 +982,218 @@ <h5>Pesanan 3</h5>
 									</div>
 								</div>
 							</div>
-		    			</div>
-					    <div class="modal-footer">
-					    	<button id="tambah_pesanan" type="submit" class="btn btn-primary">
+						</div>
+						<div class="modal-footer">
+							<button id="tambah_pesanan" type="submit" class="btn btn-primary">
 								Tambah Pesanan
 							</button>
-					        <button type="button" class="btn btn-default" data-dismiss="modal">	
-					        	Close
-					        </button>
-					    </div>
-		          	</div>
-		          </div>
+							<button type="button" class="btn btn-default" data-dismiss="modal">	
+								Close
+							</button>
+						</div>
+					</div>
 				</div>
-				<!-- END OF MODAL -->
-				<!--begin::Modal-->
-				<div class="modal fade" id="lihat_inventory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-					<div class="modal-dialog modal-lg" role="document">
-						<div class="modal-content">
-							<div class="modal-header">
-								<h5 class="modal-title" id="exampleModalLabel">
-									Inventory
-								</h5>
-								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-									<span aria-hidden="true">
-										&times;
-									</span>
-								</button>
-							</div>
-							<div class="modal-body">
-								<div class="m-scrollable" data-scrollbar-shown="true" data-scrollable="true">
-									<div class="row">
-										<div class="col-lg-12">
-											<div class="m-portlet m-portlet--mobile">
-												<div class="m-portlet__head">
-													<div class="m-portlet__head-caption">
-														<div class="m-portlet__head-title">
-															<div class="m-input-icon m-input-icon--left">
-																<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="generalSearch">
-																<span class="m-input-icon__icon m-input-icon__icon--left">
-																	<span>
-																		<i class="la la-search"></i>
-																	</span>
+			</div>
+			<!-- END OF MODAL -->
+			<!--begin::Modal-->
+			<div class="modal fade" id="lihat_inventory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+				<div class="modal-dialog modal-lg" role="document">
+					<div class="modal-content">
+						<div class="modal-header">
+							<h5 class="modal-title" id="exampleModalLabel">
+								Inventory
+							</h5>
+							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+								<span aria-hidden="true">
+									&times;
+								</span>
+							</button>
+						</div>
+						<div class="modal-body">
+							<div class="m-scrollable" data-scrollbar-shown="true" data-scrollable="true">
+								<div class="row">
+									<div class="col-lg-12">
+										<div class="m-portlet m-portlet--mobile">
+											<div class="m-portlet__head">
+												<div class="m-portlet__head-caption">
+													<div class="m-portlet__head-title">
+														<div class="m-input-icon m-input-icon--left">
+															<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="generalSearch">
+															<span class="m-input-icon__icon m-input-icon__icon--left">
+																<span>
+																	<i class="la la-search"></i>
 																</span>
-															</div>
+															</span>
 														</div>
 													</div>
 												</div>
-												<div class="m-portlet__body">
-													<canvas id="bahan-baku"></canvas>
-												</div>
+											</div>
+											<div class="m-portlet__body">
+												<canvas id="bahan-baku"></canvas>
 											</div>
 										</div>
 									</div>
 								</div>
 							</div>
-							<div class="modal-footer">
-								<button type="button" class="btn btn-secondary" data-dismiss="modal">
-									Close
-								</button>
-							</div>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-secondary" data-dismiss="modal">
+								Close
+							</button>
 						</div>
 					</div>
 				</div>
-				<!--end::Modal-->
-			</footer>
-			<!-- end::Footer -->
-		</div>
-		<!-- end:: Page -->		    
-	    <!-- begin::Scroll Top -->
-		<div class="m-scroll-top m-scroll-top--skin-top" data-toggle="m-scroll-top" data-scroll-offset="500" data-scroll-speed="300">
-			<i class="la la-arrow-up"></i>
-		</div>
-		<!-- end::Scroll Top -->	
-    	<!--begin::Base Scripts -->
-		<script src="../assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
-		<script src="../assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
-		<!--end::Base Scripts -->   
-        <!--begin::Page Vendors -->
-		<script src="../assets/vendors/custom/fullcalendar/fullcalendar.bundle.js" type="text/javascript"></script>
-		<!--end::Page Vendors -->  
-        <!--begin::Page Snippets -->
-		<!-- <script src="../assets/app/js/dashboard.js" type="text/javascript"></script> -->
-		<!--end::Page Snippets -->
-		<!-- <script src="../assets/demo/default/custom/components/forms/widgets/select2.js" type="text/javascript"></script> -->
-		<script type="text/javascript">
-			function satuanCheck() {
-		    if  (document.getElementById('box').checked) {
-		        document.getElementById('satuan_box').style.display = 'block';
-		        document.getElementById('satuan_lembar').style.display = 'none';
-		        document.getElementById('satuan_pcs').style.display = 'none';
-		        document.getElementById('satuan_panjang').style.display = 'none';
-		        document.getElementById('satuan_set').style.display = 'none';
-		        document.getElementById('satuan_unit').style.display = 'none';
+			</div>
+			<!--end::Modal-->
+		</footer>
+		<!-- end::Footer -->
+	</div>
+	<!-- end:: Page -->		    
+	<!-- begin::Scroll Top -->
+	<div class="m-scroll-top m-scroll-top--skin-top" data-toggle="m-scroll-top" data-scroll-offset="500" data-scroll-speed="300">
+		<i class="la la-arrow-up"></i>
+	</div>
+	<!-- end::Scroll Top -->	
+	<!--begin::Base Scripts -->
+	<script src="../assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
+	<script src="../assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
+	<!--end::Base Scripts -->   
+	<!--begin::Page Vendors -->
+	<script src="../assets/vendors/custom/fullcalendar/fullcalendar.bundle.js" type="text/javascript"></script>
+	<!--end::Page Vendors -->  
+	<!--begin::Page Snippets -->
+	<!-- <script src="../assets/app/js/dashboard.js" type="text/javascript"></script> -->
+	<!--end::Page Snippets -->
+	<!-- <script src="../assets/demo/default/custom/components/forms/widgets/select2.js" type="text/javascript"></script> -->
+	<script type="text/javascript">
+		function satuanCheck() {
+			if  (document.getElementById('box').checked) {
+				document.getElementById('satuan_box').style.display = 'block';
+				document.getElementById('satuan_lembar').style.display = 'none';
+				document.getElementById('satuan_pcs').style.display = 'none';
+				document.getElementById('satuan_panjang').style.display = 'none';
+				document.getElementById('satuan_set').style.display = 'none';
+				document.getElementById('satuan_unit').style.display = 'none';
 
-		    } else if (document.getElementById('lembar').checked) {
-		    	document.getElementById('satuan_box').style.display = 'none';
-		        document.getElementById('satuan_lembar').style.display = 'block';
-		        document.getElementById('satuan_pcs').style.display = 'none';
-		        document.getElementById('satuan_panjang').style.display = 'none';
-		        document.getElementById('satuan_set').style.display = 'none';
-		        document.getElementById('satuan_unit').style.display = 'none';
+			} else if (document.getElementById('lembar').checked) {
+				document.getElementById('satuan_box').style.display = 'none';
+				document.getElementById('satuan_lembar').style.display = 'block';
+				document.getElementById('satuan_pcs').style.display = 'none';
+				document.getElementById('satuan_panjang').style.display = 'none';
+				document.getElementById('satuan_set').style.display = 'none';
+				document.getElementById('satuan_unit').style.display = 'none';
 
-		    } else if (document.getElementById('pcs').checked) {
-		    	document.getElementById('satuan_box').style.display = 'none';
-		        document.getElementById('satuan_lembar').style.display = 'none';
-		        document.getElementById('satuan_pcs').style.display = 'block';
-		        document.getElementById('satuan_panjang').style.display = 'none';
-		        document.getElementById('satuan_set').style.display = 'none';
-		        document.getElementById('satuan_unit').style.display = 'none';
+			} else if (document.getElementById('pcs').checked) {
+				document.getElementById('satuan_box').style.display = 'none';
+				document.getElementById('satuan_lembar').style.display = 'none';
+				document.getElementById('satuan_pcs').style.display = 'block';
+				document.getElementById('satuan_panjang').style.display = 'none';
+				document.getElementById('satuan_set').style.display = 'none';
+				document.getElementById('satuan_unit').style.display = 'none';
 
-		    } else if (document.getElementById('meter').checked) {
-		    	document.getElementById('satuan_box').style.display = 'none';
-		        document.getElementById('satuan_lembar').style.display = 'none';
-		        document.getElementById('satuan_pcs').style.display = 'none';
-		        document.getElementById('satuan_panjang').style.display = 'block';
-		        document.getElementById('satuan_set').style.display = 'none';
-		        document.getElementById('satuan_unit').style.display = 'block';
-		    } 
-		      else if (document.getElementById('set').checked) {
-		      	document.getElementById('satuan_box').style.display = 'none';
-		        document.getElementById('satuan_lembar').style.display = 'none';
-		        document.getElementById('satuan_pcs').style.display = 'none';
-		        document.getElementById('satuan_panjang').style.display = 'none';
-		        document.getElementById('satuan_set').style.display = 'block';
-		        document.getElementById('satuan_unit').style.display = 'block';
-		      }  
-		    }
-		</script>
-		<script>
-			var Select2 = function() {
-				var demos = function(){
-					 // basic
-			        $('.dropdown_search, .dropdown_search_validate').select2({
-			            placeholder: "Select a state"
-			        });
-				}
-				var modalDemos = function(){
-					$('#m_select2_modal').on('shown.bs.modal', function () {
-						// basic
-			            $('.dropdown_search_modal').select2({
-			                placeholder: "Select a state"
-			            });
-		            });
-				}
-				 return {
-			        init: function() {
-			            demos();
-			            modalDemos();
-			        }
-			    };
-			}();
-			//== Initialization
-			jQuery(document).ready(function() {
-			    Select2.init();
-			});
-		</script>
-		<script>
-			var SweetAlert2Demo = function() {
-			 	var initDemos = function() {
-				 	$('#send').click(function(e) {
-			            swal('SPK telah terbuat');
-			        });
-			 	};
-			 	return {
-			        //== Init
-			        init: function() {
-			            initDemos();
-			        },
-			    };
-			 }();
-			 //== Class Initialization
-			jQuery(document).ready(function() {
-			    SweetAlert2Demo.init();
-			});
-		</script>
-		<script>
-			var MONTHS = ['Bahan 1', 'Bahan 2', 'Bahan 3', 'Bahan 4', 'Bahan 5', 'Bahan 6', 'Bahan 7', 'Bahan 8', 'Bahan 9', 'Bahan 10', 'Bahan 11', 'Bahan 12'];
-			const data = [10,40,30,-29,50,-40,-40,10,20,-30,12,43];
-			const colours = data.map((value) => value < 0 ? '#C62828' : '#8BC34A');
-			var color = Chart.helpers.color;
-			var horizontalBarChartData = {
-				labels: ['Bahan 1', 'Bahan 2', 'Bahan 3', 'Bahan 4', 'Bahan 5', 'Bahan 6', 'Bahan 7', 'Bahan 8', 'Bahan 9', 'Bahan 10', 'Bahan 11', 'Bahan 12'],
-				datasets: [{
-					label: 'Jumlah Bahan',
-					backgroundColor: colours,
-					borderColor: window.chartColors.white,
-					borderWidth: 0,
-					data: data
-				}]
-			};
-			window.onload = function() {
-				var ctx = document.getElementById('bahan-baku').getContext('2d');
-				window.myHorizontalBar = new Chart(ctx, {
-					type: 'horizontalBar',
-					data: horizontalBarChartData,
-					options: {
-						// Elements options apply to all of the options unless overridden in a dataset
-						// In this case, we are setting the border of each horizontal bar to be 2px wide
-						elements: {
-							rectangle: {
-								borderWidth: 0,
+			} else if (document.getElementById('meter').checked) {
+				document.getElementById('satuan_box').style.display = 'none';
+				document.getElementById('satuan_lembar').style.display = 'none';
+				document.getElementById('satuan_pcs').style.display = 'none';
+				document.getElementById('satuan_panjang').style.display = 'block';
+				document.getElementById('satuan_set').style.display = 'none';
+				document.getElementById('satuan_unit').style.display = 'block';
+			} 
+			else if (document.getElementById('set').checked) {
+				document.getElementById('satuan_box').style.display = 'none';
+				document.getElementById('satuan_lembar').style.display = 'none';
+				document.getElementById('satuan_pcs').style.display = 'none';
+				document.getElementById('satuan_panjang').style.display = 'none';
+				document.getElementById('satuan_set').style.display = 'block';
+				document.getElementById('satuan_unit').style.display = 'block';
+			}  
+		}
+	</script>
+	<script>
+		var Select2 = function() {
+			var demos = function(){
+						 // basic
+						 $('.dropdown_search, .dropdown_search_validate').select2({
+						 	placeholder: "Select a state"
+						 });
+						}
+						var modalDemos = function(){
+							$('#m_select2_modal').on('shown.bs.modal', function () {
+							// basic
+							$('.dropdown_search_modal').select2({
+								placeholder: "Select a state"
+							});
+						});
+						}
+						return {
+							init: function() {
+								demos();
+								modalDemos();
 							}
-						},
-						responsive: true,
-						legend: {
-							position: 'right',
-						},
-					}
+						};
+					}();
+				//== Initialization
+				jQuery(document).ready(function() {
+					Select2.init();
 				});
-			};
-		</script>
-	</body>
-	<!-- end::Body -->
-</html>
+			</script>
+			<script>
+				var SweetAlert2Demo = function() {
+					var initDemos = function() {
+						$('#send').click(function(e) {
+							swal('SPK telah terbuat');
+						});
+					};
+					return {
+				        //== Init
+				        init: function() {
+				        	initDemos();
+				        },
+				    };
+				}();
+				 //== Class Initialization
+				 jQuery(document).ready(function() {
+				 	SweetAlert2Demo.init();
+				 });
+				</script>
+				<script>
+					var MONTHS = ['Bahan 1', 'Bahan 2', 'Bahan 3', 'Bahan 4', 'Bahan 5', 'Bahan 6', 'Bahan 7', 'Bahan 8', 'Bahan 9', 'Bahan 10', 'Bahan 11', 'Bahan 12'];
+					const data = [10,40,30,-29,50,-40,-40,10,20,-30,12,43];
+					const colours = data.map((value) => value < 0 ? '#C62828' : '#8BC34A');
+					var color = Chart.helpers.color;
+					var horizontalBarChartData = {
+						labels: ['Bahan 1', 'Bahan 2', 'Bahan 3', 'Bahan 4', 'Bahan 5', 'Bahan 6', 'Bahan 7', 'Bahan 8', 'Bahan 9', 'Bahan 10', 'Bahan 11', 'Bahan 12'],
+						datasets: [{
+							label: 'Jumlah Bahan',
+							backgroundColor: colours,
+							borderColor: window.chartColors.white,
+							borderWidth: 0,
+							data: data
+						}]
+					};
+					window.onload = function() {
+						var ctx = document.getElementById('bahan-baku').getContext('2d');
+						window.myHorizontalBar = new Chart(ctx, {
+							type: 'horizontalBar',
+							data: horizontalBarChartData,
+							options: {
+							// Elements options apply to all of the options unless overridden in a dataset
+							// In this case, we are setting the border of each horizontal bar to be 2px wide
+							elements: {
+								rectangle: {
+									borderWidth: 0,
+								}
+							},
+							responsive: true,
+							legend: {
+								position: 'right',
+							},
+						}
+					});
+					};
+				</script>
+				<!-- Live Server -->
+				<script src="http://localhost:35729/livereload.js"></script> 
+			</body>
+			<!-- end::Body -->
+			</html>
diff --git a/CS/invoice.html b/CS/invoice.html
index b362e6f..c5cfd94 100644
--- a/CS/invoice.html
+++ b/CS/invoice.html
@@ -12,93 +12,97 @@
 License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
 -->
 <html lang="en" >
-	<!-- begin::Head -->
-	<head>
-		<meta charset="utf-8" />
-		<title>
-			INVOICE
-		</title>
-		<meta name="description" content="Latest updates and statistic charts">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-		<!--begin::Web font -->
-		<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
-		<script>
-          WebFont.load({
-            google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
-            active: function() {
-                sessionStorage.fonts = true;
-            }
-          });
-		</script>
-		<!--end::Web font -->
-        <!--begin::Base Styles -->  
-        <!--begin::Page Vendors -->
-		<link href="../assets/vendors/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
-		<!--end::Page Vendors -->
-		<link href="../assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
-		<link href="../assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
-		<!-- begin:: Style tambahan -->
-		<link href="../assets/demo/default/base/pelangi-style.css" rel="stylesheet" type="text/css">
-		<!-- <link href="../assets/demo/default/base/card-a5.css" rel="stylesheet" type="text/css" -->
-		<!-- end:: Style tambahan -->
-		<!--end::Base Styles -->
-		<link rel="shortcut icon" href="../assets/demo/default/media/img/logo/favicon.ico" />
-		<style>
-			@media print {
+<!-- begin::Head -->
+<head>
+	<meta charset="utf-8" />
+	<title>
+		INVOICE
+	</title>
+	<meta name="description" content="Latest updates and statistic charts">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<!--begin::Web font -->
+	<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
+	<script>
+		WebFont.load({
+			google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
+			active: function() {
+				sessionStorage.fonts = true;
+			}
+		});
+	</script>
+	<!--end::Web font -->
+	<!--begin::Base Styles -->  
+	<!--begin::Page Vendors -->
+	<link href="../assets/vendors/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
+	<!--end::Page Vendors -->
+	<link href="../assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
+	<link href="../assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
+	<!-- begin:: Style tambahan -->
+	<link href="../assets/demo/default/base/pelangi-style.css" rel="stylesheet" type="text/css">
+	<!-- <link href="../assets/demo/default/base/card-a5.css" rel="stylesheet" type="text/css" -->
+	<!-- end:: Style tambahan -->
+	<!--end::Base Styles -->
+	<link rel="shortcut icon" href="../assets/demo/default/media/img/logo/favicon.ico" />
+	<style>
+		@media print {
 
-				.table {
-					min-height : 275px !important;
-				}
-				
-				th {
-					font-size: 1.7rem !important;
-				}
+			.table {
+				min-height : 275px !important;
+			}
+
+			th {
+				font-size: 1.7rem !important;
+			}
 
-				td {
-					font-size: 1.7rem !important;
-				}
+			td {
+				font-size: 1.7rem !important;
+			}
+
+			p {
+				font-size: 1.8rem !important;
+			}
+			label {
+				font-size: 1.6rem !important;
+			}
+			input {
+				font-size: 1.6rem !important;
+			}
+			h3 {
+				font-size: 2rem !important;
+			}
 
-				p {
-					font-size: 1.8rem !important;
-				}
-				label {
-					font-size: 1.6rem !important;
-				}
-				input {
-					font-size: 1.6rem !important;
-				}
-				h3 {
-					font-size: 2rem !important;
-				}
+			.font-print {
+				font-size: 1.8rem !important;
+			}
 
-				.font-print {
-					font-size: 1.8rem !important;
-				}
+			.m-portlet .m-portlet__body {
+				padding: 2.2rem 2.2rem;
+			}
 
-				.m-portlet .m-portlet__body {
-					padding: 2.2rem 2.2rem;
-				}
+			.informasinya {
+				padding-bottom: .1rem !important;
+			}
 
-				.informasinya {
-					padding-bottom: .1rem !important;
-				}
+			.col-form-label {
+				padding-top : 0px !important;
+				padding-bottom: 0px !important;
+			}
 
-				.col-form-label {
-					padding-top : 0px !important;
-					padding-bottom: 0px !important;
-				}
+			.m-datatable__table {
+				min-height: 0 !important;
 			}
+		}
+
 
-			
-		</style>
-	</head>
-	<!-- end::Head -->
-    <!-- end::Body -->
-	<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
-		<div class="m-content">
-			<div class="face face-front">
-        	<div class="row">
+	</style>
+</head>
+<!-- end::Head -->
+<!-- end::Body -->
+<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
+	<div class="m-content">
+		<div class="face face-front">
+			<div class="row">
 				<div class="col-xl-12">
 					<div class="m-portlet m-portlet--tab">
 						<div class="m-portlet__head header">
@@ -129,9 +133,8 @@ <h3 name="no_pesanan" class="header-pesanan-no">
 								<label for="example-text-input" class="col-3 col-form-label">
 									catatan 
 								</label>
-								<div class="col-4"
+								<div class="col-4">
 									<span class="font-print" id="catatan_pesanan"> - </span>
-									<!-- <input name="catatan" class="form-control m-input" type="text" value="Express" id="example-text-input" disabled="true"> -->
 								</div>
 							</div>
 							<div class="form-group m-form__group row">
@@ -140,7 +143,22 @@ <h3 name="no_pesanan" class="header-pesanan-no">
 								</label>
 								<div class="col-4">
 									<span class="font-print" id="tanggal_pesanan"> 20/11/19 </span>
-									<!-- <input name="tanggal_pesanan" class="form-control m-input" type="text" value="20-11-2018" id="example-text-input" disabled="true"> -->
+								</div>
+							</div>
+							<div class="form-group m-form__group row">
+								<label for="example-text-input" class="col-3 col-form-label">
+									Waktu Selesai 
+								</label>
+								<div class="col-4">
+									<span class="font-print" id="tanggal_pesanan_selesai"> 22/11/19 </span>
+								</div>
+							</div>
+							<div class="form-group m-form__group row">
+								<label for="example-text-input" class="col-3 col-form-label">
+									Tipe Pemabayaran
+								</label>
+								<div class="col-4">
+									<span class="font-print" id="tipe_pembayaran"> Transfer </span>
 								</div>
 							</div>
 						</div>
@@ -172,6 +190,8 @@ <h3 name="no_pesanan" class="header-pesanan-no">
 											</tr>
 										</tbody>
 									</table>
+									* Express : <span id="express">Rp. 30.000</span><br>
+									* Diskon : <span id="diskon">Rp. 10.000</span>
 									<div class="m-datatable__pager m-datatable--paging-loaded clearfix">	
 										<div class="m-datatable__pager-info">
 											<div class="btn-group bootstrap-select m-datatable__pager-size" style="width: 500px; float: right;">
@@ -179,8 +199,8 @@ <h3 name="no_pesanan" class="header-pesanan-no">
 													<span id="subTotal"> Rp. 120.000</span>
 												</p>
 												<p align="right"><b>Down Payment :</b>
-												 	<span id="downPayment"> Rp. 120.000</span>
-												 </p>
+													<span id="downPayment"> Rp. 120.000</span>
+												</p>
 												<p align="right"><b>Sisa Pembayaran :</b>
 													<span id="sisaPembayaran"> Rp. 120.000</span>
 												</p>
@@ -190,8 +210,8 @@ <h3 name="no_pesanan" class="header-pesanan-no">
 											</div>	
 										</div> 
 										<div class="container-ttd-head" >
-                                        	<p align="Center">Customer Service</p>
-                                        </div>
+											<p align="Center">Customer Service</p>
+										</div>
 										<br>
 										<br>
 										<br>
@@ -199,10 +219,10 @@ <h3 name="no_pesanan" class="header-pesanan-no">
 										<br>
 										<br>
 										<br>
-                                        <div class="container-ttd" >
-                                        	<p name="cs_menangani" align="Center">Vega Vatima</p>
-                                        </div>
-	                                </div>
+										<div class="container-ttd" >
+											<p name="cs_menangani" align="Center">Vega Vatima</p>
+										</div>
+									</div>
 									<!--end: Datatable -->
 								</div>
 							</div>
@@ -210,18 +230,18 @@ <h3 name="no_pesanan" class="header-pesanan-no">
 					</div>
 				</div>	
 			</div>
-			</div>
 		</div>
-	</body>
-	<!-- end::Body -->
-	<script src="../assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
-	<script src="../assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
-	<script src="../assets/app/js/dashboard.js" type="text/javascript"></script>
-	<script type="text/javascript">
-			var tbl_invoice = $('#tbl_invoice').mDatatable({
-			data: {
-				saveState: {cookie: false},
-			},
+	</div>
+</body>
+<!-- end::Body -->
+<script src="../assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
+<script src="../assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
+<script src="../assets/app/js/dashboard.js" type="text/javascript"></script>
+<script type="text/javascript">
+	var tbl_invoice = $('#tbl_invoice').mDatatable({
+		data: {
+			saveState: {cookie: false},
+		},
 			// layout definition
 			layout: {
 				theme: 'default', // datatable theme
@@ -229,7 +249,7 @@ <h3 name="no_pesanan" class="header-pesanan-no">
 				scroll: false, // enable/disable datatable scroll both horizontal and vertical when needed.
 				/*max-height: 200,*/ // datatable's body's fixed height
 				footer: false, // display/hide footer
-			
+
 			},
 
 			// column sorting
@@ -239,40 +259,40 @@ <h3 name="no_pesanan" class="header-pesanan-no">
 				input: $('#generalSearch'),
 			},
 			columns: [
-		
-				{
-					field: 'No',
-					textAlign: 'center',
-					width : 50 
-				},
-				{
-					field: 'Pesanan',
-					textAlign: 'center',
-					width :130
-				},
-				{
-					field: 'Ukuran',
-					textAlign: 'center',
-					width:140
-				},
-				{
-					field: 'Finishing',
-					textAlign: 'center',
 
-				},
-				{
-					field: 'Jumlah',
-					textAlign: 'center',
-					width : 100
-					
-				},
-				{
-					field: 'Harga',
-					textAlign: 'center',
-					
-				}
+			{
+				field: 'No',
+				textAlign: 'center',
+				width : 50 
+			},
+			{
+				field: 'Pesanan',
+				textAlign: 'center',
+				width :130
+			},
+			{
+				field: 'Ukuran',
+				textAlign: 'center',
+				width:140
+			},
+			{
+				field: 'Finishing',
+				textAlign: 'center',
+
+			},
+			{
+				field: 'Jumlah',
+				textAlign: 'center',
+				width : 100
+
+			},
+			{
+				field: 'Harga',
+				textAlign: 'center',
+
+			}
 
 			],
 		});
 	</script>
-</html>
+	</html>
diff --git a/GA/components/base/bahan_baku.html b/GA/components/base/bahan_baku.html
index 7cac23a..a86b84f 100644
--- a/GA/components/base/bahan_baku.html
+++ b/GA/components/base/bahan_baku.html
@@ -12,507 +12,346 @@
 License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
 -->
 <html lang="en" >
-	<!-- begin::Head -->
-	<head>
-		<meta charset="utf-8" />
-		<title>
-			Purchasing | Bahan Baku
-		</title>
-		<meta name="description" content="Latest updates and statistic charts">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-		<!--begin::Web font -->
-		<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
-		<script>
-          WebFont.load({
-            google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
-            active: function() {
-                sessionStorage.fonts = true;
-            }
-          });
-		</script>
-		<!--end::Web font -->
-        <!--begin::Base Styles -->  
-        <!--begin::Page Vendors -->
-		<link href="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
-		<!--end::Page Vendors -->
-		<link href="../../../assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
-		<link href="../../../assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
-		<!-- begin:: Style tambahan -->
-		<link href="../../../assets/demo/default/base/pelangi-style.css" rel="stylesheet" type="text/css">
-		<!-- end:: Style tambahan -->
-		<!--end::Base Styles -->
-		<link rel="shortcut icon" href="../../../assets/demo/default/media/img/logo/favicon.ico" />
-	</head>
-	<!-- end::Head -->
-    <!-- end::Body -->
-	<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
-		<!-- begin:: Page -->
-		<div class="m-grid m-grid--hor m-grid--root m-page">
-			<!-- BEGIN: Header -->
-			<header class="m-grid__item    m-header "  data-minimize-offset="200" data-minimize-mobile-offset="200" >
-				<div class="m-container m-container--fluid m-container--full-height">
-					<div class="m-stack m-stack--ver m-stack--desktop">
-						<!-- BEGIN: Brand -->
-						<div class="m-stack__item m-brand  m-brand--skin-dark ">
-							<div class="m-stack m-stack--ver m-stack--general">
-								<div class="m-stack__item m-stack__item--middle m-brand__logo">
-									<a href="../../index.html" class="m-brand__logo-wrapper">
-										<img alt="" src="../../../assets/demo/default/media/img/logo/logo_default_dark.png"/>
-									</a>
-								</div>
-								<div class="m-stack__item m-stack__item--middle m-brand__tools">
-									<!-- BEGIN: Left Aside Minimize Toggle -->
-									<a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block">
-										<span></span>
-									</a>
-									<!-- END -->
-									<!-- BEGIN: Responsive Aside Left Menu Toggler -->
-									<a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block">
-										<span></span>
-									</a>
-									<!-- END -->
-									<!-- BEGIN: Responsive Header Menu Toggler -->
-									<a id="m_aside_header_menu_mobile_toggle" href="javascript:;" class="m-brand__icon m-brand__toggler m--visible-tablet-and-mobile-inline-block">
-										<span></span>
-									</a>
-									<!-- END -->
-									<!-- BEGIN: Topbar Toggler -->
-									<a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block">
-										<i class="flaticon-more"></i>
-									</a>
-									<!-- BEGIN: Topbar Toggler -->
-								</div>
-							</div>
-						</div>
-						<!-- END: Brand -->
-						<div class="m-stack__item m-stack__item--fluid m-header-head" id="m_header_nav">
-							<!-- BEGIN: Horizontal Menu -->
-							<div id="m_header_menu" class="m-header-menu m-aside-header-menu-mobile m-aside-header-menu-mobile--offcanvas  m-header-menu--skin-light m-header-menu--submenu-skin-light m-aside-header-menu-mobile--skin-dark m-aside-header-menu-mobile--submenu-skin-dark "  >
-								<img style="display: inline; float: left; height: inherit; width: auto" src="../../../assets/demo/default/media/img/misc/purchasing_2.png">
-							</div>
-							<!-- END: Horizontal Menu -->								
-							<!-- BEGIN: Topbar -->
-							<div id="m_header_topbar" class="m-topbar  m-stack m-stack--ver m-stack--general">
-								<div class="m-stack__item m-topbar__nav-wrapper">
-									<ul class="m-topbar__nav m-nav m-nav--inline">
-										<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
-											<div class="user_wrapper">
-												<p style="margin-bottom: 0px"><i class="fa fa-user"> </i> Ahmad Rifaldi</p>
-											</div>
-										</li>
-										<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
-											<div class="logout_wrapper">
-												<a margin-right: 10px;" href="snippets/pages/user/login-1.html" class="btn m-btn--pill    btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder">
-													Logout
-												</a>
-											</div>
-										</li>
-									</ul>
-								</div>
-							</div>
-							<!-- END: Topbar -->
-						</div>
-					</div>
-				</div>
-			</header>
-			<!-- END: Header -->		
-			<!-- begin::Body -->
-			<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
-				<!-- BEGIN: Left Aside -->
-				<button class="m-aside-left-close  m-aside-left-close--skin-dark " id="m_aside_left_close_btn">
-					<i class="la la-close"></i>
-				</button>
-				<div id="m_aside_left" class="m-grid__item	m-aside-left  m-aside-left--skin-dark ">
-						<!-- BEGIN: Aside Menu -->
-					<div id="m_ver_menu" class="m-aside-menu  m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark" data-menu-vertical="true" data-menu-scrollable="false" data-menu-dropdown-timeout="500" >
-						<ul class="m-menu__nav  m-menu__nav--dropdown-submenu-arrow ">
-							<!-- DASHBOARD -->
-							<li class="m-menu__item" aria-haspopup="true" >
-								<a  href="../../index.html" class="m-menu__link ">
-									<i class="m-menu__link-icon flaticon-line-graph"></i>
-									<span class="m-menu__link-title">
-										<span class="m-menu__link-wrap">
-											<span class="m-menu__link-text">
-												Dashboard
-											</span>
-										</span>
-									</span>
-								</a>
-							</li>
-							<!-- Bahan Baku -->
-							<li class="m-menu__item m-menu__item--active" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="bahan_baku.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon flaticon-graphic-2"></i>
-									<span class="m-menu__link-text">
-										Bahan Baku
-									</span>
-								</a>
-							</li>
-							<!-- Master Data -->
-							<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="master_data.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon fa fa-database"></i>
-									<span class="m-menu__link-text">
-										Master Data
-									</span>
+<!-- begin::Head -->
+<head>
+	<meta charset="utf-8" />
+	<title>
+		Purchasing | Bahan Baku
+	</title>
+	<meta name="description" content="Latest updates and statistic charts">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<!--begin::Web font -->
+	<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
+	<script>
+		WebFont.load({
+			google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
+			active: function() {
+				sessionStorage.fonts = true;
+			}
+		});
+	</script>
+	<!--end::Web font -->
+	<!--begin::Base Styles -->  
+	<!--begin::Page Vendors -->
+	<link href="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
+	<!--end::Page Vendors -->
+	<link href="../../../assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
+	<link href="../../../assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
+	<!-- begin:: Style tambahan -->
+	<link href="../../../assets/demo/default/base/pelangi-style.css" rel="stylesheet" type="text/css">
+	<!-- end:: Style tambahan -->
+	<!--end::Base Styles -->
+	<link rel="shortcut icon" href="../../../assets/demo/default/media/img/logo/favicon.ico" />
+</head>
+<!-- end::Head -->
+<!-- end::Body -->
+<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
+	<!-- begin:: Page -->
+	<div class="m-grid m-grid--hor m-grid--root m-page">
+		<!-- BEGIN: Header -->
+		<header class="m-grid__item    m-header "  data-minimize-offset="200" data-minimize-mobile-offset="200" >
+			<div class="m-container m-container--fluid m-container--full-height">
+				<div class="m-stack m-stack--ver m-stack--desktop">
+					<!-- BEGIN: Brand -->
+					<div class="m-stack__item m-brand  m-brand--skin-dark ">
+						<div class="m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-stack__item--middle m-brand__logo">
+								<a href="../../index.html" class="m-brand__logo-wrapper">
+									<img alt="" src="../../../assets/demo/default/media/img/logo/logo_default_dark.png"/>
 								</a>
-							</li>
-							<!-- Relasi -->
-							<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="relasi.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon fa fa-code-fork"></i>
-									<span class="m-menu__link-text">
-										Relasi
-									</span>
+							</div>
+							<div class="m-stack__item m-stack__item--middle m-brand__tools">
+								<!-- BEGIN: Left Aside Minimize Toggle -->
+								<a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block">
+									<span></span>
 								</a>
-							</li>
-							<!-- Harga -->
-							<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="harga.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon fa 	fa-calculator"></i>
-									<span class="m-menu__link-text">
-										Harga
-									</span>
+								<!-- END -->
+								<!-- BEGIN: Responsive Aside Left Menu Toggler -->
+								<a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block">
+									<span></span>
 								</a>
-							</li>
-                            <!-- KEHADIRAN -->
-							<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="kehadiran.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon fa fa-user-o"></i>
-									<span class="m-menu__link-text">
-										Kehadiran
-									</span>
+								<!-- END -->
+								<!-- BEGIN: Responsive Header Menu Toggler -->
+								<a id="m_aside_header_menu_mobile_toggle" href="javascript:;" class="m-brand__icon m-brand__toggler m--visible-tablet-and-mobile-inline-block">
+									<span></span>
 								</a>
-							</li>
-								<!-- Settings -->
-							<li class="m-menu__item" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="settings.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon fa fa-gear"></i>
-									<span class="m-menu__link-text">
-										Pengaturan
-									</span>
+								<!-- END -->
+								<!-- BEGIN: Topbar Toggler -->
+								<a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block">
+									<i class="flaticon-more"></i>
 								</a>
-							</li>
-						</ul>
+								<!-- BEGIN: Topbar Toggler -->
+							</div>
+						</div>
 					</div>
-				</div>
-				<!-- END: Left Aside -->
-				<div class="m-grid__item m-grid__item--fluid m-wrapper">
-					<!-- BEGIN: Subheader -->
-					<div class="m-subheader ">
-						<div class="d-flex align-items-center">
-							<div class="mr-auto">
-								<h3 class="m-subheader__title m-subheader__title--separator">
-									Bahan Baku
-								</h3>
-								<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
-									<li class="m-nav__item m-nav__item--home">
-										<a href="../../index.html" class="m-nav__link m-nav__link--icon">
-											<i class="m-nav__link-icon la la-home"></i>
-										</a>
+					<!-- END: Brand -->
+					<div class="m-stack__item m-stack__item--fluid m-header-head" id="m_header_nav">
+						<!-- BEGIN: Horizontal Menu -->
+						<div id="m_header_menu" class="m-header-menu m-aside-header-menu-mobile m-aside-header-menu-mobile--offcanvas  m-header-menu--skin-light m-header-menu--submenu-skin-light m-aside-header-menu-mobile--skin-dark m-aside-header-menu-mobile--submenu-skin-dark "  >
+							<img style="display: inline; float: left; height: inherit; width: auto" src="../../../assets/demo/default/media/img/misc/purchasing_2.png">
+						</div>
+						<!-- END: Horizontal Menu -->								
+						<!-- BEGIN: Topbar -->
+						<div id="m_header_topbar" class="m-topbar  m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-topbar__nav-wrapper">
+								<ul class="m-topbar__nav m-nav m-nav--inline">
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="user_wrapper">
+											<p style="margin-bottom: 0px"><i class="fa fa-user"> </i> Ahmad Rifaldi</p>
+										</div>
+									</li>
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="logout_wrapper">
+											<a margin-right: 10px;" href="snippets/pages/user/login-1.html" class="btn m-btn--pill    btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder">
+												Logout
+											</a>
+										</div>
 									</li>
 								</ul>
-								<button type="button" class="btn btn-primary btn-tambahPembelian" data-toggle="modal" data-target="#myModal">
-									Tambah Pembelian
-								</button>
-								<button type="button" class="btn btn-primary btn-tambahbahan" data-toggle="modal" data-target="#myModalbahan">
-									Tambah Bahan Baku
-								</button>
 							</div>
 						</div>
+						<!-- END: Topbar -->
+					</div>
+				</div>
+			</div>
+		</header>
+		<!-- END: Header -->		
+		<!-- begin::Body -->
+		<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
+			<!-- BEGIN: Left Aside -->
+			<button class="m-aside-left-close  m-aside-left-close--skin-dark " id="m_aside_left_close_btn">
+				<i class="la la-close"></i>
+			</button>
+			<div id="m_aside_left" class="m-grid__item	m-aside-left  m-aside-left--skin-dark ">
+				<!-- BEGIN: Aside Menu -->
+				<div id="m_ver_menu" class="m-aside-menu  m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark" data-menu-vertical="true" data-menu-scrollable="false" data-menu-dropdown-timeout="500" >
+					<ul class="m-menu__nav  m-menu__nav--dropdown-submenu-arrow ">
+						<!-- DASHBOARD -->
+						<li class="m-menu__item" aria-haspopup="true" >
+							<a  href="../../index.html" class="m-menu__link ">
+								<i class="m-menu__link-icon flaticon-line-graph"></i>
+								<span class="m-menu__link-title">
+									<span class="m-menu__link-wrap">
+										<span class="m-menu__link-text">
+											Dashboard
+										</span>
+									</span>
+								</span>
+							</a>
+						</li>
+						<!-- Bahan Baku -->
+						<li class="m-menu__item m-menu__item--active" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="bahan_baku.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon flaticon-graphic-2"></i>
+								<span class="m-menu__link-text">
+									Bahan Baku
+								</span>
+							</a>
+						</li>
+						<!-- Master Data -->
+						<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="master_data.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon fa fa-database"></i>
+								<span class="m-menu__link-text">
+									Master Data
+								</span>
+							</a>
+						</li>
+						<!-- Relasi -->
+						<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="relasi.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon fa fa-code-fork"></i>
+								<span class="m-menu__link-text">
+									Relasi
+								</span>
+							</a>
+						</li>
+						<!-- Harga -->
+						<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="harga.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon fa 	fa-calculator"></i>
+								<span class="m-menu__link-text">
+									Harga
+								</span>
+							</a>
+						</li>
+						<!-- KEHADIRAN -->
+						<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="kehadiran.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon fa fa-user-o"></i>
+								<span class="m-menu__link-text">
+									Kehadiran
+								</span>
+							</a>
+						</li>
+						<!-- Settings -->
+						<li class="m-menu__item" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="settings.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon fa fa-gear"></i>
+								<span class="m-menu__link-text">
+									Pengaturan
+								</span>
+							</a>
+						</li>
+					</ul>
+				</div>
+			</div>
+			<!-- END: Left Aside -->
+			<div class="m-grid__item m-grid__item--fluid m-wrapper">
+				<!-- BEGIN: Subheader -->
+				<div class="m-subheader ">
+					<div class="d-flex align-items-center">
+						<div class="mr-auto">
+							<h3 class="m-subheader__title m-subheader__title--separator">
+								Bahan Baku
+							</h3>
+							<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
+								<li class="m-nav__item m-nav__item--home">
+									<a href="../../index.html" class="m-nav__link m-nav__link--icon">
+										<i class="m-nav__link-icon la la-home"></i>
+									</a>
+								</li>
+							</ul>
+						</div>
 					</div>
-					<!-- END: Subheader -->
-					<div class="m-content">
-                    	<div class="row"> 
-                    		<div class="col-xl-12">
-	                    		<div class="m-portlet m-portlet--mobile">
-									<div class="m-portlet__body">
-										<!--begin: Search Form -->
-										<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
-											<div class="row align-items-center">
-												<div class="col-md-12">
-													<div class="form-group m-form__group row align-items-center">
-														<div class="col-md-4">
-															<div class="m-portlet__head-title">
-																<h3 class="m-portlet__head-text">
-																	<i style="font-size: 1.7rem" class="la la-th"> </i>  Table Bahan Baku
-																</h3>
-															</div>
+				</div>
+				<!-- END: Subheader -->
+				<div class="m-content">
+					<div class="row"> 
+						<div class="col-xl-12">
+							<div class="m-portlet m-portlet--mobile">
+								<div class="m-portlet__body">
+									<!--begin: Search Form -->
+									<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
+										<div class="row align-items-center">
+											<div class="col-md-12">
+												<div class="form-group m-form__group row align-items-center">
+													<div class="col-md-4">
+														<div class="m-portlet__head-title">
+															<h3 class="m-portlet__head-text">
+																<i style="font-size: 1.7rem" class="la la-th"> </i>  Table Bahan Baku
+															</h3>
 														</div>
-														<div class="col-md-4 offset-md-4">
-															<div class="m-input-icon m-input-icon--left">
-																<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="generalSearch">
-																<span class="m-input-icon__icon m-input-icon__icon--left">
-																	<span>
-																		<i class="la la-search"></i>
-																	</span>
+													</div>
+													<div class="col-md-4 offset-md-4">
+														<div class="m-input-icon m-input-icon--left">
+															<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="generalSearch">
+															<span class="m-input-icon__icon m-input-icon__icon--left">
+																<span>
+																	<i class="la la-search"></i>
 																</span>
-															</div>
+															</span>
 														</div>
 													</div>
 												</div>
 											</div>
 										</div>
-										<!--end: Search Form -->
-										<!--begin: Datatable -->
-										<!-- <div class="m_datatable" id="local_data"></div> -->
-										<table class="table" id="tbl_pesanan_lunas">
-											<thead>
-												<tr>
-													<th>No</th>
-													<th>Nama Bahan</th>
-													<th>Sisa Bahan</th>
-													<th>Pemakaian Bulanan</th>
-													<th>Aksi</th>
-												</tr>
-											</thead>
-											<tbody>
-												<tr>
-													<td>1</td>
-													<td>Vinyl</td>
-													<td>230 Lembar</td>
-													<td>59 Lembar</td>
-													<td>
-														<a href="bahan_baku_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
-													</td>
-												</tr>
-												<tr>
-													<td>2</td>
-													<td>Korea</td>
-													<td>230 Lembar</td>
-													<td>59 Lembar</td>
-													<td>
-														<a href="bahan_baku_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
-													</td>
-												</tr>
-												<tr>
-													<td>3</td>
-													<td>Vinyl</td>
-													<td>230 Lembar</td>
-													<td>59 Lembar</td>
-													<td>
-														<a href="bahan_baku_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
-													</td>
-												</tr>
-												<tr>
-													<td>4</td>
-													<td>Vinyl</td>
-													<td>230 Lembar</td>
-													<td>59 Lembar</td>
-													<td>
-														<a href="bahan_baku_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
-													</td>
-												</tr>
-												<tr>
-													<td>5</td>
-													<td>Vinyl</td>
-													<td>230 Lembar</td>
-													<td>59 Lembar</td>
-													<td>
-														<a href="bahan_baku_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
-													</td>
-												</tr>
-											</tbody>
-										</table>
-										<!--end: Datatable -->
 									</div>
+									<!--end: Search Form -->
+									<!--begin: Datatable -->
+									<!-- <div class="m_datatable" id="local_data"></div> -->
+									<table class="table" id="tbl_pesanan_lunas">
+										<thead>
+											<tr>
+												<th>No</th>
+												<th>Nama Bahan</th>
+												<th>Sisa Bahan</th>
+												<th>Pemakaian Bulanan</th>
+												<th>Aksi</th>
+											</tr>
+										</thead>
+										<tbody>
+											<tr>
+												<td>1</td>
+												<td>Vinyl</td>
+												<td>230 Lembar</td>
+												<td>59 Lembar</td>
+												<td>
+													<a href="bahan_baku_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
+												</td>
+											</tr>
+											<tr>
+												<td>2</td>
+												<td>Korea</td>
+												<td>230 Lembar</td>
+												<td>59 Lembar</td>
+												<td>
+													<a href="bahan_baku_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
+												</td>
+											</tr>
+											<tr>
+												<td>3</td>
+												<td>Vinyl</td>
+												<td>230 Lembar</td>
+												<td>59 Lembar</td>
+												<td>
+													<a href="bahan_baku_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
+												</td>
+											</tr>
+											<tr>
+												<td>4</td>
+												<td>Vinyl</td>
+												<td>230 Lembar</td>
+												<td>59 Lembar</td>
+												<td>
+													<a href="bahan_baku_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
+												</td>
+											</tr>
+											<tr>
+												<td>5</td>
+												<td>Vinyl</td>
+												<td>230 Lembar</td>
+												<td>59 Lembar</td>
+												<td>
+													<a href="bahan_baku_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
+												</td>
+											</tr>
+										</tbody>
+									</table>
+									<!--end: Datatable -->
 								</div>
-	                    	</div>
-                    	</div>	
-					</div>
-				</div>
-			</div>
-			<!-- end:: Body -->
-			<!-- begin::Footer -->
-			<footer class="m-grid__item		m-footer ">
-				<div class="m-container m-container--fluid m-container--full-height m-page__container">
-					<div class="m-stack m-stack--flex-tablet-and-mobile m-stack--ver m-stack--desktop">
-						<div class="m-stack__item m-stack__item--left m-stack__item--middle m-stack__item--last">
-							<span class="m-footer__copyright">
-								Upa'na Studio
-							</span>
-						</div>
-						
-					</div>
-				</div>
-				<!-- MODAL -->
-				<div class="modal fade" id="myModal" role="dialog">
-					<div class="modal-dialog">
-					    <!-- Modal Konten -->
-					    <div class="modal-content">
-					    	<div class="modal-header">
-								<h5 style="font-weight: 500" class="modal-title" id="exampleModalLabel">
-									Pembelian Bahan
-								</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="m-portlet__body">
-									<div class="m-form__section m-form__section--first">
-										<div class="form-group m-form__group">
-							      			<label for="exampleSelect1">
-								   				 Tipe Bahan
-							     			 </label>
-							      			<select class="form-control m-input m-input--solid" id="exampleSelect1">
-								   			<option>
-									  			Bahan 1
-								    		</option>
-								    		<option>
-									 			Bahan 2
-								    		</option>
-								    		<option>
-									  			Bahan 3
-								    		</option>
-								    		<option>
-									 	 		Bahan 4
-								    		</option>
-								    		<option>
-									  			Bahan 5
-								    		</option>
-							      			</select>
-						        		</div>
-										<div class="form-group m-form__group">
-											<div class="form-group m-form__group row">
-							          			<label for="example-text-input" class="col-2 col-form-label">
-								        		Jumlah
-							          			</label>
-							          			<div class="col-10">
-								      				<input class="form-control m-input" type="text" value="" placeholder="masukkan jumlah (lembar)" id="example-text-input">
-							          			</div>
-						            		</div>
-						            		<div class="form-group m-form__group row">
-							         			 <label for="example-text-input" class="col-2 col-form-label">
-								        			Harga
-							         		 	</label>
-							          			<div class="col-10">
-								      				<input class="form-control m-input" type="text" value="" placeholder="masukkan Harga" id="example-text-input">
-							          			</div>
-						            		</div>
-						            		<div class="form-group m-form__group row">
-							          			<label for="example-text-input" class="col-2 col-form-label">
-								        			Ukuran
-							          			</label>
-							         			<div class="col-10">
-								      				<input class="form-control m-input" type="text" value="" placeholder="masukkan Ukuran Kertas" id="example-text-input">
-							          			</div>
-						            		</div>
-										</div>
-									</div>
-								</div>
-					    	</div>  
-					     	<div class="modal-footer">
-					        	<button type="submit" class="btn btn-primary btn-tambahPembelian-modal">
-									Tambah Pembelian
-						         </button>
-					        	<button type="button" class="btn btn-default" data-dismiss="modal">	Close
-					        	</button>
-					     	</div>
-					    </div>
-					</div>
+						</div>
+					</div>	
 				</div>
-				<div class="modal fade" id="myModalbahan" role="dialog">
-					<div class="modal-dialog">
-					     <!-- Modal Konten -->
-					      <div class="modal-content">
-					      		<div class="modal-header">
-									<h5 style="font-weight: 500" class="modal-title" id="exampleModalLabel">
-										Penambahan Bahan 
-									</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="m-portlet__body">
-										<div class="m-form__section m-form__section--first">
-											<div class="form-group m-form__group">
-												<div class="form-group m-form__group row">
-							          				<label for="example-text-input" class="col-4 col-form-label">
-								       					 Nama Bahan
-							          				</label>
-							          				<div class="col-8">
-								      					<input class="form-control m-input" type="text" value="" placeholder="masukkan nama bahan" id="example-text-input">
-							          				</div>
-						            			</div>
-						            			<div class="form-group m-form__group row">
-							          				<label for="example-text-input" class="col-4 col-form-label">
-								        				Jumlah Bahan
-							          				</label>
-							          				<div class="col-8">
-								      					<input class="form-control m-input" type="text" value="" placeholder="masukkan jumlah bahan" id="example-text-input">
-							          				</div>
-						            			</div>
-						            			<div class="m-form__group form-group">
-													<label for="">
-														Tipe Pesanan
-													</label>
-													<div class="m-checkbox-list">
-														<label class="m-checkbox">
-															<input type="checkbox">
-																Spanduk
-															<span></span>
-														</label>
-														<label class="m-checkbox">
-															<input type="checkbox" >
-																Brosur
-															<span></span>
-														</label>
-														<label class="m-checkbox">
-															<input type="checkbox">
-																Kartu Nama
-															<span></span>
-														</label>
-														<label class="m-checkbox">
-															<input type="checkbox" >
-																Kemasan
-															<span></span>
-														</label>
-													</div>
-												</div>
-						 					</div>
-										</div>
-									</div>
-					    		</div>
-					     		<div class="modal-footer">
-					     			<button type="submit" class="btn btn-primary btn-tambahPembelian-modal">
-									 	Tambah Bahan
-						         	</button>
-					         		<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-					     		</div>
-					      </div>
+			</div>
+		</div>
+		<!-- end:: Body -->
+		<!-- begin::Footer -->
+		<footer class="m-grid__item		m-footer ">
+			<div class="m-container m-container--fluid m-container--full-height m-page__container">
+				<div class="m-stack m-stack--flex-tablet-and-mobile m-stack--ver m-stack--desktop">
+					<div class="m-stack__item m-stack__item--left m-stack__item--middle m-stack__item--last">
+						<span class="m-footer__copyright">
+							Upa'na Studio
+						</span>
 					</div>
 				</div>
-				<!-- END OF MODAL -->
-			</footer>
-			<!-- end::Footer -->
-		</div>
-		<!-- end:: Page -->		    
-	    <!-- begin::Scroll Top -->
-		<div class="m-scroll-top m-scroll-top--skin-top" data-toggle="m-scroll-top" data-scroll-offset="500" data-scroll-speed="300">
-			<i class="la la-arrow-up"></i>
-		</div>
-		<!-- end::Scroll Top -->		    
-			
-    	<!--begin::Base Scripts -->
-		<script src="../../../assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
-		<script src="../../../assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
-		<!--end::Base Scripts -->   
-        <!--begin::Page Vendors -->
-		<script src="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.js" type="text/javascript"></script>
-		<!--end::Page Vendors -->  
-        <!--begin::Page Snippets -->
-		<script src="../../../assets/app/js/dashboard.js" type="text/javascript"></script>
-		<script src="../../../assets/demo/default/custom/components/datatables/base/data-local.js" type="text/javascript"></script>
-		<!--end::Page Snippets -->
-		<script type="text/javascript">
-			var tbl_pesanan_lunas = $('#tbl_pesanan_lunas').mDatatable({
+			</div>
+		</footer>
+		<!-- end::Footer -->
+	</div>
+	<!-- end:: Page -->		    
+	<!-- begin::Scroll Top -->
+	<div class="m-scroll-top m-scroll-top--skin-top" data-toggle="m-scroll-top" data-scroll-offset="500" data-scroll-speed="300">
+		<i class="la la-arrow-up"></i>
+	</div>
+	<!-- end::Scroll Top -->		    
+
+	<!--begin::Base Scripts -->
+	<script src="../../../assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
+	<script src="../../../assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
+	<!--end::Base Scripts -->   
+	<!--begin::Page Vendors -->
+	<script src="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.js" type="text/javascript"></script>
+	<!--end::Page Vendors -->  
+	<!--begin::Page Snippets -->
+	<script src="../../../assets/app/js/dashboard.js" type="text/javascript"></script>
+	<script src="../../../assets/demo/default/custom/components/datatables/base/data-local.js" type="text/javascript"></script>
+	<!--end::Page Snippets -->
+	<script type="text/javascript">
+		var tbl_pesanan_lunas = $('#tbl_pesanan_lunas').mDatatable({
 			data: {
 				saveState: {cookie: false},
 				/*type: 'remote',
@@ -535,7 +374,7 @@ <h5 style="font-weight: 500" class="modal-title" id="exampleModalLabel">
 			        serverPaging: true,
 			        serverFiltering: true,
 			        serverSorting: true,*/
-			},
+			    },
 			// layout definition
 			layout: {
 				theme: 'default', // datatable theme
@@ -552,34 +391,34 @@ <h5 style="font-weight: 500" class="modal-title" id="exampleModalLabel">
 			},
 			columns: [
 
-				{
-					field: 'No',
-					textAlign: 'center',
-					width: 90
-				},
-				{
-					field: 'Nama Bahan',
-					textAlign: 'center',
-					width: 130
-				},
-				{
-					field: 'Sisa Bahan',
-					textAlign: 'center',
-					width: 130
-				},
-				{
-					field: 'Pemakaian Bulanan',
-					textAlign: 'center',
-					width: 140
-				},
-				{
-					field: 'Aksi',
-					textAlign: 'center',
-					width: 150
-				}
+			{
+				field: 'No',
+				textAlign: 'center',
+				width: 90
+			},
+			{
+				field: 'Nama Bahan',
+				textAlign: 'center',
+				width: 130
+			},
+			{
+				field: 'Sisa Bahan',
+				textAlign: 'center',
+				width: 130
+			},
+			{
+				field: 'Pemakaian Bulanan',
+				textAlign: 'center',
+				width: 140
+			},
+			{
+				field: 'Aksi',
+				textAlign: 'center',
+				width: 150
+			}
 			],
 		});
-		</script>
-	</body>
-	<!-- end::Body -->
+	</script>
+</body>
+<!-- end::Body -->
 </html>
diff --git a/GA/components/base/bahan_baku_detail.html b/GA/components/base/bahan_baku_detail.html
index c4a6ca3..ff8f7c4 100644
--- a/GA/components/base/bahan_baku_detail.html
+++ b/GA/components/base/bahan_baku_detail.html
@@ -12,374 +12,443 @@
 License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
 -->
 <html lang="en" >
-	<!-- begin::Head -->
-	<head>
-		<meta charset="utf-8" />
-		<title>
-			Purchasing | Bahan Baku - Detail
-		</title>
-		<meta name="description" content="Latest updates and statistic charts">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-		<!--begin::Web font -->
-		<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
-		<script>
-          WebFont.load({
-            google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
-            active: function() {
-                sessionStorage.fonts = true;
-            }
-          });
-		</script>
-		<!--end::Web font -->
-        <!--begin::Base Styles -->  
-        <!--begin::Page Vendors -->
-		<link href="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
-		<!--end::Page Vendors -->
-		<link href="../../../assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
-		<link href="../../../assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
-		<!-- begin:: Style tambahan -->
-		<link href="../../../assets/demo/default/base/pelangi-style.css" rel="stylesheet" type="text/css">
-		<!-- end:: Style tambahan -->
-		<!--end::Base Styles -->
-		<link rel="shortcut icon" href="../../../assets/demo/default/media/img/logo/favicon.ico" />
-	</head>
-	<!-- end::Head -->
-    <!-- end::Body -->
-	<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
-		<!-- begin:: Page -->
-		<div class="m-grid m-grid--hor m-grid--root m-page">
-			<!-- BEGIN: Header -->
-			<header class="m-grid__item    m-header "  data-minimize-offset="200" data-minimize-mobile-offset="200" >
-				<div class="m-container m-container--fluid m-container--full-height">
-					<div class="m-stack m-stack--ver m-stack--desktop">
-						<!-- BEGIN: Brand -->
-						<div class="m-stack__item m-brand  m-brand--skin-dark ">
-							<div class="m-stack m-stack--ver m-stack--general">
-								<div class="m-stack__item m-stack__item--middle m-brand__logo">
-									<a href="../../index.html" class="m-brand__logo-wrapper">
-										<img alt="" src="../../../assets/demo/default/media/img/logo/logo_default_dark.png"/>
-									</a>
-								</div>
-								<div class="m-stack__item m-stack__item--middle m-brand__tools">
-									<!-- BEGIN: Left Aside Minimize Toggle -->
-									<a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block">
-										<span></span>
-									</a>
-									<!-- END -->
-									<!-- BEGIN: Responsive Aside Left Menu Toggler -->
-									<a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block">
-										<span></span>
-									</a>
-									<!-- END -->
-									<!-- BEGIN: Responsive Header Menu Toggler -->
-									<a id="m_aside_header_menu_mobile_toggle" href="javascript:;" class="m-brand__icon m-brand__toggler m--visible-tablet-and-mobile-inline-block">
-										<span></span>
-									</a>
-									<!-- END -->
-									<!-- BEGIN: Topbar Toggler -->
-									<a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block">
-										<i class="flaticon-more"></i>
-									</a>
-									<!-- BEGIN: Topbar Toggler -->
-								</div>
-							</div>
-						</div>
-						<!-- END: Brand -->
-						<div class="m-stack__item m-stack__item--fluid m-header-head" id="m_header_nav">
-							<!-- BEGIN: Horizontal Menu -->
-							<div id="m_header_menu" class="m-header-menu m-aside-header-menu-mobile m-aside-header-menu-mobile--offcanvas  m-header-menu--skin-light m-header-menu--submenu-skin-light m-aside-header-menu-mobile--skin-dark m-aside-header-menu-mobile--submenu-skin-dark "  >
-								<img style="display: inline; float: left; height: inherit; width: auto" src="../../../assets/demo/default/media/img/misc/purchasing_2.png">
-							</div>
-							<!-- END: Horizontal Menu -->								
-							<!-- BEGIN: Topbar -->
-							<div id="m_header_topbar" class="m-topbar  m-stack m-stack--ver m-stack--general">
-								<div class="m-stack__item m-topbar__nav-wrapper">
-									<ul class="m-topbar__nav m-nav m-nav--inline">
-										<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
-											<div class="user_wrapper">
-												<p style="margin-bottom: 0px"><i class="fa fa-user"> </i> Ahmad Rifaldi</p>
-											</div>
-										</li>
-										<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
-											<div class="logout_wrapper">
-												<a margin-right: 10px;" href="snippets/pages/user/login-1.html" class="btn m-btn--pill    btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder">
-													Logout
-												</a>
-											</div>
-										</li>
-									</ul>
-								</div>
-							</div>
-							<!-- END: Topbar -->
-						</div>
-					</div>
-				</div>
-			</header>
-			<!-- END: Header -->		
-			<!-- begin::Body -->
-			<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
-				<!-- BEGIN: Left Aside -->
-				<button class="m-aside-left-close  m-aside-left-close--skin-dark " id="m_aside_left_close_btn">
-					<i class="la la-close"></i>
-				</button>
-				<div id="m_aside_left" class="m-grid__item	m-aside-left  m-aside-left--skin-dark ">
-					<!-- BEGIN: Aside Menu -->
-					<div id="m_ver_menu" class="m-aside-menu  m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark" data-menu-vertical="true" data-menu-scrollable="false" data-menu-dropdown-timeout="500" >
-						<ul class="m-menu__nav  m-menu__nav--dropdown-submenu-arrow ">
-							<!-- DASHBOARD -->
-							<li class="m-menu__item" aria-haspopup="true" >
-								<a  href="../../index.html" class="m-menu__link ">
-									<i class="m-menu__link-icon flaticon-line-graph"></i>
-									<span class="m-menu__link-title">
-										<span class="m-menu__link-wrap">
-											<span class="m-menu__link-text">
-												Dashboard
-											</span>
-										</span>
-									</span>
-								</a>
-							</li>
-							<!-- Bahan Baku -->
-							<li class="m-menu__item m-menu__item--active" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="bahan_baku.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon flaticon-graphic-2"></i>
-									<span class="m-menu__link-text">
-										Bahan Baku
-									</span>
-								</a>
-							</li>
-							<!-- Master Data -->
-							<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="master_data.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon fa fa-database"></i>
-									<span class="m-menu__link-text">
-										Master Data
-									</span>
+<!-- begin::Head -->
+<head>
+	<meta charset="utf-8" />
+	<title>
+		Purchasing | Bahan Baku - Detail
+	</title>
+	<meta name="description" content="Latest updates and statistic charts">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<!--begin::Web font -->
+	<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
+	<script>
+		WebFont.load({
+			google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
+			active: function() {
+				sessionStorage.fonts = true;
+			}
+		});
+	</script>
+	<!--end::Web font -->
+	<!--begin::Base Styles -->  
+	<!--begin::Page Vendors -->
+	<link href="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
+	<!--end::Page Vendors -->
+	<link href="../../../assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
+	<link href="../../../assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
+	<!-- begin:: Style tambahan -->
+	<link href="../../../assets/demo/default/base/pelangi-style.css" rel="stylesheet" type="text/css">
+	<!-- end:: Style tambahan -->
+	<!--end::Base Styles -->
+	<link rel="shortcut icon" href="../../../assets/demo/default/media/img/logo/favicon.ico" />
+</head>
+<!-- end::Head -->
+<!-- end::Body -->
+<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
+	<!-- begin:: Page -->
+	<div class="m-grid m-grid--hor m-grid--root m-page">
+		<!-- BEGIN: Header -->
+		<header class="m-grid__item    m-header "  data-minimize-offset="200" data-minimize-mobile-offset="200" >
+			<div class="m-container m-container--fluid m-container--full-height">
+				<div class="m-stack m-stack--ver m-stack--desktop">
+					<!-- BEGIN: Brand -->
+					<div class="m-stack__item m-brand  m-brand--skin-dark ">
+						<div class="m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-stack__item--middle m-brand__logo">
+								<a href="../../index.html" class="m-brand__logo-wrapper">
+									<img alt="" src="../../../assets/demo/default/media/img/logo/logo_default_dark.png"/>
 								</a>
-							</li>
-							<!-- Relasi -->
-							<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="relasi.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon fa fa-code-fork"></i>
-									<span class="m-menu__link-text">
-										Relasi
-									</span>
+							</div>
+							<div class="m-stack__item m-stack__item--middle m-brand__tools">
+								<!-- BEGIN: Left Aside Minimize Toggle -->
+								<a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block">
+									<span></span>
 								</a>
-							</li>
-							<!-- Harga -->
-							<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="harga.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon fa 	fa-calculator"></i>
-									<span class="m-menu__link-text">
-										Harga
-									</span>
+								<!-- END -->
+								<!-- BEGIN: Responsive Aside Left Menu Toggler -->
+								<a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block">
+									<span></span>
 								</a>
-							</li>
-                            <!-- KEHADIRAN -->
-							<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="kehadiran.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon fa fa-user-o"></i>
-									<span class="m-menu__link-text">
-										Kehadiran
-									</span>
+								<!-- END -->
+								<!-- BEGIN: Responsive Header Menu Toggler -->
+								<a id="m_aside_header_menu_mobile_toggle" href="javascript:;" class="m-brand__icon m-brand__toggler m--visible-tablet-and-mobile-inline-block">
+									<span></span>
 								</a>
-							</li>
-								<!-- Settings -->
-							<li class="m-menu__item" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="settings.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon fa fa-gear"></i>
-									<span class="m-menu__link-text">
-										Pengaturan
-									</span>
+								<!-- END -->
+								<!-- BEGIN: Topbar Toggler -->
+								<a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block">
+									<i class="flaticon-more"></i>
 								</a>
-							</li>
-						</ul>
+								<!-- BEGIN: Topbar Toggler -->
+							</div>
+						</div>
 					</div>
-					<!-- END: Aside Menu -->
-				</div>
-				<!-- END: Left Aside -->
-				<div class="m-grid__item m-grid__item--fluid m-wrapper">
-					<!-- BEGIN: Subheader -->
-					<div class="m-subheader ">
-						<div class="d-flex align-items-center">
-							<div class="mr-auto">
-								<h3 class="m-subheader__title m-subheader__title--separator">
-									Bahan Baku
-								</h3>
-								<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
-									<li class="m-nav__item m-nav__item--home">
-										<a href="../../index.html" class="m-nav__link m-nav__link--icon">
-											<i class="m-nav__link-icon la la-home"></i>
-										</a>
-									</li>
-									<li class="m-nav__separator">
-										-
-									</li>
-									<li class="m-nav__item">
-										<a href="bahan_baku.html" class="m-nav__link">
-											<span class="m-nav__link-text">
-												Bahan baku
-											</span>
-										</a>
-									</li>
-									<li class="m-nav__separator">
-										-
+					<!-- END: Brand -->
+					<div class="m-stack__item m-stack__item--fluid m-header-head" id="m_header_nav">
+						<!-- BEGIN: Horizontal Menu -->
+						<div id="m_header_menu" class="m-header-menu m-aside-header-menu-mobile m-aside-header-menu-mobile--offcanvas  m-header-menu--skin-light m-header-menu--submenu-skin-light m-aside-header-menu-mobile--skin-dark m-aside-header-menu-mobile--submenu-skin-dark "  >
+							<img style="display: inline; float: left; height: inherit; width: auto" src="../../../assets/demo/default/media/img/misc/purchasing_2.png">
+						</div>
+						<!-- END: Horizontal Menu -->								
+						<!-- BEGIN: Topbar -->
+						<div id="m_header_topbar" class="m-topbar  m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-topbar__nav-wrapper">
+								<ul class="m-topbar__nav m-nav m-nav--inline">
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="user_wrapper">
+											<p style="margin-bottom: 0px"><i class="fa fa-user"> </i> Ahmad Rifaldi</p>
+										</div>
 									</li>
-									<li class="m-nav__item">
-										<a href="bahan_baku_detail.html" class="m-nav__link">
-											<span class="m-nav__link-text">
-												Detail
-											</span>
-										</a>
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="logout_wrapper">
+											<a margin-right: 10px;" href="snippets/pages/user/login-1.html" class="btn m-btn--pill    btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder">
+												Logout
+											</a>
+										</div>
 									</li>
 								</ul>
 							</div>
-							<div>
-								<span class="m-subheader__daterange" id="m_dashboard_daterangepicker">
-									<span class="m-subheader__daterange-label">
-										<span class="m-subheader__daterange-title"></span>
-										<span class="m-subheader__daterange-date m--font-brand"></span>
+						</div>
+						<!-- END: Topbar -->
+					</div>
+				</div>
+			</div>
+		</header>
+		<!-- END: Header -->		
+		<!-- begin::Body -->
+		<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
+			<!-- BEGIN: Left Aside -->
+			<button class="m-aside-left-close  m-aside-left-close--skin-dark " id="m_aside_left_close_btn">
+				<i class="la la-close"></i>
+			</button>
+			<div id="m_aside_left" class="m-grid__item	m-aside-left  m-aside-left--skin-dark ">
+				<!-- BEGIN: Aside Menu -->
+				<div id="m_ver_menu" class="m-aside-menu  m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark" data-menu-vertical="true" data-menu-scrollable="false" data-menu-dropdown-timeout="500" >
+					<ul class="m-menu__nav  m-menu__nav--dropdown-submenu-arrow ">
+						<!-- DASHBOARD -->
+						<li class="m-menu__item" aria-haspopup="true" >
+							<a  href="../../index.html" class="m-menu__link ">
+								<i class="m-menu__link-icon flaticon-line-graph"></i>
+								<span class="m-menu__link-title">
+									<span class="m-menu__link-wrap">
+										<span class="m-menu__link-text">
+											Dashboard
+										</span>
 									</span>
-									<a href="#" class="btn btn-sm btn-brand m-btn m-btn--icon m-btn--icon-only m-btn--custom m-btn--pill">
-										<i class="la la-angle-down"></i>
+								</span>
+							</a>
+						</li>
+						<!-- Bahan Baku -->
+						<li class="m-menu__item m-menu__item--active" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="bahan_baku.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon flaticon-graphic-2"></i>
+								<span class="m-menu__link-text">
+									Bahan Baku
+								</span>
+							</a>
+						</li>
+						<!-- Master Data -->
+						<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="master_data.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon fa fa-database"></i>
+								<span class="m-menu__link-text">
+									Master Data
+								</span>
+							</a>
+						</li>
+						<!-- Relasi -->
+						<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="relasi.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon fa fa-code-fork"></i>
+								<span class="m-menu__link-text">
+									Relasi
+								</span>
+							</a>
+						</li>
+						<!-- Harga -->
+						<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="harga.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon fa 	fa-calculator"></i>
+								<span class="m-menu__link-text">
+									Harga
+								</span>
+							</a>
+						</li>
+						<!-- KEHADIRAN -->
+						<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="kehadiran.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon fa fa-user-o"></i>
+								<span class="m-menu__link-text">
+									Kehadiran
+								</span>
+							</a>
+						</li>
+						<!-- Settings -->
+						<li class="m-menu__item" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="settings.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon fa fa-gear"></i>
+								<span class="m-menu__link-text">
+									Pengaturan
+								</span>
+							</a>
+						</li>
+					</ul>
+				</div>
+				<!-- END: Aside Menu -->
+			</div>
+			<!-- END: Left Aside -->
+			<div class="m-grid__item m-grid__item--fluid m-wrapper">
+				<!-- BEGIN: Subheader -->
+				<div class="m-subheader ">
+					<div class="d-flex align-items-center">
+						<div class="mr-auto">
+							<h3 class="m-subheader__title m-subheader__title--separator">
+								Bahan Baku
+							</h3>
+							<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
+								<li class="m-nav__item m-nav__item--home">
+									<a href="../../index.html" class="m-nav__link m-nav__link--icon">
+										<i class="m-nav__link-icon la la-home"></i>
+									</a>
+								</li>
+								<li class="m-nav__separator">
+									-
+								</li>
+								<li class="m-nav__item">
+									<a href="bahan_baku.html" class="m-nav__link">
+										<span class="m-nav__link-text">
+											Bahan baku
+										</span>
 									</a>
+								</li>
+								<li class="m-nav__separator">
+									-
+								</li>
+								<li class="m-nav__item">
+									<a href="bahan_baku_detail.html" class="m-nav__link">
+										<span class="m-nav__link-text">
+											Detail
+										</span>
+									</a>
+								</li>
+							</ul>
+
+						</div>
+						<div>
+							<span class="m-subheader__daterange" id="m_dashboard_daterangepicker">
+								<span class="m-subheader__daterange-label">
+									<span class="m-subheader__daterange-title"></span>
+									<span class="m-subheader__daterange-date m--font-brand"></span>
 								</span>
-							</div>
+								<a href="#" class="btn btn-sm btn-brand m-btn m-btn--icon m-btn--icon-only m-btn--custom m-btn--pill">
+									<i class="la la-angle-down"></i>
+								</a>
+							</span>
 						</div>
 					</div>
-					
-					<!-- END: Subheader -->
-					<div class="m-content">
-                    	<div class="row">
-                    		<div class="col-xl-12">
-                    			<div class="m-portlet m-portlet--mobile">
-									<div class="m-portlet__body">
-										<!--begin: Search Form -->
-										<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
-											<div class="row align-items-center">
-												<div class="col-md-12">
-													<div class="form-group m-form__group row align-items-center">
-														<div class="col-md-4">
-															<div class="m-portlet__head-title">
-																<h3 style="font-size: 1.5rem" class="m-portlet__head-text">
-																	<i class="flaticon-layers"> </i> Bahan A
-																</h3>
-															</div>
+					<button type="button" class="btn btn-primary btn-tambahPembelian" data-toggle="modal" data-target="#tambah_pembelian">
+						Tambah Pembelian
+					</button>
+				</div>
+
+				<!-- END: Subheader -->
+				<div class="m-content">
+					<div class="row">
+						<div class="col-xl-12">
+							<div class="m-portlet m-portlet--mobile">
+								<div class="m-portlet__body">
+									<!--begin: Search Form -->
+									<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
+										<div class="row align-items-center">
+											<div class="col-md-12">
+												<div class="form-group m-form__group row align-items-center">
+													<div class="col-md-4">
+														<div class="m-portlet__head-title">
+															<h3 style="font-size: 1.5rem" class="m-portlet__head-text">
+																<i class="flaticon-layers"> </i> Bahan A
+															</h3>
 														</div>
-														<div class="col-md-4 offset-md-4">
-															<div class="m-input-icon m-input-icon--left">
-																<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="generalSearch">
-																<span class="m-input-icon__icon m-input-icon__icon--left">
-																	<span>
-																		<i class="la la-search"></i>
-																	</span>
+													</div>
+													<div class="col-md-4 offset-md-4">
+														<div class="m-input-icon m-input-icon--left">
+															<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="generalSearch">
+															<span class="m-input-icon__icon m-input-icon__icon--left">
+																<span>
+																	<i class="la la-search"></i>
 																</span>
-															</div>
+															</span>
 														</div>
 													</div>
 												</div>
 											</div>
 										</div>
-										<!--end: Search Form -->
-										<!--begin: Datatable -->
-										<!-- <div class="m_datatable" id="local_data"></div> -->
-										<table class="table" id="tbl_bahan_baku">
-											<thead>
-												<tr>
-													<th>No</th>
-													<th>Tanggal</th>
-													<th>Status</th>
-													<th>Jumlah</th>
-												</tr>
-											</thead>
-											<tbody>
-												<tr>
-													<td>1</td>
-													<td>20/19/2018</td>
-													<td>
-														<span class="m-badge  m-badge--success m-badge--wide">Pembelian</span>
-													</td>
-													<td>430 Lembar</td>
-												</tr>
-												<tr>
-													<td>2</td>
-													<td>20/19/2018</td>
-													<td>
-														<span class="m-badge  m-badge--danger m-badge--wide">pengeluaran</span>
-													</td>
-													<td>430 Lembar</td>
-												</tr>
-												<tr>
-													<td>3</td>
-													<td>20/19/2018</td>
-													<td>
-														<span class="m-badge  m-badge--success m-badge--wide">Pembelian</span>
-													</td>
-													<td>430 Lembar</td>
-												</tr>
-												<tr>
-													<td>4</td>
-													<td>20/19/2018</td>
-													<td>
-														<span class="m-badge  m-badge--danger m-badge--wide">pengeluaran</span>
-													</td>
-													<td>430 Lembar</td>
-												</tr>
-												<tr>
-													<td>5</td>
-													<td>20/19/2018</td>
-													<td>
-														<span class="m-badge  m-badge--success m-badge--wide">Pembelian</span>
-													</td>
-													<td>430 Lembar</td>
-												</tr>
-
-											</tbody>
-										</table>
-										<!--end: Datatable -->
 									</div>
+									<!--end: Search Form -->
+									<!--begin: Datatable -->
+									<!-- <div class="m_datatable" id="local_data"></div> -->
+									<table class="table" id="tbl_bahan_baku">
+										<thead>
+											<tr>
+												<th>No</th>
+												<th>Tanggal</th>
+												<th>Status</th>
+												<th>Jumlah</th>
+												<th>Total</th>
+											</tr>
+										</thead>
+										<tbody>
+											<tr>
+												<td>1</td>
+												<td>20/19/2018</td>
+												<td>
+													<span class="m-badge  m-badge--success m-badge--wide">Pembelian</span>
+												</td>
+												<td>430 Lembar</td>
+												<td>Rp3.200.000</td>
+											</tr>
+											<tr>
+												<td>2</td>
+												<td>20/19/2018</td>
+												<td>
+													<span class="m-badge  m-badge--danger m-badge--wide">pengeluaran</span>
+												</td>
+												<td>430 Lembar</td>
+												<td>Rp2.200.000</td>
+											</tr>
+											<tr>
+												<td>3</td>
+												<td>20/19/2018</td>
+												<td>
+													<span class="m-badge  m-badge--success m-badge--wide">Pembelian</span>
+												</td>
+												<td>430 Lembar</td>
+												<td>Rp4.200.000</td>
+											</tr>
+											<tr>
+												<td>4</td>
+												<td>20/19/2018</td>
+												<td>
+													<span class="m-badge  m-badge--danger m-badge--wide">pengeluaran</span>
+												</td>
+												<td>430 Lembar</td>
+												<td>Rp3.900.000</td>
+											</tr>
+											<tr>
+												<td>5</td>
+												<td>20/19/2018</td>
+												<td>
+													<span class="m-badge  m-badge--success m-badge--wide">Pembelian</span>
+												</td>
+												<td>430 Lembar</td>
+												<td>Rp3.500.000</td>
+											</tr>
+										</tbody>
+									</table>
+									<!--end: Datatable -->
 								</div>
-                    		</div>
-                    	</div>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
-			<!-- end:: Body -->
-			<!-- begin::Footer -->
-			<footer class="m-grid__item		m-footer ">
-				<div class="m-container m-container--fluid m-container--full-height m-page__container">
-					<div class="m-stack m-stack--flex-tablet-and-mobile m-stack--ver m-stack--desktop">
-						<div class="m-stack__item m-stack__item--left m-stack__item--middle m-stack__item--last">
-							<span class="m-footer__copyright">
-								Upa'na Studio
+		</div>
+		<!-- end:: Body -->
+		<!-- begin::Footer -->
+		<!-- MODAL -->
+		<div class="modal fade" id="tambah_pembelian" role="dialog">
+			<div class="modal-dialog">
+				<!-- Modal Konten -->
+				<div class="modal-content">
+					<div class="modal-header">
+						<h5 style="font-weight: 500" class="modal-title" id="exampleModalLabel">
+							Pembelian Bahan
+						</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="m-portlet__body">
+							<div class="m-form__section m-form__section--first">
+								<div class="form-group m-form__group">
+									<div class="form-group m-form__group row">
+										<label for="example-text-input" class="col-2 col-form-label">
+											Jumlah
+										</label>
+										<div class="input-group col-10">
+											<input name="input_jumlah" type="text" class="form-control m-input" placeholder="masukkan jumlah" aria-describedby="basic-addon2">
+											<div class="input-group-append">
+												<span class="input-group-text" id="unit_bahan">
+													Unit
+												</span>
+											</div>
+										</div>
+									</div>
+									<div class="form-group m-form__group row">
+										<label for="example-text-input" class="col-2 col-form-label">
+											Harga
+										</label>
+										<div class="input-group col-10">
+											<div class="input-group-append">
+												<span class="input-group-text" id="basic-addon2">
+													Rp
+												</span>
+											</div>
+											<input name="input_jumlah_box" type="text" class="form-control m-input" placeholder="masukkan jumlah" aria-describedby="basic-addon2">
+										</div>
+									</div>
+								</div>
+							</div>
 						</div>
-						
+					</div>  
+					<div class="modal-footer">
+						<button type="submit" class="btn btn-primary btn-tambahPembelian-modal" id="btn_tambah_pembelian">
+							Tambah Pembelian
+						</button>
+						<button type="button" class="btn btn-default" data-dismiss="modal">	Close
+						</button>
 					</div>
 				</div>
-			</footer>
-			<!-- end::Footer -->
-		</div>
-		<!-- end:: Page -->		    
-	    <!-- begin::Scroll Top -->
-		<div class="m-scroll-top m-scroll-top--skin-top" data-toggle="m-scroll-top" data-scroll-offset="500" data-scroll-speed="300">
-			<i class="la la-arrow-up"></i>
+			</div>
 		</div>
-		<!-- end::Scroll Top -->		    
-			
-    	<!--begin::Base Scripts -->
-		<script src="../../../assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
-		<script src="../../../assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
-		<!--end::Base Scripts -->   
-        <!--begin::Page Vendors -->
-		<script src="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.js" type="text/javascript"></script>
-		<!--end::Page Vendors -->  
-        <!--begin::Page Snippets -->
-		<script src="../../../assets/app/js/dashboard.js" type="text/javascript"></script>
-		<!--end::Page Snippets -->
-		<script type="text/javascript">
-			var tbl_bahan_baku = $('#tbl_bahan_baku').mDatatable({
+		<!-- END OF MODAL -->
+		<footer class="m-grid__item		m-footer ">
+			<div class="m-container m-container--fluid m-container--full-height m-page__container">
+				<div class="m-stack m-stack--flex-tablet-and-mobile m-stack--ver m-stack--desktop">
+					<div class="m-stack__item m-stack__item--left m-stack__item--middle m-stack__item--last">
+						<span class="m-footer__copyright">
+							Upa'na Studio
+						</span>
+					</div>
+
+				</div>
+			</div>
+		</footer>
+		<!-- end::Footer -->
+	</div>
+	<!-- end:: Page -->		    
+	<!-- begin::Scroll Top -->
+	<div class="m-scroll-top m-scroll-top--skin-top" data-toggle="m-scroll-top" data-scroll-offset="500" data-scroll-speed="300">
+		<i class="la la-arrow-up"></i>
+	</div>
+	<!-- end::Scroll Top -->		    
+
+	<!--begin::Base Scripts -->
+	<script src="../../../assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
+	<script src="../../../assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
+	<!--end::Base Scripts -->   
+	<!--begin::Page Vendors -->
+	<script src="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.js" type="text/javascript"></script>
+	<!--end::Page Vendors -->  
+	<!--begin::Page Snippets -->
+	<script src="../../../assets/app/js/dashboard.js" type="text/javascript"></script>
+	<!--end::Page Snippets -->
+	<script type="text/javascript">
+		var tbl_bahan_baku = $('#tbl_bahan_baku').mDatatable({
 			data: {
 				saveState: {cookie: false},
 				/*type: 'remote',
@@ -402,7 +471,7 @@ <h3 style="font-size: 1.5rem" class="m-portlet__head-text">
 			        serverPaging: true,
 			        serverFiltering: true,
 			        serverSorting: true,*/
-			},
+			    },
 			// layout definition
 			layout: {
 				theme: 'default', // datatable theme
@@ -419,33 +488,56 @@ <h3 style="font-size: 1.5rem" class="m-portlet__head-text">
 			},
 			columns: [
 
-				{
-					field: 'No',
-					textAlign: 'center',
-					width: 70
-				},
-				{
-					field: 'Tanggal',
-					textAlign: 'center',
-					type:'date',
-					format: 'DD/MM/YYYY',
-					
-				},
-				{
-					field: 'Status',
-					textAlign: 'center',
-					width: 100
-					
-				},
-				{
-					field: 'Jumlah',
-					textAlign: 'center',
-					
-				}
+			{
+				field: 'No',
+				textAlign: 'center',
+				width: 70
+			},
+			{
+				field: 'Tanggal',
+				textAlign: 'center',
+				type:'date',
+				format: 'DD/MM/YYYY',
+			},
+			{
+				field: 'Status',
+				textAlign: 'center',
+				width: 100
+			},
+			{
+				field: 'Jumlah',
+				textAlign: 'center',
+			},
+			{
+				field: 'Total',
+				textAlign: 'center',
+
+			}
 
 			],
-			});
-		</script>
-	</body>
-	<!-- end::Body -->
+		});
+	</script>
+	<script>
+		var SweetAlert2Demo = function() {
+			var initDemos = function() {
+				$('#btn_tambah_pembelian').click(function(e) {
+					swal('Pembelian Berhasil!',
+	                        'Data dimasukkan ke dalam table',
+	                        'success');
+				});
+			};
+			return {
+				        //== Init
+				        init: function() {
+				        	initDemos();
+				        },
+				    };
+				}();
+				 //== Class Initialization
+				 jQuery(document).ready(function() {
+				 	SweetAlert2Demo.init();
+				 });
+	</script>
+</body>
+<!-- end::Body -->
 </html>
diff --git a/GA/components/base/relasi.html b/GA/components/base/relasi.html
index 5eff974..458995a 100644
--- a/GA/components/base/relasi.html
+++ b/GA/components/base/relasi.html
@@ -12,133 +12,133 @@
 License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
 -->
 <html lang="en" >
-	<!-- begin::Head -->
-	<head>
-		<meta charset="utf-8" />
-		<title>
-			Purchasing | Relasi
-		</title>
-		<meta name="description" content="Latest updates and statistic charts">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-		<!--begin::Web font -->
-		<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
-		<script>
-          WebFont.load({
-            google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
-            active: function() {
-                sessionStorage.fonts = true;
-            }
-          });
-		</script>
-		<!--end::Web font -->
-        <!--begin::Base Styles -->  
-        <!--begin::Page Vendors -->
-		<link href="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
-		<!--end::Page Vendors -->
-		<link href="../../../assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
-		<link href="../../../assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
-		<!-- begin:: Style tambahan -->
-		<link href="../../../assets/demo/default/base/pelangi-style.css" rel="stylesheet" type="text/css">
-		<!-- end:: Style tambahan -->
-		<!--end::Base Styles -->
-		<link rel="shortcut icon" href="../../../assets/demo/default/media/img/logo/favicon.ico" />
-	</head>
-	<!-- end::Head -->
-    <!-- end::Body -->
-	<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
-		<!-- begin:: Page -->
-		<div class="m-grid m-grid--hor m-grid--root m-page">
-			<!-- BEGIN: Header -->
-			<header class="m-grid__item    m-header "  data-minimize-offset="200" data-minimize-mobile-offset="200" >
-				<div class="m-container m-container--fluid m-container--full-height">
-					<div class="m-stack m-stack--ver m-stack--desktop">
-						<!-- BEGIN: Brand -->
-						<div class="m-stack__item m-brand  m-brand--skin-dark ">
-							<div class="m-stack m-stack--ver m-stack--general">
-								<div class="m-stack__item m-stack__item--middle m-brand__logo">
-									<a href="../../index.html" class="m-brand__logo-wrapper">
-										<img alt="" src="../../../assets/demo/default/media/img/logo/logo_default_dark.png"/>
-									</a>
-								</div>
-								<div class="m-stack__item m-stack__item--middle m-brand__tools">
-									<!-- BEGIN: Left Aside Minimize Toggle -->
-									<a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block">
-										<span></span>
-									</a>
-									<!-- END -->
-							<!-- BEGIN: Responsive Aside Left Menu Toggler -->
-									<a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block">
-										<span></span>
-									</a>
-									<!-- END -->
-							<!-- BEGIN: Responsive Header Menu Toggler -->
-									<a id="m_aside_header_menu_mobile_toggle" href="javascript:;" class="m-brand__icon m-brand__toggler m--visible-tablet-and-mobile-inline-block">
-										<span></span>
-									</a>
-									<!-- END -->
-							<!-- BEGIN: Topbar Toggler -->
-									<a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block">
-										<i class="flaticon-more"></i>
-									</a>
-									<!-- BEGIN: Topbar Toggler -->
-								</div>
+<!-- begin::Head -->
+<head>
+	<meta charset="utf-8" />
+	<title>
+		Purchasing | Relasi
+	</title>
+	<meta name="description" content="Latest updates and statistic charts">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<!--begin::Web font -->
+	<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
+	<script>
+		WebFont.load({
+			google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
+			active: function() {
+				sessionStorage.fonts = true;
+			}
+		});
+	</script>
+	<!--end::Web font -->
+	<!--begin::Base Styles -->  
+	<!--begin::Page Vendors -->
+	<link href="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
+	<!--end::Page Vendors -->
+	<link href="../../../assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
+	<link href="../../../assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
+	<!-- begin:: Style tambahan -->
+	<link href="../../../assets/demo/default/base/pelangi-style.css" rel="stylesheet" type="text/css">
+	<!-- end:: Style tambahan -->
+	<!--end::Base Styles -->
+	<link rel="shortcut icon" href="../../../assets/demo/default/media/img/logo/favicon.ico" />
+</head>
+<!-- end::Head -->
+<!-- end::Body -->
+<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
+	<!-- begin:: Page -->
+	<div class="m-grid m-grid--hor m-grid--root m-page">
+		<!-- BEGIN: Header -->
+		<header class="m-grid__item    m-header "  data-minimize-offset="200" data-minimize-mobile-offset="200" >
+			<div class="m-container m-container--fluid m-container--full-height">
+				<div class="m-stack m-stack--ver m-stack--desktop">
+					<!-- BEGIN: Brand -->
+					<div class="m-stack__item m-brand  m-brand--skin-dark ">
+						<div class="m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-stack__item--middle m-brand__logo">
+								<a href="../../index.html" class="m-brand__logo-wrapper">
+									<img alt="" src="../../../assets/demo/default/media/img/logo/logo_default_dark.png"/>
+								</a>
 							</div>
-						</div>
-						<!-- END: Brand -->
-						<div class="m-stack__item m-stack__item--fluid m-header-head" id="m_header_nav">
-							<!-- BEGIN: Horizontal Menu -->
-							<div id="m_header_menu" class="m-header-menu m-aside-header-menu-mobile m-aside-header-menu-mobile--offcanvas  m-header-menu--skin-light m-header-menu--submenu-skin-light m-aside-header-menu-mobile--skin-dark m-aside-header-menu-mobile--submenu-skin-dark "  >
-								<img style="display: inline; float: left; height: inherit; width: auto" src="../../../assets/demo/default/media/img/misc/purchasing_2.png">
+							<div class="m-stack__item m-stack__item--middle m-brand__tools">
+								<!-- BEGIN: Left Aside Minimize Toggle -->
+								<a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block">
+									<span></span>
+								</a>
+								<!-- END -->
+								<!-- BEGIN: Responsive Aside Left Menu Toggler -->
+								<a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block">
+									<span></span>
+								</a>
+								<!-- END -->
+								<!-- BEGIN: Responsive Header Menu Toggler -->
+								<a id="m_aside_header_menu_mobile_toggle" href="javascript:;" class="m-brand__icon m-brand__toggler m--visible-tablet-and-mobile-inline-block">
+									<span></span>
+								</a>
+								<!-- END -->
+								<!-- BEGIN: Topbar Toggler -->
+								<a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block">
+									<i class="flaticon-more"></i>
+								</a>
+								<!-- BEGIN: Topbar Toggler -->
 							</div>
-							<!-- END: Horizontal Menu -->								
-							<!-- BEGIN: Topbar -->
-							<div id="m_header_topbar" class="m-topbar  m-stack m-stack--ver m-stack--general">
-								<div class="m-stack__item m-topbar__nav-wrapper">
-									<ul class="m-topbar__nav m-nav m-nav--inline">
-										<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
-											<div class="user_wrapper">
-												<p style="margin-bottom: 0px"><i class="fa fa-user"> </i> Ahmad Rifaldi</p>
-											</div>
-										</li>
-										<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
-											<div class="logout_wrapper">
-												<a margin-right: 10px;" href="snippets/pages/user/login-1.html" class="btn m-btn--pill    btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder">
-													Logout
-												</a>
-											</div>
-										</li>
-									</ul>
-								</div>
+						</div>
+					</div>
+					<!-- END: Brand -->
+					<div class="m-stack__item m-stack__item--fluid m-header-head" id="m_header_nav">
+						<!-- BEGIN: Horizontal Menu -->
+						<div id="m_header_menu" class="m-header-menu m-aside-header-menu-mobile m-aside-header-menu-mobile--offcanvas  m-header-menu--skin-light m-header-menu--submenu-skin-light m-aside-header-menu-mobile--skin-dark m-aside-header-menu-mobile--submenu-skin-dark "  >
+							<img style="display: inline; float: left; height: inherit; width: auto" src="../../../assets/demo/default/media/img/misc/purchasing_2.png">
+						</div>
+						<!-- END: Horizontal Menu -->								
+						<!-- BEGIN: Topbar -->
+						<div id="m_header_topbar" class="m-topbar  m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-topbar__nav-wrapper">
+								<ul class="m-topbar__nav m-nav m-nav--inline">
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="user_wrapper">
+											<p style="margin-bottom: 0px"><i class="fa fa-user"> </i> Ahmad Rifaldi</p>
+										</div>
+									</li>
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="logout_wrapper">
+											<a margin-right: 10px;" href="snippets/pages/user/login-1.html" class="btn m-btn--pill    btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder">
+												Logout
+											</a>
+										</div>
+									</li>
+								</ul>
 							</div>
-							<!-- END: Topbar -->
 						</div>
+						<!-- END: Topbar -->
 					</div>
 				</div>
-			</header>
-			<!-- END: Header -->		
-			<!-- begin::Body -->
-			<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
-				<!-- BEGIN: Left Aside -->
-				<button class="m-aside-left-close  m-aside-left-close--skin-dark " id="m_aside_left_close_btn">
-					<i class="la la-close"></i>
-				</button>
-					<!-- BEGIN: Aside Menu -->
-				<div id="m_aside_left" class="m-grid__item	m-aside-left  m-aside-left--skin-dark ">
-					<div id="m_ver_menu" class="m-aside-menu  m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark" data-menu-vertical="true" data-menu-scrollable="false" data-menu-dropdown-timeout="500" >
-						<ul class="m-menu__nav  m-menu__nav--dropdown-submenu-arrow ">
-							<!-- DASHBOARD -->
-							<li class="m-menu__item" aria-haspopup="true" >
-								<a  href="../../index.html" class="m-menu__link ">
-									<i class="m-menu__link-icon flaticon-line-graph"></i>
-									<span class="m-menu__link-title">
-										<span class="m-menu__link-wrap">
-											<span class="m-menu__link-text">
-												Dashboard
-											</span>
+			</div>
+		</header>
+		<!-- END: Header -->		
+		<!-- begin::Body -->
+		<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
+			<!-- BEGIN: Left Aside -->
+			<button class="m-aside-left-close  m-aside-left-close--skin-dark " id="m_aside_left_close_btn">
+				<i class="la la-close"></i>
+			</button>
+			<!-- BEGIN: Aside Menu -->
+			<div id="m_aside_left" class="m-grid__item	m-aside-left  m-aside-left--skin-dark ">
+				<div id="m_ver_menu" class="m-aside-menu  m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark" data-menu-vertical="true" data-menu-scrollable="false" data-menu-dropdown-timeout="500" >
+					<ul class="m-menu__nav  m-menu__nav--dropdown-submenu-arrow ">
+						<!-- DASHBOARD -->
+						<li class="m-menu__item" aria-haspopup="true" >
+							<a  href="../../index.html" class="m-menu__link ">
+								<i class="m-menu__link-icon flaticon-line-graph"></i>
+								<span class="m-menu__link-title">
+									<span class="m-menu__link-wrap">
+										<span class="m-menu__link-text">
+											Dashboard
 										</span>
 									</span>
-								</a>
+								</span>
+							</a>
 							<!-- Bahan Baku -->
 							<li class="m-menu__item " aria-haspopup="true" data-menu-submenu-toggle="hover">
 								<a href="bahan_baku.html" class="m-menu__link m-menu__toggle">
@@ -162,7 +162,7 @@
 								<a href="relasi.html" class="m-menu__link m-menu__toggle">
 									<i class="m-menu__link-icon fa fa-code-fork"></i>
 									<span class="m-menu__link-text">
-										Relasi
+										Relasi	
 									</span>
 								</a>
 							</li>
@@ -175,7 +175,7 @@
 									</span>
 								</a>
 							</li>
-                            <!-- KEHADIRAN -->
+							<!-- KEHADIRAN -->
 							<li class="m-menu__item " aria-haspopup="true" data-menu-submenu-toggle="hover">
 								<a href="kehadiran.html" class="m-menu__link m-menu__toggle">
 									<i class="m-menu__link-icon fa fa-user-o"></i>
@@ -197,7 +197,7 @@
 					</div>
 					<!-- END: Aside Menu -->
 				</div>
-					<!-- END: Left Aside -->
+				<!-- END: Left Aside -->
 				<div class="m-grid__item m-grid__item--fluid m-wrapper">
 					<!-- BEGIN: Subheader -->
 					<div class="m-subheader ">
@@ -218,192 +218,94 @@ <h3 class="m-subheader__title m-subheader__title--separator">
 					</div>
 					<!-- END: Subheader -->
 					<div class="m-content">
-                    	<div class="row">
-                    		<div class="col-lg-12">
-                    			<div class="m-portlet m-portlet--mobile">
+						<div class="row">
+							<div class="col-lg-12">
+								<div class="m-portlet m-portlet--mobile">
 									<div class="m-portlet__body">
-										<ul class="nav nav-tabs" role="tablist">
-											<!-- <li class="nav-item">
-												<a class="nav-link " data-toggle="tab" href="#m_tabs_jenis_bahan">
-													Relasi Jenis Bahan
-												</a>
-											</li> -->
-											<li class="nav-item active">
-												<a class="nav-link" data-toggle="tab" href="#m_tabs_produk">
-													Relasi Produk
-												</a>
-											</li>
-										</ul>
-										<div class="tab-content">
-											<div class="tab-pane " id="m_tabs_jenis_bahan" role="tabpanel">
-												<div class="m-portlet m-portlet--mobile">
-													<div class="m-portlet__body">
-														<!--begin: Search Form -->
-														<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
-															<div class="row align-items-center">
-																<div class="col-md-12">
-																	<div class="form-group m-form__group row align-items-center">
-																		<div class="col-md-4">
-																			<div class="m-portlet__head-title">
-																				<h3 class="m-portlet__head-text">
-																					List Jenis Bahan
-																				</h3>
-																			</div>
-																		</div>
-																		<div class="col-md-4 offset-md-4">
-																			<div class="m-input-icon m-input-icon--left">
-																				<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="generalSearch">
-																				<span class="m-input-icon__icon m-input-icon__icon--left">
-																					<span>
-																						<i class="la la-search"></i>
-																					</span>
-																				</span>
-																			</div>
-																		</div>
+										<div class="m-portlet m-portlet--mobile">
+											<div class="m-portlet__body">
+												<!--begin: Search Form -->
+												<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
+													<div class="row align-items-center">
+														<div class="col-md-12">
+															<div class="form-group m-form__group row align-items-center">
+																<div class="col-md-4">
+																	<div class="m-portlet__head-title">
+																		<h3 class="m-portlet__head-text">
+																			List Jenis Bahan
+																		</h3>
 																	</div>
 																</div>
-															</div>
-														</div>
-														<!--end: Search Form -->
-														<!--begin: Datatable -->
-														<!-- <div class="m_datatable" id="local_data"></div> -->
-														<table class="table" id="tbl_list_jenis_bahan">
-															<thead>
-																<tr>
-																	<th>No</th>
-																	<th>Jenis Bahan</th>
-																	<th>Aksi</th>
-																</tr>
-															</thead>
-															<tbody>
-																<tr>
-																	<td>1</td>
-																	<td>vinyl</td>
-																	<td>
-																		<a href="relasi_jenis_bahan_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
-																	</td>
-																</tr>
-																<tr>
-																	<td>2</td>
-																	<td>Korea</td>
-																	<td>
-																		<a href="relasi_jenis_bahan_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
-																	</td>
-																</tr>
-																<tr>
-																	<td>3</td>
-																	<td>HVS</td>
-																	<td>
-																		<a href="relasi_jenis_bahan_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
-																	</td>
-																</tr>
-																<tr>
-																	<td>4</td>
-																	<td>Kuarto</td>
-																	<td>
-																		<a href="relasi_jenis_bahan_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
-																	</td>
-																</tr>
-																<tr>
-																	<td>5</td>
-																	<td>Kingstruk</td>
-																	<td>
-																		<a href="relasi_jenis_bahan_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
-																	</td>
-																</tr>
-															</tbody>
-														</table>
-														<!--end: Datatable -->
-													</div>
-												</div>
-											</div>
-											<div class="tab-pane active " id="m_tabs_produk" role="tabpanel">
-												<div class="m-portlet m-portlet--mobile">
-													<div class="m-portlet__body">
-														<!--begin: Search Form -->
-														<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
-															<div class="row align-items-center">
-																<div class="col-md-12">
-																	<div class="form-group m-form__group row align-items-center">
-																		<div class="col-md-4">
-																			<div class="m-portlet__head-title">
-																				<h3 class="m-portlet__head-text">
-																					List Produk
-																				</h3>
-																			</div>
-																		</div>
-																		<div class="col-md-4 offset-md-4">
-																			<div class="m-input-icon m-input-icon--left">
-																				<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="generalSearch">
-																				<span class="m-input-icon__icon m-input-icon__icon--left">
-																					<span>
-																						<i class="la la-search"></i>
-																					</span>
-																				</span>
-																			</div>
-																		</div>
+																<div class="col-md-4 offset-md-4">
+																	<div class="m-input-icon m-input-icon--left">
+																		<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="generalSearch">
+																		<span class="m-input-icon__icon m-input-icon__icon--left">
+																			<span>
+																				<i class="la la-search"></i>
+																			</span>
+																		</span>
 																	</div>
 																</div>
 															</div>
 														</div>
-														<!--end: Search Form -->
-														<!--begin: Datatable -->
-														<!-- <div class="m_datatable" id="local_data"></div> -->
-														<table class="table" id="tbl_list_produk">
-															<thead>
-																<tr>
-																	<th>No</th>
-																	<th>Nama Produk</th>
-																	<th>Aksi</th>
-																</tr>
-															</thead>
-															<tbody>
-																<tr>
-																	<td>1</td>
-																	<td>Kartu nama</td>
-																	<td>
-																		<a href="relasi_jenis_produk_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
-																	</td>
-																</tr>
-																<tr>
-																	<td>2</td>
-																	<td>Spanduk</td>
-																	<td>
-																		<a href="relasi_jenis_produk_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
-																	</td>
-																</tr>
-																<tr>
-																	<td>3</td>
-																	<td>Undangan</td>
-																	<td>
-																		<a href="relasi_jenis_produk_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
-																	</td>
-																</tr>
-																<tr>
-																	<td>4</td>
-																	<td>Sticker</td>
-																	<td>
-																		<a href="relasi_jenis_produk_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
-																	</td>
-																</tr>
-																<tr>
-																	<td>5</td>
-																	<td>Kemasan</td>
-																	<td>
-																		<a href="relasi_jenis_produk_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
-																	</td>
-																</tr>
-															</tbody>
-														</table>
-														<!--end: Datatable -->
 													</div>
 												</div>
+												<!--end: Search Form -->
+												<!--begin: Datatable -->
+												<!-- <div class="m_datatable" id="local_data"></div> -->
+												<table class="table" id="tbl_list_jenis_bahan">
+													<thead>
+														<tr>
+															<th>No</th>
+															<th>Jenis Bahan</th>
+															<th>Aksi</th>
+														</tr>
+													</thead>
+													<tbody>
+														<tr>
+															<td>1</td>
+															<td>vinyl</td>
+															<td>
+																<a href="relasi_jenis_bahan_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
+															</td>
+														</tr>
+														<tr>
+															<td>2</td>
+															<td>Korea</td>
+															<td>
+																<a href="relasi_jenis_bahan_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
+															</td>
+														</tr>
+														<tr>
+															<td>3</td>
+															<td>HVS</td>
+															<td>
+																<a href="relasi_jenis_bahan_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
+															</td>
+														</tr>
+														<tr>
+															<td>4</td>
+															<td>Kuarto</td>
+															<td>
+																<a href="relasi_jenis_bahan_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
+															</td>
+														</tr>
+														<tr>
+															<td>5</td>
+															<td>Kingstruk</td>
+															<td>
+																<a href="relasi_jenis_bahan_detail.html" class="btn btn-sm btn-primary" style="color:white; width:80px;">Rincian</a>
+															</td>
+														</tr>
+													</tbody>
+												</table>
+												<!--end: Datatable -->
 											</div>
 										</div>
 									</div>
 								</div>	
-                    		</div>
-                    	</div>
+							</div>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -424,27 +326,27 @@ <h3 class="m-portlet__head-text">
 			<!-- end::Footer -->
 		</div>
 		<!-- end:: Page -->		    
-	    <!-- begin::Scroll Top -->
+		<!-- begin::Scroll Top -->
 		<div class="m-scroll-top m-scroll-top--skin-top" data-toggle="m-scroll-top" data-scroll-offset="500" data-scroll-speed="300">
 			<i class="la la-arrow-up"></i>
 		</div>
 		<!-- end::Scroll Top -->		    
-			
-    	<!--begin::Base Scripts -->
+
+		<!--begin::Base Scripts -->
 		<script src="../../../assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
 		<script src="../../../assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
 		<!--end::Base Scripts -->   
-        <!--begin::Page Vendors -->
+		<!--begin::Page Vendors -->
 		<script src="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.js" type="text/javascript"></script>
 		<!--end::Page Vendors -->  
-        <!--begin::Page Snippets -->
+		<!--begin::Page Snippets -->
 		<script src="../../../assets/app/js/dashboard.js" type="text/javascript"></script>
 		<!--end::Page Snippets -->
 		<script type="text/javascript">
 			var tbl_list_jenis_bahan = $('#tbl_list_jenis_bahan').mDatatable({
-			data: {
-				saveState: {cookie: false},
-			},
+				data: {
+					saveState: {cookie: false},
+				},
 			// layout definition
 			layout: {
 				theme: 'default', // datatable theme
@@ -462,27 +364,27 @@ <h3 class="m-portlet__head-text">
 			},
 			columns: [
 
-				{
-					field: 'No',
-					textAlign: 'center',
-								
-				},
-				{
-					field: 'Jenis Bahan',
-					textAlign: 'center',
-					
-				},
-				{
-					field: 'Aksi',
-					textAlign: 'center',
-					
-				}
+			{
+				field: 'No',
+				textAlign: 'center',
+
+			},
+			{
+				field: 'Jenis Bahan',
+				textAlign: 'center',
+
+			},
+			{
+				field: 'Aksi',
+				textAlign: 'center',
+
+			}
 
 			],
-			});
-		</script>
-		<script type="text/javascript">
-			var tbl_list_produk = $('#tbl_list_produk').mDatatable({
+		});
+	</script>
+	<script type="text/javascript">
+		var tbl_list_produk = $('#tbl_list_produk').mDatatable({
 			data: {
 				saveState: {cookie: false},
 				/*type: 'remote',
@@ -505,7 +407,7 @@ <h3 class="m-portlet__head-text">
 			        serverPaging: true,
 			        serverFiltering: true,
 			        serverSorting: true,*/
-			},
+			    },
 			// layout definition
 			layout: {
 				theme: 'default', // datatable theme
@@ -523,26 +425,26 @@ <h3 class="m-portlet__head-text">
 			},
 			columns: [
 
-				{
-					field: 'No',
-					textAlign: 'center',
+			{
+				field: 'No',
+				textAlign: 'center',
 
-								
-				},
-				{
-					field: 'Nama Produk',
-					textAlign: 'center',
-					
-				},
-				{
-					field: 'Aksi',
-					textAlign: 'center',
-					
-				}
+
+			},
+			{
+				field: 'Nama Produk',
+				textAlign: 'center',
+
+			},
+			{
+				field: 'Aksi',
+				textAlign: 'center',
+
+			}
 
 			],
-			});
-		</script>
-	</body>
-	<!-- end::Body -->
+		});
+	</script>
+</body>
+<!-- end::Body -->
 </html>
diff --git a/GA/components/base/relasi_inventory.html b/GA/components/base/relasi_inventory.html
new file mode 100644
index 0000000..79ae205
--- /dev/null
+++ b/GA/components/base/relasi_inventory.html
@@ -0,0 +1,510 @@
+<!DOCTYPE html>
+<!-- 
+Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 4
+Author: KeenThemes
+Website: http://www.keenthemes.com/
+Contact: support@keenthemes.com
+Follow: www.twitter.com/keenthemes
+Dribbble: www.dribbble.com/keenthemes
+Like: www.facebook.com/keenthemes
+Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
+Renew Support: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
+License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
+-->
+<html lang="en" >
+<!-- begin::Head -->
+<head>
+	<meta charset="utf-8" />
+	<title>
+		Purchasing | Relasi Inventory
+	</title>
+	<meta name="description" content="Latest updates and statistic charts">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<!--begin::Web font -->
+	<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
+	<script>
+		WebFont.load({
+			google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
+			active: function() {
+				sessionStorage.fonts = true;
+			}
+		});
+	</script>
+	<!--end::Web font -->
+	<!--begin::Base Styles -->  
+	<!--begin::Page Vendors -->
+	<link href="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
+	<!--end::Page Vendors -->
+	<link href="../../../assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
+	<link href="../../../assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
+	<!-- begin:: Style tambahan -->
+	<link href="../../../assets/demo/default/base/pelangi-style.css" rel="stylesheet" type="text/css">
+	<!-- end:: Style tambahan -->
+	<!--end::Base Styles -->
+	<link rel="shortcut icon" href="../../../assets/demo/default/media/img/logo/favicon.ico" />
+</head>
+<!-- end::Head -->
+<!-- end::Body -->
+<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
+	<!-- begin:: Page -->
+	<div class="m-grid m-grid--hor m-grid--root m-page">
+		<!-- BEGIN: Header -->
+		<header class="m-grid__item    m-header "  data-minimize-offset="200" data-minimize-mobile-offset="200" >
+			<div class="m-container m-container--fluid m-container--full-height">
+				<div class="m-stack m-stack--ver m-stack--desktop">
+					<!-- BEGIN: Brand -->
+					<div class="m-stack__item m-brand  m-brand--skin-dark ">
+						<div class="m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-stack__item--middle m-brand__logo">
+								<a href="../../index.html" class="m-brand__logo-wrapper">
+									<img alt="" src="../../../assets/demo/default/media/img/logo/logo_default_dark.png"/>
+								</a>
+							</div>
+							<div class="m-stack__item m-stack__item--middle m-brand__tools">
+								<!-- BEGIN: Left Aside Minimize Toggle -->
+								<a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block">
+									<span></span>
+								</a>
+								<!-- END -->
+								<!-- BEGIN: Responsive Aside Left Menu Toggler -->
+								<a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block">
+									<span></span>
+								</a>
+								<!-- END -->
+								<!-- BEGIN: Responsive Header Menu Toggler -->
+								<a id="m_aside_header_menu_mobile_toggle" href="javascript:;" class="m-brand__icon m-brand__toggler m--visible-tablet-and-mobile-inline-block">
+									<span></span>
+								</a>
+								<!-- END -->
+								<!-- BEGIN: Topbar Toggler -->
+								<a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block">
+									<i class="flaticon-more"></i>
+								</a>
+								<!-- BEGIN: Topbar Toggler -->
+							</div>
+						</div>
+					</div>
+					<!-- END: Brand -->
+					<div class="m-stack__item m-stack__item--fluid m-header-head" id="m_header_nav">
+						<!-- BEGIN: Horizontal Menu -->
+						<div id="m_header_menu" class="m-header-menu m-aside-header-menu-mobile m-aside-header-menu-mobile--offcanvas  m-header-menu--skin-light m-header-menu--submenu-skin-light m-aside-header-menu-mobile--skin-dark m-aside-header-menu-mobile--submenu-skin-dark "  >
+							<img style="display: inline; float: left; height: inherit; width: auto" src="../../../assets/demo/default/media/img/misc/purchasing_2.png">
+						</div>
+						<!-- END: Horizontal Menu -->								
+						<!-- BEGIN: Topbar -->
+						<div id="m_header_topbar" class="m-topbar  m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-topbar__nav-wrapper">
+								<ul class="m-topbar__nav m-nav m-nav--inline">
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="user_wrapper">
+											<p style="margin-bottom: 0px"><i class="fa fa-user"> </i> Ahmad Rifaldi</p>
+										</div>
+									</li>
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="logout_wrapper">
+											<a margin-right: 10px;" href="snippets/pages/user/login-1.html" class="btn m-btn--pill    btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder">
+												Logout
+											</a>
+										</div>
+									</li>
+								</ul>
+							</div>
+						</div>
+						<!-- END: Topbar -->
+					</div>
+				</div>
+			</div>
+		</header>
+		<!-- END: Header -->		
+		<!-- begin::Body -->
+		<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
+			<!-- BEGIN: Left Aside -->
+			<button class="m-aside-left-close  m-aside-left-close--skin-dark " id="m_aside_left_close_btn">
+				<i class="la la-close"></i>
+			</button>
+			<!-- BEGIN: Aside Menu -->
+			<div id="m_aside_left" class="m-grid__item	m-aside-left  m-aside-left--skin-dark ">
+				<div id="m_ver_menu" class="m-aside-menu  m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark" data-menu-vertical="true" data-menu-scrollable="false" data-menu-dropdown-timeout="500" >
+				</div>
+				<!-- END: Aside Menu -->
+			</div>
+			<!-- END: Left Aside -->
+			<div class="m-grid__item m-grid__item--fluid m-wrapper">
+				<!-- BEGIN: Subheader -->
+				<div class="m-subheader ">
+					<div class="d-flex align-items-center">
+						<div class="mr-auto">
+							<h3 class="m-subheader__title m-subheader__title--separator">
+								Relasi
+							</h3>
+							<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
+								<li class="m-nav__item m-nav__item--home">
+									<a href="../../index.html" class="m-nav__link m-nav__link--icon">
+										<i class="m-nav__link-icon la la-home"></i>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+				<!-- END: Subheader -->
+				<div class="m-content">
+					<div class="row">
+						<div class="col-lg-12">
+							<div class="m-portlet__body">
+								<div class="tab-pane " id="m_tabs_jenis_bahan" role="tabpanel">
+									<div class="m-portlet m-portlet--mobile">
+										<div class="m-portlet__body">
+											<!--begin: Search Form -->
+											<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
+												<div class="row align-items-center">
+													<div class="col-md-12">
+														<div class="form-group m-form__group row align-items-center">
+															<div class="col-md-4">
+																<div class="m-portlet__head-title">
+																	<h3 class="m-portlet__head-text">
+																		Relasi Inventory
+																	</h3>
+																</div>
+															</div>
+															<div class="col-md-4 offset-md-4">
+															</div>
+														</div>
+													</div>
+												</div>
+											</div>
+											<!--end: Search Form -->
+											<div class="m-portlet__body">
+												<div class="m-form__group form-group">
+													<select name="pilih_satuan" class="form-control m-input m-input--square">
+														<option value="lembar">
+															Lembar
+														</option>
+														<option value="Roll">
+															Roll
+														</option>
+													</select>
+												</div>
+											</div>
+											<div class="m-portlet__body">
+												<div class="m-form__group form-group">
+													<label style="font-size: 1.2rem; font-weight: 600" for="">
+														Nama Bahan
+													</label>
+													<div style="margin-top: 10px;" class="m-checkbox-inline">
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 1
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 3
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 4
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 5
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+													</div>
+												</div>
+												<button class="btn btn-primary">Buat Relasi</button>
+											</div>
+											<div class="m-portlet__body">
+												<!--begin: Search Form -->
+												<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
+													<div class="row align-items-center">
+														<div class="col-md-12">
+															<div class="form-group m-form__group row align-items-center">
+																<div class="col-md-4">
+																	<div class="m-portlet__head-title">
+																		<h3 class="m-portlet__head-text">
+																			List Jenis Bahan
+																		</h3>
+																	</div>
+																</div>
+																<div class="col-md-4 offset-md-4">
+																	<div class="m-input-icon m-input-icon--left">
+																		<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="generalSearch">
+																		<span class="m-input-icon__icon m-input-icon__icon--left">
+																			<span>
+																				<i class="la la-search"></i>
+																			</span>
+																		</span>
+																	</div>
+																</div>
+															</div>
+														</div>
+													</div>
+												</div>
+												<!--end: Search Form -->
+												<!--begin: Datatable -->
+												<!-- <div class="m_datatable" id="local_data"></div> -->
+												<table class="table" id="tbl_list_jenis_bahan">
+													<thead>
+														<tr>
+															<th>No</th>
+															<th>Nama Bahan</th>
+															<th>Aksi</th>
+														</tr>
+													</thead>
+													<tbody>
+														<tr>
+															<td>1</td>
+															<td>Kartu Nama</td>
+															<td>
+																<a href="relasi_jenis_bahan_detail.html" class="btn btn-sm btn-danger" style="color:white; width:80px;">Hapus</a>
+															</td>
+														</tr>
+														<tr>
+															<td>2</td>
+															<td>Kongkurt</td>
+															<td>
+																<a href="relasi_jenis_bahan_detail.html" class="btn btn-sm btn-danger" style="color:white; width:80px;">Hapus</a>
+															</td>
+														</tr>
+														<tr>
+															<td>3</td>
+															<td>HVS</td>
+															<td>
+																<a href="relasi_jenis_bahan_detail.html" class="btn btn-sm btn-danger" style="color:white; width:80px;">Hapus</a>
+															</td>
+														</tr>
+														<tr>
+															<td>4</td>
+															<td>Kuarto</td>
+															<td>
+																<a href="relasi_jenis_bahan_detail.html" class="btn btn-sm btn-danger" style="color:white; width:80px;">Hapus</a>
+															</td>
+														</tr>
+														<tr>
+															<td>5</td>
+															<td>Kingstruk</td>
+															<td>
+																<a href="relasi_jenis_bahan_detail.html" class="btn btn-sm btn-danger" style="color:white; width:80px;">Hapus</a>
+															</td>
+														</tr>
+													</tbody>
+												</table>
+												<!--end: Datatable -->
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- end:: Body -->
+		<!-- begin::Footer -->
+		<footer class="m-grid__item		m-footer ">
+			<div class="m-container m-container--fluid m-container--full-height m-page__container">
+				<div class="m-stack m-stack--flex-tablet-and-mobile m-stack--ver m-stack--desktop">
+					<div class="m-stack__item m-stack__item--left m-stack__item--middle m-stack__item--last">
+						<span class="m-footer__copyright">
+							Upa'na Studio
+						</span>
+					</div>
+
+				</div>
+			</div>
+		</footer>
+		<!-- end::Footer -->
+	</div>
+	<!-- end:: Page -->		    
+	<!-- begin::Scroll Top -->
+	<div class="m-scroll-top m-scroll-top--skin-top" data-toggle="m-scroll-top" data-scroll-offset="500" data-scroll-speed="300">
+		<i class="la la-arrow-up"></i>
+	</div>
+	<!-- end::Scroll Top -->		    
+
+	<!--begin::Base Scripts -->
+	<script src="../../../assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
+	<script src="../../../assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
+	<!--end::Base Scripts -->   
+	<!--begin::Page Vendors -->
+	<script src="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.js" type="text/javascript"></script>
+	<!--end::Page Vendors -->  
+	<!--begin::Page Snippets -->
+	<script src="../../../assets/app/js/dashboard.js" type="text/javascript"></script>
+	<!--end::Page Snippets -->
+	<script type="text/javascript">
+		var tbl_list_jenis_bahan = $('#tbl_list_jenis_bahan').mDatatable({
+			data: {
+				saveState: {cookie: false},
+			},
+			// layout definition
+			layout: {
+				theme: 'default', // datatable theme
+				class: '', // custom wrapper class
+				scroll: false, // enable/disable datatable scroll both horizontal and vertical when needed.
+				// height: 450, // datatable's body's fixed height
+				footer: false // display/hide footer
+			},
+
+			// column sorting
+			sortable: true,
+			order: [[1,"desc"]],
+			search: {
+				input: $('#generalSearch'),
+			},
+			columns: [
+
+			{
+				field: 'No',
+				textAlign: 'center',
+
+			},
+			{
+				field: 'Nama Bahan',
+				textAlign: 'center',
+
+			},
+			{
+				field: 'Aksi',
+				textAlign: 'center',
+
+			}
+
+			],
+		});
+	</script>
+	<script type="text/javascript">
+		var tbl_list_produk = $('#tbl_list_produk').mDatatable({
+			data: {
+				saveState: {cookie: false},
+				/*type: 'remote',
+			        source: {
+			          read: {
+			            // sample GET method
+			            method: 'GET',
+			            url: 'https://keenthemes.com/metronic/preview/inc/api/datatables/demos/default.php',
+			            map: function(raw) {
+			              // sample data mapping
+			              var dataSet = raw;
+			              if (typeof raw.data !== 'undefined') {
+			                dataSet = raw.data;
+			              }
+			              return dataSet;
+			            },
+			          },
+			        },
+			        pageSize: 10,
+			        serverPaging: true,
+			        serverFiltering: true,
+			        serverSorting: true,*/
+			    },
+			// layout definition
+			layout: {
+				theme: 'default', // datatable theme
+				class: '', // custom wrapper class
+				scroll: false, // enable/disable datatable scroll both horizontal and vertical when needed.
+				// height: 450, // datatable's body's fixed height
+				footer: false // display/hide footer
+			},
+
+			// column sorting
+			sortable: true,
+			order: [[1,"desc"]],
+			search: {
+				input: $('#generalSearch'),
+			},
+			columns: [
+
+			{
+				field: 'No',
+				textAlign: 'center',
+
+
+			},
+			{
+				field: 'Nama Produk',
+				textAlign: 'center',
+
+			},
+			{
+				field: 'Aksi',
+				textAlign: 'center',
+
+			}
+
+			],
+		});
+	</script>
+</body>
+<!-- end::Body -->
+</html>
diff --git a/GA/components/base/relasi_inventory_Roll.html b/GA/components/base/relasi_inventory_Roll.html
new file mode 100644
index 0000000..f7d553e
--- /dev/null
+++ b/GA/components/base/relasi_inventory_Roll.html
@@ -0,0 +1,516 @@
+<!DOCTYPE html>
+<!-- 
+Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 4
+Author: KeenThemes
+Website: http://www.keenthemes.com/
+Contact: support@keenthemes.com
+Follow: www.twitter.com/keenthemes
+Dribbble: www.dribbble.com/keenthemes
+Like: www.facebook.com/keenthemes
+Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
+Renew Support: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
+License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
+-->
+<html lang="en" >
+<!-- begin::Head -->
+<head>
+	<meta charset="utf-8" />
+	<title>
+		Purchasing | Relasi Inventory
+	</title>
+	<meta name="description" content="Latest updates and statistic charts">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<!--begin::Web font -->
+	<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
+	<script>
+		WebFont.load({
+			google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
+			active: function() {
+				sessionStorage.fonts = true;
+			}
+		});
+	</script>
+	<!--end::Web font -->
+	<!--begin::Base Styles -->  
+	<!--begin::Page Vendors -->
+	<link href="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
+	<!--end::Page Vendors -->
+	<link href="../../../assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
+	<link href="../../../assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
+	<!-- begin:: Style tambahan -->
+	<link href="../../../assets/demo/default/base/pelangi-style.css" rel="stylesheet" type="text/css">
+	<!-- end:: Style tambahan -->
+	<!--end::Base Styles -->
+	<link rel="shortcut icon" href="../../../assets/demo/default/media/img/logo/favicon.ico" />
+</head>
+<!-- end::Head -->
+<!-- end::Body -->
+<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
+	<!-- begin:: Page -->
+	<div class="m-grid m-grid--hor m-grid--root m-page">
+		<!-- BEGIN: Header -->
+		<header class="m-grid__item    m-header "  data-minimize-offset="200" data-minimize-mobile-offset="200" >
+			<div class="m-container m-container--fluid m-container--full-height">
+				<div class="m-stack m-stack--ver m-stack--desktop">
+					<!-- BEGIN: Brand -->
+					<div class="m-stack__item m-brand  m-brand--skin-dark ">
+						<div class="m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-stack__item--middle m-brand__logo">
+								<a href="../../index.html" class="m-brand__logo-wrapper">
+									<img alt="" src="../../../assets/demo/default/media/img/logo/logo_default_dark.png"/>
+								</a>
+							</div>
+							<div class="m-stack__item m-stack__item--middle m-brand__tools">
+								<!-- BEGIN: Left Aside Minimize Toggle -->
+								<a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block">
+									<span></span>
+								</a>
+								<!-- END -->
+								<!-- BEGIN: Responsive Aside Left Menu Toggler -->
+								<a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block">
+									<span></span>
+								</a>
+								<!-- END -->
+								<!-- BEGIN: Responsive Header Menu Toggler -->
+								<a id="m_aside_header_menu_mobile_toggle" href="javascript:;" class="m-brand__icon m-brand__toggler m--visible-tablet-and-mobile-inline-block">
+									<span></span>
+								</a>
+								<!-- END -->
+								<!-- BEGIN: Topbar Toggler -->
+								<a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block">
+									<i class="flaticon-more"></i>
+								</a>
+								<!-- BEGIN: Topbar Toggler -->
+							</div>
+						</div>
+					</div>
+					<!-- END: Brand -->
+					<div class="m-stack__item m-stack__item--fluid m-header-head" id="m_header_nav">
+						<!-- BEGIN: Horizontal Menu -->
+						<div id="m_header_menu" class="m-header-menu m-aside-header-menu-mobile m-aside-header-menu-mobile--offcanvas  m-header-menu--skin-light m-header-menu--submenu-skin-light m-aside-header-menu-mobile--skin-dark m-aside-header-menu-mobile--submenu-skin-dark "  >
+							<img style="display: inline; float: left; height: inherit; width: auto" src="../../../assets/demo/default/media/img/misc/purchasing_2.png">
+						</div>
+						<!-- END: Horizontal Menu -->								
+						<!-- BEGIN: Topbar -->
+						<div id="m_header_topbar" class="m-topbar  m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-topbar__nav-wrapper">
+								<ul class="m-topbar__nav m-nav m-nav--inline">
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="user_wrapper">
+											<p style="margin-bottom: 0px"><i class="fa fa-user"> </i> Ahmad Rifaldi</p>
+										</div>
+									</li>
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="logout_wrapper">
+											<a margin-right: 10px;" href="snippets/pages/user/login-1.html" class="btn m-btn--pill    btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder">
+												Logout
+											</a>
+										</div>
+									</li>
+								</ul>
+							</div>
+						</div>
+						<!-- END: Topbar -->
+					</div>
+				</div>
+			</div>
+		</header>
+		<!-- END: Header -->		
+		<!-- begin::Body -->
+		<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
+			<!-- BEGIN: Left Aside -->
+			<button class="m-aside-left-close  m-aside-left-close--skin-dark " id="m_aside_left_close_btn">
+				<i class="la la-close"></i>
+			</button>
+			<!-- BEGIN: Aside Menu -->
+			<div id="m_aside_left" class="m-grid__item	m-aside-left  m-aside-left--skin-dark ">
+				<div id="m_ver_menu" class="m-aside-menu  m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark" data-menu-vertical="true" data-menu-scrollable="false" data-menu-dropdown-timeout="500" >
+				</div>
+				<!-- END: Aside Menu -->
+			</div>
+			<!-- END: Left Aside -->
+			<div class="m-grid__item m-grid__item--fluid m-wrapper">
+				<!-- BEGIN: Subheader -->
+				<div class="m-subheader ">
+					<div class="d-flex align-items-center">
+						<div class="mr-auto">
+							<h3 class="m-subheader__title m-subheader__title--separator">
+								Relasi
+							</h3>
+							<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
+								<li class="m-nav__item m-nav__item--home">
+									<a href="../../index.html" class="m-nav__link m-nav__link--icon">
+										<i class="m-nav__link-icon la la-home"></i>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+				<!-- END: Subheader -->
+				<div class="m-content">
+					<div class="row">
+						<div class="col-lg-12">
+							<div class="m-portlet__body">
+								<div class="tab-pane " id="m_tabs_jenis_bahan" role="tabpanel">
+									<div class="m-portlet m-portlet--mobile">
+										<div class="m-portlet__body">
+											<!--begin: Search Form -->
+											<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
+												<div class="row align-items-center">
+													<div class="col-md-12">
+														<div class="form-group m-form__group row align-items-center">
+															<div class="col-md-4">
+																<div class="m-portlet__head-title">
+																	<h3 class="m-portlet__head-text">
+																		Relasi Inventory - Roll
+																	</h3>
+																</div>
+															</div>
+															<div class="col-md-4 offset-md-4">
+															</div>
+														</div>
+													</div>
+												</div>
+											</div>
+											<!--end: Search Form -->
+											<div class="m-portlet__body">
+												<div class="m-form__group form-group">
+													<select name="pilih_satuan" class="form-control m-input m-input--square" onchange="location = this.options[this.selectedIndex].value;">
+														<option value="http://localhost/DashboardPelangi/ptpelangi/ga/components/base/relasi_inventory_lembar.html">
+															Lembar
+														</option>
+														<option selected="" value="http://localhost/DashboardPelangi/ptpelangi/ga/components/base/relasi_inventory_roll.html">
+															Roll
+														</option>
+													</select>
+												</div>
+											</div>
+											<div class="m-portlet__body">
+												<div class="m-form__group form-group">
+													<label style="font-size: 1.2rem; font-weight: 600" for="">
+														Nama Bahan
+													</label>
+													<div style="margin-top: 10px;" class="m-checkbox-inline">
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 1
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 3
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 4
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 5
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+													</div>
+												</div>
+												<button id="btn_buat_relasi" class="btn btn-primary">Buat Relasi</button>
+											</div>
+											<div class="m-portlet__body">
+												<!--begin: Search Form -->
+												<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
+													<div class="row align-items-center">
+														<div class="col-md-12">
+															<div class="form-group m-form__group row align-items-center">
+																<div class="col-md-4">
+																	<div class="m-portlet__head-title">
+																		<h3 class="m-portlet__head-text">
+																			List Jenis Bahan
+																		</h3>
+																	</div>
+																</div>
+																<div class="col-md-4 offset-md-4">
+																	<div class="m-input-icon m-input-icon--left">
+																		<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="generalSearch">
+																		<span class="m-input-icon__icon m-input-icon__icon--left">
+																			<span>
+																				<i class="la la-search"></i>
+																			</span>
+																		</span>
+																	</div>
+																</div>
+															</div>
+														</div>
+													</div>
+												</div>
+												<!--end: Search Form -->
+												<!--begin: Datatable -->
+												<!-- <div class="m_datatable" id="local_data"></div> -->
+												<table class="table" id="tbl_list_jenis_bahan_roll">
+													<thead>
+														<tr>
+															<th>No</th>
+															<th>Nama Bahan</th>
+															<th>Panjang</th>
+															<th>Lebar</th>
+															<th>Aksi</th>
+														</tr>
+													</thead>
+													<tbody>
+														<tr>
+															<td>1</td>
+															<td>Vinyl</td>
+															<td>70 m</td>
+															<td>6 m</td>
+															<td>
+																<a onclick="hapus_data();" class="btn btn-sm btn-danger" style="color:white; width:80px;">Hapus</a>
+															</td>
+														</tr>
+														<tr>
+															<td>2</td>
+															<td>Korea</td>
+															<td>70 m</td>
+															<td>5 m</td>
+															<td>
+																<a onclick="hapus_data();" class="btn btn-sm btn-danger" style="color:white; width:80px;">Hapus</a>
+															</td>
+														</tr>
+													</tbody>
+												</table>
+												<!--end: Datatable -->
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- end:: Body -->
+		<!-- begin::Footer -->
+		<footer class="m-grid__item		m-footer ">
+			<div class="m-container m-container--fluid m-container--full-height m-page__container">
+				<div class="m-stack m-stack--flex-tablet-and-mobile m-stack--ver m-stack--desktop">
+					<div class="m-stack__item m-stack__item--left m-stack__item--middle m-stack__item--last">
+						<span class="m-footer__copyright">
+							Upa'na Studio
+						</span>
+					</div>
+
+				</div>
+			</div>
+		</footer>
+		<!-- end::Footer -->
+	</div>
+	<!-- end:: Page -->		    
+	<!-- begin::Scroll Top -->
+	<div class="m-scroll-top m-scroll-top--skin-top" data-toggle="m-scroll-top" data-scroll-offset="500" data-scroll-speed="300">
+		<i class="la la-arrow-up"></i>
+	</div>
+	<!-- end::Scroll Top -->		    
+
+	<!--begin::Base Scripts -->
+	<script src="../../../assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
+	<script src="../../../assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
+	<!--end::Base Scripts -->   
+	<!--begin::Page Vendors -->
+	<script src="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.js" type="text/javascript"></script>
+	<!--end::Page Vendors -->  
+	<!--begin::Page Snippets -->
+	<script src="../../../assets/app/js/dashboard.js" type="text/javascript"></script>
+	<!--end::Page Snippets -->
+	<script type="text/javascript">
+		var tbl_list_jenis_bahan_roll = $('#tbl_list_jenis_bahan_roll').mDatatable({
+			data: {
+				saveState: {cookie: false},
+				/*type: 'remote',
+			        source: {
+			          read: {
+			            // sample GET method
+			            method: 'GET',
+			            url: 'https://keenthemes.com/metronic/preview/inc/api/datatables/demos/default.php',
+			            map: function(raw) {
+			              // sample data mapping
+			              var dataSet = raw;
+			              if (typeof raw.data !== 'undefined') {
+			                dataSet = raw.data;
+			              }
+			              return dataSet;
+			            },
+			          },
+			        },
+			        pageSize: 10,
+			        serverPaging: true,
+			        serverFiltering: true,
+			        serverSorting: true,*/
+			    },
+			// layout definition
+			layout: {
+				theme: 'default', // datatable theme
+				class: '', // custom wrapper class
+				scroll: false, // enable/disable datatable scroll both horizontal and vertical when needed.
+				// height: 450, // datatable's body's fixed height
+				footer: false // display/hide footer
+			},
+
+			// column sorting
+			sortable: true,
+			order: [[1,"desc"]],
+			search: {
+				input: $('#generalSearch'),
+			},
+			columns: [
+
+			{
+				field: 'No',
+				textAlign: 'center',
+
+
+			},
+			{
+				field: 'Nama Bahan',
+				textAlign: 'center',
+
+			},
+			{
+				field: 'Panjang',
+				textAlign: 'center',
+
+			},
+			{
+				field: 'Lebar',
+				textAlign: 'center',
+
+			},
+			{
+				field: 'Aksi',
+				textAlign: 'center',
+
+			}
+
+			],
+		});
+	</script>
+	<script>
+		function hapus_data(type,id) {
+			swal({
+				title: "Anda yakin ingin menghapus data ini?!",
+				text: "Semua data yang memakai data ini akan ikut terhapus.",
+				icon: "warning",
+
+				confirmButtonText: "<span><i class='la la-trash'></i><span>Ya, Hapus!</span></span>",
+				confirmButtonClass: "btn btn-danger m-btn m-btn--pill m-btn--air m-btn--icon",
+
+				showCancelButton: true,
+				cancelButtonText: "<span><i class='la la-close'></i><span>Batalkan</span></span>",
+				cancelButtonClass: "btn btn-secondary m-btn m-btn--pill m-btn--icon",
+				showLoaderOnConfirm: true
+			}).then(function(result) {
+				if (result.value) {
+					var token = $("[name='__CsrfTokenValid']").val();
+					$.post("<?=ga_url('master_data/hapus_data')?>", { id: id, __CsrfTokenValid: token, type : type })
+					.done(function (data) {
+						if (data.success) {
+							swal({
+								title: 'Berhasil!',
+								text: "Data telah dihapus",
+								type: 'success',
+								showCancelButton: false,
+								confirmButtonText: 'Kembali ke beranda',
+								closeOnConfirm: false
+
+							}).then(function(result) {
+								if (result.value) {
+									window.location.href = "<?=ga_url('master_data')?>";
+								}
+							});
+						} else {
+							swal(
+								'Gagal!',
+								'Data gagal dihapus!',
+								'error'
+								)
+						}
+					})
+					.fail(function () {
+						swal(
+							'Gagal!',
+							'Cek Koneksi anda!',
+							'error'
+							);
+					});
+				}
+			});
+		}
+	</script>
+</body>
+<!-- end::Body -->
+</html>
diff --git a/GA/components/base/relasi_inventory_lembar.html b/GA/components/base/relasi_inventory_lembar.html
new file mode 100644
index 0000000..810a0c6
--- /dev/null
+++ b/GA/components/base/relasi_inventory_lembar.html
@@ -0,0 +1,500 @@
+<!DOCTYPE html>
+<!-- 
+Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 4
+Author: KeenThemes
+Website: http://www.keenthemes.com/
+Contact: support@keenthemes.com
+Follow: www.twitter.com/keenthemes
+Dribbble: www.dribbble.com/keenthemes
+Like: www.facebook.com/keenthemes
+Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
+Renew Support: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
+License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
+-->
+<html lang="en" >
+<!-- begin::Head -->
+<head>
+	<meta charset="utf-8" />
+	<title>
+		Purchasing | Relasi Inventory
+	</title>
+	<meta name="description" content="Latest updates and statistic charts">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<!--begin::Web font -->
+	<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
+	<script>
+		WebFont.load({
+			google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
+			active: function() {
+				sessionStorage.fonts = true;
+			}
+		});
+	</script>
+	<!--end::Web font -->
+	<!--begin::Base Styles -->  
+	<!--begin::Page Vendors -->
+	<link href="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
+	<!--end::Page Vendors -->
+	<link href="../../../assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
+	<link href="../../../assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
+	<!-- begin:: Style tambahan -->
+	<link href="../../../assets/demo/default/base/pelangi-style.css" rel="stylesheet" type="text/css">
+	<!-- end:: Style tambahan -->
+	<!--end::Base Styles -->
+	<link rel="shortcut icon" href="../../../assets/demo/default/media/img/logo/favicon.ico" />
+</head>
+<!-- end::Head -->
+<!-- end::Body -->
+<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
+	<!-- begin:: Page -->
+	<div class="m-grid m-grid--hor m-grid--root m-page">
+		<!-- BEGIN: Header -->
+		<header class="m-grid__item    m-header "  data-minimize-offset="200" data-minimize-mobile-offset="200" >
+			<div class="m-container m-container--fluid m-container--full-height">
+				<div class="m-stack m-stack--ver m-stack--desktop">
+					<!-- BEGIN: Brand -->
+					<div class="m-stack__item m-brand  m-brand--skin-dark ">
+						<div class="m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-stack__item--middle m-brand__logo">
+								<a href="../../index.html" class="m-brand__logo-wrapper">
+									<img alt="" src="../../../assets/demo/default/media/img/logo/logo_default_dark.png"/>
+								</a>
+							</div>
+							<div class="m-stack__item m-stack__item--middle m-brand__tools">
+								<!-- BEGIN: Left Aside Minimize Toggle -->
+								<a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block">
+									<span></span>
+								</a>
+								<!-- END -->
+								<!-- BEGIN: Responsive Aside Left Menu Toggler -->
+								<a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block">
+									<span></span>
+								</a>
+								<!-- END -->
+								<!-- BEGIN: Responsive Header Menu Toggler -->
+								<a id="m_aside_header_menu_mobile_toggle" href="javascript:;" class="m-brand__icon m-brand__toggler m--visible-tablet-and-mobile-inline-block">
+									<span></span>
+								</a>
+								<!-- END -->
+								<!-- BEGIN: Topbar Toggler -->
+								<a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block">
+									<i class="flaticon-more"></i>
+								</a>
+								<!-- BEGIN: Topbar Toggler -->
+							</div>
+						</div>
+					</div>
+					<!-- END: Brand -->
+					<div class="m-stack__item m-stack__item--fluid m-header-head" id="m_header_nav">
+						<!-- BEGIN: Horizontal Menu -->
+						<div id="m_header_menu" class="m-header-menu m-aside-header-menu-mobile m-aside-header-menu-mobile--offcanvas  m-header-menu--skin-light m-header-menu--submenu-skin-light m-aside-header-menu-mobile--skin-dark m-aside-header-menu-mobile--submenu-skin-dark "  >
+							<img style="display: inline; float: left; height: inherit; width: auto" src="../../../assets/demo/default/media/img/misc/purchasing_2.png">
+						</div>
+						<!-- END: Horizontal Menu -->								
+						<!-- BEGIN: Topbar -->
+						<div id="m_header_topbar" class="m-topbar  m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-topbar__nav-wrapper">
+								<ul class="m-topbar__nav m-nav m-nav--inline">
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="user_wrapper">
+											<p style="margin-bottom: 0px"><i class="fa fa-user"> </i> Ahmad Rifaldi</p>
+										</div>
+									</li>
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="logout_wrapper">
+											<a margin-right: 10px;" href="snippets/pages/user/login-1.html" class="btn m-btn--pill    btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder">
+												Logout
+											</a>
+										</div>
+									</li>
+								</ul>
+							</div>
+						</div>
+						<!-- END: Topbar -->
+					</div>
+				</div>
+			</div>
+		</header>
+		<!-- END: Header -->		
+		<!-- begin::Body -->
+		<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
+			<!-- BEGIN: Left Aside -->
+			<button class="m-aside-left-close  m-aside-left-close--skin-dark " id="m_aside_left_close_btn">
+				<i class="la la-close"></i>
+			</button>
+			<!-- BEGIN: Aside Menu -->
+			<div id="m_aside_left" class="m-grid__item	m-aside-left  m-aside-left--skin-dark ">
+				<div id="m_ver_menu" class="m-aside-menu  m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark" data-menu-vertical="true" data-menu-scrollable="false" data-menu-dropdown-timeout="500" >
+				</div>
+				<!-- END: Aside Menu -->
+			</div>
+			<!-- END: Left Aside -->
+			<div class="m-grid__item m-grid__item--fluid m-wrapper">
+				<!-- BEGIN: Subheader -->
+				<div class="m-subheader ">
+					<div class="d-flex align-items-center">
+						<div class="mr-auto">
+							<h3 class="m-subheader__title m-subheader__title--separator">
+								Relasi
+							</h3>
+							<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
+								<li class="m-nav__item m-nav__item--home">
+									<a href="../../index.html" class="m-nav__link m-nav__link--icon">
+										<i class="m-nav__link-icon la la-home"></i>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+				<!-- END: Subheader -->
+				<div class="m-content">
+					<div class="row">
+						<div class="col-lg-12">
+							<div class="m-portlet__body">
+								<div class="tab-pane " id="m_tabs_jenis_bahan" role="tabpanel">
+									<div class="m-portlet m-portlet--mobile">
+										<div class="m-portlet__body">
+											<!--begin: Search Form -->
+											<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
+												<div class="row align-items-center">
+													<div class="col-md-12">
+														<div class="form-group m-form__group row align-items-center">
+															<div class="col-md-6">
+																<div class="m-portlet__head-title">
+																	<h3 class="m-portlet__head-text">
+																		Relasi Inventory - Lembar
+																	</h3>
+																</div>
+															</div>
+															<div class="col-md-4 offset-md-4">
+															</div>
+														</div>
+													</div>
+												</div>
+											</div>
+											<!--end: Search Form -->
+											<div class="m-portlet__body">
+												<div class="m-form__group form-group">
+													<select selected="" name="pilih_satuan" class="form-control m-input m-input--square" onchange="location = this.options[this.selectedIndex].value;">
+														<option value="http://localhost/DashboardPelangi/ptpelangi/ga/components/base/relasi_inventory_lembar.html">
+															Lembar
+														</option>
+														<option  value="http://localhost/DashboardPelangi/ptpelangi/ga/components/base/relasi_inventory_roll.html">
+															Roll
+														</option>
+													</select>
+												</div>
+											</div>
+											<div class="m-portlet__body">
+												<div class="m-form__group form-group">
+													<label style="font-size: 1.2rem; font-weight: 600" for="">
+														Nama Bahan
+													</label>
+													<div style="margin-top: 10px;" class="m-checkbox-inline">
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 1
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 3
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 4
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 5
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+														<label class="m-checkbox">
+															<input name="jenis_bahan" value="1" type="checkbox">
+															Option 2
+															<span></span>
+														</label>
+													</div>
+												</div>
+												<button id="btn_buat_relasi" class="btn btn-primary">Buat Relasi</button>
+											</div>
+											<div class="m-portlet__body">
+												<!--begin: Search Form -->
+												<div class="m-form m-form--label-align-right m--margin-top-20 m--margin-bottom-30">
+													<div class="row align-items-center">
+														<div class="col-md-12">
+															<div class="form-group m-form__group row align-items-center">
+																<div class="col-md-4">
+																	<div class="m-portlet__head-title">
+																		<h3 class="m-portlet__head-text">
+																			List Jenis Bahan
+																		</h3>
+																	</div>
+																</div>
+																<div class="col-md-4 offset-md-4">
+																	<div class="m-input-icon m-input-icon--left">
+																		<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="generalSearch">
+																		<span class="m-input-icon__icon m-input-icon__icon--left">
+																			<span>
+																				<i class="la la-search"></i>
+																			</span>
+																		</span>
+																	</div>
+																</div>
+															</div>
+														</div>
+													</div>
+												</div>
+												<!--end: Search Form -->
+												<!--begin: Datatable -->
+												<!-- <div class="m_datatable" id="local_data"></div> -->
+												<table class="table" id="tbl_list_jenis_bahan_lembar">
+													<thead>
+														<tr>
+															<th>No</th>
+															<th>Nama Bahan</th>
+															<th>Aksi</th>
+														</tr>
+													</thead>
+													<tbody>
+														<tr>
+															<td>1</td>
+															<td>Kartu Nama</td>
+															<td>
+																<a onclick="hapus_data();" class="btn btn-sm btn-danger" style="color:white; width:80px;">Hapus</a>
+															</td>
+														</tr>
+														<tr>
+															<td>2</td>
+															<td>Kongkurt</td>
+															<td>
+																<a onclick="hapus_data();" class="btn btn-sm btn-danger" style="color:white; width:80px;">Hapus</a>
+															</td>
+														</tr>
+														<tr>
+															<td>3</td>
+															<td>HVS</td>
+															<td>
+																<a onclick="hapus_data();" class="btn btn-sm btn-danger" style="color:white; width:80px;">Hapus</a>
+															</td>
+														</tr>
+														<tr>
+															<td>4</td>
+															<td>Kuarto</td>
+															<td>
+																<a onclick="hapus_data();" class="btn btn-sm btn-danger" style="color:white; width:80px;">Hapus</a>
+															</td>
+														</tr>
+														<tr>
+															<td>5</td>
+															<td>Kingstruk</td>
+															<td>
+																<a onclick="hapus_data();" class="btn btn-sm btn-danger" style="color:white; width:80px;" >Hapus</a>
+															</td>
+														</tr>
+													</tbody>
+												</table>
+												<!--end: Datatable -->
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- end:: Body -->
+		<!-- begin::Footer -->
+		<footer class="m-grid__item		m-footer ">
+			<div class="m-container m-container--fluid m-container--full-height m-page__container">
+				<div class="m-stack m-stack--flex-tablet-and-mobile m-stack--ver m-stack--desktop">
+					<div class="m-stack__item m-stack__item--left m-stack__item--middle m-stack__item--last">
+						<span class="m-footer__copyright">
+							Upa'na Studio
+						</span>
+					</div>
+
+				</div>
+			</div>
+		</footer>
+		<!-- end::Footer -->
+	</div>
+	<!-- end:: Page -->		    
+	<!-- begin::Scroll Top -->
+	<div class="m-scroll-top m-scroll-top--skin-top" data-toggle="m-scroll-top" data-scroll-offset="500" data-scroll-speed="300">
+		<i class="la la-arrow-up"></i>
+	</div>
+	<!-- end::Scroll Top -->		    
+
+	<!--begin::Base Scripts -->
+	<script src="../../../assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
+	<script src="../../../assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
+	<!--end::Base Scripts -->   
+	<!--begin::Page Vendors -->
+	<script src="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.js" type="text/javascript"></script>
+	<!--end::Page Vendors -->  
+	<!--begin::Page Snippets -->
+	<script src="../../../assets/app/js/dashboard.js" type="text/javascript"></script>
+	<!--end::Page Snippets -->
+	<script type="text/javascript">
+		var tbl_list_jenis_bahan_lembar = $('#tbl_list_jenis_bahan_lembar').mDatatable({
+			data: {
+				saveState: {cookie: false},
+			},
+			// layout definition
+			layout: {
+				theme: 'default', // datatable theme
+				class: '', // custom wrapper class
+				scroll: false, // enable/disable datatable scroll both horizontal and vertical when needed.
+				// height: 450, // datatable's body's fixed height
+				footer: false // display/hide footer
+			},
+
+			// column sorting
+			sortable: true,
+			order: [[1,"desc"]],
+			search: {
+				input: $('#generalSearch'),
+			},
+			columns: [
+
+			{
+				field: 'No',
+				textAlign: 'center',
+
+			},
+			{
+				field: 'Nama Bahan',
+				textAlign: 'center',
+
+			},
+			{
+				field: 'Aksi',
+				textAlign: 'center',
+
+			}
+
+			],
+		});
+	</script>
+	<script>
+		function hapus_data(type,id) {
+			swal({
+				title: "Anda yakin ingin menghapus data ini?!",
+				text: "Semua data yang memakai data ini akan ikut terhapus.",
+				icon: "warning",
+
+				confirmButtonText: "<span><i class='la la-trash'></i><span>Ya, Hapus!</span></span>",
+				confirmButtonClass: "btn btn-danger m-btn m-btn--pill m-btn--air m-btn--icon",
+
+				showCancelButton: true,
+				cancelButtonText: "<span><i class='la la-close'></i><span>Batalkan</span></span>",
+				cancelButtonClass: "btn btn-secondary m-btn m-btn--pill m-btn--icon",
+				showLoaderOnConfirm: true
+			}).then(function(result) {
+				if (result.value) {
+					var token = $("[name='__CsrfTokenValid']").val();
+					$.post("<?=ga_url('master_data/hapus_data')?>", { id: id, __CsrfTokenValid: token, type : type })
+					.done(function (data) {
+						if (data.success) {
+							swal({
+								title: 'Berhasil!',
+								text: "Data telah dihapus",
+								type: 'success',
+								showCancelButton: false,
+								confirmButtonText: 'Kembali ke beranda',
+								closeOnConfirm: false
+
+							}).then(function(result) {
+								if (result.value) {
+									window.location.href = "<?=ga_url('master_data')?>";
+								}
+							});
+						} else {
+							swal(
+								'Gagal!',
+								'Data gagal dihapus!',
+								'error'
+								)
+						}
+					})
+					.fail(function () {
+						swal(
+							'Gagal!',
+							'Cek Koneksi anda!',
+							'error'
+							);
+					});
+				}
+			});
+		}
+	</script>
+</body>
+<!-- end::Body -->
+</html>
diff --git a/GA/index.html b/GA/index.html
index 24330f9..74d83ce 100644
--- a/GA/index.html
+++ b/GA/index.html
@@ -12,304 +12,343 @@
 License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
 -->
 <html lang="en" >
-	<!-- begin::Head -->
-	<head>
-		<meta charset="utf-8" />
-		<title>
-			Purchasing | Dashboard
-		</title>
-		<meta name="description" content="Latest updates and statistic charts">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-		<!--begin::Web font -->
-		<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
-		<script>
-          WebFont.load({
-            google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
-            active: function() {
-                sessionStorage.fonts = true;
-            }
-          });
-		</script>
-		<script src="utils.js"></script>
-		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>
-		<!--end::Web font -->
-        <!--begin::Base Styles -->  
-        <!--begin::Page Vendors -->
-		<link href="../assets/vendors/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
-		<!--end::Page Vendors -->
-		<link href="../assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
-		<link href="../assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
-		<!-- begin:: Style tambahan -->
-		<link href="../assets/demo/default/base/pelangi-style.css" rel="stylesheet" type="text/css">
-		<!-- end:: Style tambahan -->
-		<!--end::Base Styles -->
-		<link rel="shortcut icon" href="../assets/demo/default/media/img/logo/favicon.ico" />
-		<style> 
-			canvas {
-				-moz-user-select: none ;
-				-webkit-user-select: none;
-				-ms-user-select: none;
+<!-- begin::Head -->
+<head>
+	<meta charset="utf-8" />
+	<title>
+		Purchasing | Dashboard
+	</title>
+	<meta name="description" content="Latest updates and statistic charts">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<!--begin::Web font -->
+	<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
+	<script>
+		WebFont.load({
+			google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
+			active: function() {
+				sessionStorage.fonts = true;
 			}
-		</style>
-	</head>
-	<!-- end::Head -->
-    <!-- end::Body -->
-	<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
-		<!-- begin:: Page -->
-		<div class="m-grid m-grid--hor m-grid--root m-page">
-			<!-- BEGIN: Header -->
-			<header class="m-grid__item    m-header "  data-minimize-offset="200" data-minimize-mobile-offset="200" >
-				<div class="m-container m-container--fluid m-container--full-height">
-					<div class="m-stack m-stack--ver m-stack--desktop">
-						<!-- BEGIN: Brand -->
-						<div class="m-stack__item m-brand  m-brand--skin-dark ">
-							<div class="m-stack m-stack--ver m-stack--general">
-								<div class="m-stack__item m-stack__item--middle m-brand__logo">
-									<a href="index.html" class="m-brand__logo-wrapper">
-										<img alt="" src="../assets/demo/default/media/img/logo/logo_default_dark.png"/>
-									</a>
-								</div>
-								<div class="m-stack__item m-stack__item--middle m-brand__tools">
-									<!-- BEGIN: Left Aside Minimize Toggle -->
-									<a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block">
-										<span></span>
-									</a>
-									<!-- END -->
-									<!-- BEGIN: Responsive Aside Left Menu Toggler -->
-									<a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block">
-										<span></span>
-									</a>
-									<!-- END -->
-									<!-- BEGIN: Responsive Header Menu Toggler -->
-									<a id="m_aside_header_menu_mobile_toggle" href="javascript:;" class="m-brand__icon m-brand__toggler m--visible-tablet-and-mobile-inline-block">
-										<span></span>
-									</a>
-									<!-- END -->
-									<!-- BEGIN: Topbar Toggler -->
-									<a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block">
-										<i class="flaticon-more"></i>
-									</a>
-									<!-- BEGIN: Topbar Toggler -->
-								</div>
-							</div>
-						</div>
-						<!-- END: Brand -->
-						<div class="m-stack__item m-stack__item--fluid m-header-head" id="m_header_nav">
-							<!-- BEGIN: Horizontal Menu -->
-							<div id="m_header_menu" class="m-header-menu m-aside-header-menu-mobile m-aside-header-menu-mobile--offcanvas  m-header-menu--skin-light m-header-menu--submenu-skin-light m-aside-header-menu-mobile--skin-dark m-aside-header-menu-mobile--submenu-skin-dark "  >
-								<img style="display: inline; float: left; height: inherit; width: auto" src="../assets/demo/default/media/img/misc/purchasing_2.png">
-							</div>
-							<!-- END: Horizontal Menu -->								
-							<!-- BEGIN: Topbar -->
-							<div id="m_header_topbar" class="m-topbar  m-stack m-stack--ver m-stack--general">
-								<div class="m-stack__item m-topbar__nav-wrapper">
-									<ul class="m-topbar__nav m-nav m-nav--inline">
-										<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
-											<div class="user_wrapper">
-												<p style="margin-bottom: 0px"><i class="fa fa-user"> </i> Ahmad Rifaldi</p>
-											</div>
-										</li>
-										<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
-											<div class="logout_wrapper">
-												<a margin-right: 10px;" href="snippets/pages/user/login-1.html" class="btn m-btn--pill    btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder">
-													Logout
-												</a>
-											</div>
-										</li>
-									</ul>
-								</div>
-							</div>
-							<!-- END: Topbar -->
-						</div>
-					</div>
-				</div>
-			</header>
-			<!-- END: Header -->		
-			<!-- begin::Body -->
-			<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
-				<!-- BEGIN: Left Aside -->
-				<button class="m-aside-left-close  m-aside-left-close--skin-dark " id="m_aside_left_close_btn">
-					<i class="la la-close"></i>
-				</button>
-				<div id="m_aside_left" class="m-grid__item	m-aside-left  m-aside-left--skin-dark ">
-					<!-- BEGIN: Aside Menu -->
-					<div id="m_ver_menu" class="m-aside-menu  m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark" data-menu-vertical="true" data-menu-scrollable="false" data-menu-dropdown-timeout="500" >
-						<ul class="m-menu__nav  m-menu__nav--dropdown-submenu-arrow ">
-							<!-- DASHBOARD -->
-							<li class="m-menu__item  m-menu__item--active" aria-haspopup="true" >
-								<a  href="index.html" class="m-menu__link ">
-									<i class="m-menu__link-icon flaticon-line-graph"></i>
-									<span class="m-menu__link-title">
-										<span class="m-menu__link-wrap">
-											<span class="m-menu__link-text">
-												Dashboard
-											</span>
-										</span>
-									</span>
-								</a>
-							</li>
-							<!-- Bahan Baku -->
-							<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="components/base/bahan_baku.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon flaticon-graphic-2"></i>
-									<span class="m-menu__link-text">
-										Bahan Baku
-									</span>
+		});
+	</script>
+	<script src="utils.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>
+	<!--end::Web font -->
+	<!--begin::Base Styles -->  
+	<!--begin::Page Vendors -->
+	<link href="../assets/vendors/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
+	<!--end::Page Vendors -->
+	<link href="../assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
+	<link href="../assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
+	<!-- begin:: Style tambahan -->
+	<link href="../assets/demo/default/base/pelangi-style.css" rel="stylesheet" type="text/css">
+	<!-- end:: Style tambahan -->
+	<!--end::Base Styles -->
+	<link rel="shortcut icon" href="../assets/demo/default/media/img/logo/favicon.ico" />
+	<style> 
+		canvas {
+			-moz-user-select: none ;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+		}
+	</style>	
+</head>
+<!-- end::Head -->
+<!-- end::Body -->
+<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
+	<!-- begin:: Page -->
+	<div class="m-grid m-grid--hor m-grid--root m-page">
+		<!-- BEGIN: Header -->
+		<header class="m-grid__item    m-header "  data-minimize-offset="200" data-minimize-mobile-offset="200" >
+			<div class="m-container m-container--fluid m-container--full-height">
+				<div class="m-stack m-stack--ver m-stack--desktop">
+					<!-- BEGIN: Brand -->
+					<div class="m-stack__item m-brand  m-brand--skin-dark ">
+						<div class="m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-stack__item--middle m-brand__logo">
+								<a href="index.html" class="m-brand__logo-wrapper">
+									<img alt="" src="../assets/demo/default/media/img/logo/logo_default_dark.png"/>
 								</a>
-							</li>
-							<!-- Master Data -->
-							<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="components/base/master_data.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon fa fa-database"></i>
-									<span class="m-menu__link-text">
-										Master Data
-									</span>
+							</div>
+							<div class="m-stack__item m-stack__item--middle m-brand__tools">
+								<!-- BEGIN: Left Aside Minimize Toggle -->
+								<a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block">
+									<span></span>
 								</a>
-							</li>
-							<!-- Relasi -->
-							<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="components/base/relasi.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon fa fa-code-fork"></i>
-									<span class="m-menu__link-text">
-										Relasi
-									</span>
+								<!-- END -->
+								<!-- BEGIN: Responsive Aside Left Menu Toggler -->
+								<a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block">
+									<span></span>
 								</a>
-							</li>
-							<!-- Harga -->
-							<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="components/base/harga.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon fa 	fa-calculator"></i>
-									<span class="m-menu__link-text">
-										Harga
-									</span>
+								<!-- END -->
+								<!-- BEGIN: Responsive Header Menu Toggler -->
+								<a id="m_aside_header_menu_mobile_toggle" href="javascript:;" class="m-brand__icon m-brand__toggler m--visible-tablet-and-mobile-inline-block">
+									<span></span>
 								</a>
-							</li>
-                            <!-- KEHADIRAN -->
-							<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="components/base/kehadiran.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon fa fa-user-o"></i>
-									<span class="m-menu__link-text">
-										Kehadiran
-									</span>
-								</a>	
-							</li>
-							<!-- Settings -->
-							<li class="m-menu__item" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="components/base/settings.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon fa fa-gear"></i>
-									<span class="m-menu__link-text">
-										Pengaturan
-									</span>
+								<!-- END -->
+								<!-- BEGIN: Topbar Toggler -->
+								<a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block">
+									<i class="flaticon-more"></i>
 								</a>
-							</li>
-						</ul>
+								<!-- BEGIN: Topbar Toggler -->
+							</div>
+						</div>
 					</div>
-					<!-- END: Aside Menu -->
-				</div>
-				<!-- END: Left Aside -->
-				<div class="m-grid__item m-grid__item--fluid m-wrapper">
-					<!-- BEGIN: Subheader -->
-					<div class="m-subheader ">
-						<div class="d-flex align-items-center">
-							<div class="mr-auto">
-								<h3 class="m-subheader__title m-subheader__title--separator">
-									Dashboard
-								</h3>
-								<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
-									<li class="m-nav__item m-nav__item--home">
-										<a href="index.html" class="m-nav__link m-nav__link--icon">
-											<i class="m-nav__link-icon la la-home"></i>
-										</a>
+					<!-- END: Brand -->
+					<div class="m-stack__item m-stack__item--fluid m-header-head" id="m_header_nav">
+						<!-- BEGIN: Horizontal Menu -->
+						<div id="m_header_menu" class="m-header-menu m-aside-header-menu-mobile m-aside-header-menu-mobile--offcanvas  m-header-menu--skin-light m-header-menu--submenu-skin-light m-aside-header-menu-mobile--skin-dark m-aside-header-menu-mobile--submenu-skin-dark "  >
+							<img style="display: inline; float: left; height: inherit; width: auto" src="../assets/demo/default/media/img/misc/purchasing_2.png">
+						</div>
+						<!-- END: Horizontal Menu -->								
+						<!-- BEGIN: Topbar -->
+						<div id="m_header_topbar" class="m-topbar  m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-topbar__nav-wrapper">
+								<ul class="m-topbar__nav m-nav m-nav--inline">
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="user_wrapper">
+											<p style="margin-bottom: 0px"><i class="fa fa-user"> </i> 		Fascal Ivandry
+											</p>
+										</div>
+									</li>
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="logout_wrapper">
+											<a margin-right: 10px; href="snippets/pages/user/login-1.html" class="btn m-btn--pill    btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder">
+												Logout
+											</a>
+										</div>
 									</li>
 								</ul>
 							</div>
 						</div>
+						<!-- END: Topbar -->
 					</div>
-					<!-- END: Subheader -->
-					<div class="m-content">
-						<div class="row">
-							<div class="col-lg-12">
-								<div class="m-portlet m-portlet--mobile">
-									<div style="padding: 20px" class="m-portlet__head">
-										<div class="m-portlet__head-caption">
-											<div class="m-portlet__head-title">
-												<h3 style="display: inline-block;" class="m-portlet__head-text">
-													<i class="fa fa-tasks"> </i> Table Bahan Baku
-												</h3>
-												<div class="m-input-icon m-input-icon--left">
-																<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="generalSearch">
-																<span class="m-input-icon__icon m-input-icon__icon--left">
-																	<span>
-																		<i class="la la-search"></i>
-																	</span>
-																</span>
-															</div>
+				</div>
+			</div>
+		</header>
+		<!-- END: Header -->		
+		<!-- begin::Body -->
+		<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
+			<!-- BEGIN: Left Aside -->
+			<button class="m-aside-left-close  m-aside-left-close--skin-dark " id="m_aside_left_close_btn">
+				<i class="la la-close"></i>
+			</button>
+			<div id="m_aside_left" class="m-grid__item	m-aside-left  m-aside-left--skin-dark ">
+				<!-- BEGIN: Aside Menu -->
+				<div id="m_ver_menu" class="m-aside-menu  m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark" data-menu-vertical="true" data-menu-scrollable="false" data-menu-dropdown-timeout="500" >
+					<ul class="m-menu__nav  m-menu__nav--dropdown-submenu-arrow ">
+						<!-- DASHBOARD -->
+						<li class="m-menu__item  m-menu__item--active" aria-haspopup="true" >
+							<a  href="index.html" class="m-menu__link ">
+								<i class="m-menu__link-icon flaticon-line-graph"></i>
+								<span class="m-menu__link-title">
+									<span class="m-menu__link-wrap">
+										<span class="m-menu__link-text">
+											Dashboard
+										</span>
+									</span>
+								</span>
+							</a>
+						</li>
+						<!-- Bahan Baku -->
+						<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="components/base/bahan_baku.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon flaticon-graphic-2"></i>
+								<span class="m-menu__link-text">
+									Bahan Baku
+								</span>
+							</a>
+						</li>
+						<!-- Master Data -->
+						<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="components/base/master_data.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon fa fa-database"></i>
+								<span class="m-menu__link-text">
+									Master Data
+								</span>
+							</a>
+						</li>
+						<!-- Relasi -->
+						<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="components/base/relasi.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon fa fa-code-fork"></i>
+								<span class="m-menu__link-text">
+									Relasi
+								</span>
+							</a>
+						</li>
+						<!-- Harga -->
+						<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="components/base/harga.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon fa 	fa-calculator"></i>
+								<span class="m-menu__link-text">
+									Harga
+								</span>
+							</a>
+						</li>
+						<!-- KEHADIRAN -->
+						<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="components/base/kehadiran.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon fa fa-user-o"></i>
+								<span class="m-menu__link-text">
+									Kehadiran
+								</span>
+							</a>	
+						</li>
+						<!-- Settings -->
+						<li class="m-menu__item" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="components/base/settings.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon fa fa-gear"></i>
+								<span class="m-menu__link-text">
+									Pengaturan
+								</span>
+							</a>
+						</li>
+					</ul>
+				</div>
+				<!-- END: Aside Menu -->
+			</div>
+			<!-- END: Left Aside -->
+			<div class="m-grid__item m-grid__item--fluid m-wrapper">
+				<!-- BEGIN: Subheader -->
+				<div class="m-subheader ">
+					<div class="d-flex align-items-center">
+						<div class="mr-auto">
+							<h3 class="m-subheader__title m-subheader__title--separator">
+								Dashboard
+							</h3>
+							<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
+								<li class="m-nav__item m-nav__item--home">
+									<a href="index.html" class="m-nav__link m-nav__link--icon">
+										<i class="m-nav__link-icon la la-home"></i>
+									</a>
+								</li>
+							</ul>
+						</div>
+						<select name="pilih_satuan" style="width: 350px" class="form-control m-input m-input--square pilih_satuan">
+							<option value="lembar">
+								Lembar
+							</option>
+							<option value="roll">
+								Roll
+							</option>
+						</select>
+					</div>
+				</div>
+				<!-- END: Subheader -->
+				<div class="m-content">
+					<div class="row">
+						<div class="col-lg-12">
+							<div class="m-portlet m-portlet--mobile">
+								<div style="padding: 20px" class="m-portlet__head">
+									<div class="m-portlet__head-caption">
+										<div class="m-portlet__head-title">
+											<h3 style="display: inline-block;" class="m-portlet__head-text">
+												<i class="fa fa-tasks"> </i> Table Bahan Baku
+											</h3>
+											<div class="m-input-icon m-input-icon--left">
+												<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="generalSearch">
+												<span class="m-input-icon__icon m-input-icon__icon--left">
+													<span>
+														<i class="la la-search"></i>
+													</span>
+												</span>
 											</div>
 										</div>
 									</div>
-									<div class="m-portlet__body">
-										<canvas id="bahan-baku"></canvas>
-									</div>
+								</div>
+								<div class="m-portlet__body">
+									<canvas id="bahan-baku-lembar"></canvas>
+									<canvas style="display: none" id="bahan-baku-roll"></canvas>
 								</div>
 							</div>
-						</div>	
-					</div>
+						</div>
+					</div>	
 				</div>
 			</div>
-			<!-- end:: Body -->
-			<!-- begin::Footer -->
-			<footer class="m-grid__item		m-footer ">
-				<div class="m-container m-container--fluid m-container--full-height m-page__container">
-					<div class="m-stack m-stack--flex-tablet-and-mobile m-stack--ver m-stack--desktop">
-						<div class="m-stack__item m-stack__item--left m-stack__item--middle m-stack__item--last">
-							<span class="m-footer__copyright">
-								Upa'na Studio
-							</span>
-						</div>
+		</div>
+		<!-- end:: Body -->
+		<!-- begin::Footer -->
+		<footer class="m-grid__item		m-footer ">
+			<div class="m-container m-container--fluid m-container--full-height m-page__container">
+				<div class="m-stack m-stack--flex-tablet-and-mobile m-stack--ver m-stack--desktop">
+					<div class="m-stack__item m-stack__item--left m-stack__item--middle m-stack__item--last">
+						<span class="m-footer__copyright">
+							Upa'na Studio
+						</span>
 					</div>
 				</div>
-			</footer>
-			<!-- end::Footer -->
-		</div>
-		<!-- end:: Page -->		    
-	    <!-- begin::Scroll Top -->
-		<div class="m-scroll-top m-scroll-top--skin-top" data-toggle="m-scroll-top" data-scroll-offset="500"data-scroll-speed="300">
-			<i class="la la-arrow-up"></i>
-		</div>
-		<!-- end::Scroll Top -->		    
-			
-    	<!--begin::Base Scripts -->
-		<script src="../assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
-		<script src="../assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
-		<!--end::Base Scripts -->   
-        <!--begin::Page Vendors -->
-		<!-- <script src="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.js" type="text/javascript"></script>  -->
-		<!--end::Page Vendors -->  
-        <!--begin::Page Snippets -->
-		<!-- <script src="../../../assets/app/js/dashboard.js" type="text/javascript"></script> -->
-		<!--end::Page Snippets -->
-		<script>
-			var MONTHS = ['Bahan 1', 'Bahan 2', 'Bahan 3', 'Bahan 4', 'Bahan 5', 'Bahan 6', 'Bahan 7', 'Bahan 8', 'Bahan 9', 'Bahan 10', 'Bahan 11', 'Bahan 12'];
-			const data = [10,40,30,-29,50,-40,-40,10,20,-30,12,43];
-			const colours = data.map((value) => value < 0 ? '#C62828' : '#8BC34A');
-			var color = Chart.helpers.color;
-			var horizontalBarChartData = {
-				labels: ['Bahan 1', 'Bahan 2', 'Bahan 3', 'Bahan 4', 'Bahan 5', 'Bahan 6', 'Bahan 7', 'Bahan 8', 'Bahan 9', 'Bahan 10', 'Bahan 11', 'Bahan 12'],
-				datasets: [{
-					label: 'Jumlah Bahan',
-					backgroundColor: colours,
-					borderColor: window.chartColors.white,
-					borderWidth: 0,
-					data: data
-				}]
-			};
-			window.onload = function() {
-				var ctx = document.getElementById('bahan-baku').getContext('2d');
-				window.myHorizontalBar = new Chart(ctx, {
-					type: 'horizontalBar',
-					data: horizontalBarChartData,
-					options: {
+			</div>
+		</footer>
+		<!-- end::Footer -->
+	</div>
+	<!-- end:: Page -->		    
+	<!-- begin::Scroll Top -->
+	<div class="m-scroll-top m-scroll-top--skin-top" data-toggle="m-scroll-top" data-scroll-offset="500"data-scroll-speed="300">
+		<i class="la la-arrow-up"></i>
+	</div>
+	<!-- end::Scroll Top -->		    
+
+	<!--begin::Base Scripts -->
+	<script src="../assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
+	<script src="../assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
+	<script>
+		var MONTHS = ['Bahan 1', 'Bahan 2', 'Bahan 3', 'Bahan 4', 'Bahan 5', 'Bahan 6', 'Bahan 7', 'Bahan 8', 'Bahan 9', 'Bahan 10', 'Bahan 11', 'Bahan 12'];
+		const data = [10,40,30,-29,50,-40,-40,10,20,-30,12,43];
+		const colours = data.map((value) => value < 0 ? '#C62828' : '#8BC34A');
+		var color = Chart.helpers.color;
+		var horizontalBarChartData = {
+			labels: ['Bahan 1', 'Bahan 2', 'Bahan 3', 'Bahan 4', 'Bahan 5', 'Bahan 6', 'Bahan 7', 'Bahan 8', 'Bahan 9', 'Bahan 10', 'Bahan 11', 'Bahan 12'],
+			datasets: [{
+				label: 'Jumlah Bahan',
+				backgroundColor: colours,
+				borderColor: window.chartColors.white,
+				borderWidth: 0,
+				data: data
+			}]
+		};
+		window.onload = function() {
+			var ctx = document.getElementById('bahan-baku-lembar').getContext('2d');
+			window.myHorizontalBar = new Chart(ctx, {
+				type: 'horizontalBar',
+				data: horizontalBarChartData,
+				options: {
+						// Elements options apply to all of the options unless overridden in a dataset
+						// In this case, we are setting the border of each horizontal bar to be 2px wide
+						elements: {
+							rectangle: {
+								borderWidth: 0,
+							}
+						},
+						responsive: true,
+						legend: {
+							position: 'right',
+						},
+					}
+				});
+		};
+	</script>
+	<script>
+		var MONTHS = ['Bahan A', 'Bahan B', 'Bahan C', 'Bahan D', 'Bahan E', 'Bahan F', 'Bahan G', 'Bahan H', 'Bahan I', 'Bahan J', 'Bahan K', 'Bahan L'];
+		const data = [10,40,30,-29,50,-40,-40,10,20,-30,12,43];
+		const colours = data.map((value) => value < 0 ? '#C62828' : '#8BC34A');
+		var color = Chart.helpers.color;
+		var horizontalBarChartData = {
+			labels: ['Bahan 1', 'Bahan 2', 'Bahan 3', 'Bahan 4', 'Bahan 5', 'Bahan 6', 'Bahan 7', 'Bahan 8', 'Bahan 9', 'Bahan 10', 'Bahan 11', 'Bahan 12'],
+			datasets: [{
+				label: 'Jumlah Bahan',
+				backgroundColor: colours,
+				borderColor: window.chartColors.white,
+				borderWidth: 0,
+				data: data
+			}]
+		};
+		window.onload = function() {
+			var ctx = document.getElementById('bahan-baku-roll').getContext('2d');
+			window.myHorizontalBar = new Chart(ctx, {
+				type: 'horizontalBar',
+				data: horizontalBarChartData,
+				options: {
 						// Elements options apply to all of the options unless overridden in a dataset
 						// In this case, we are setting the border of each horizontal bar to be 2px wide
 						elements: {
@@ -323,8 +362,9 @@ <h3 style="display: inline-block;" class="m-portlet__head-text">
 						},
 					}
 				});
-			};
-		</script>
-	</body>
-	<!-- end::Body -->
+		};
+	</script>
+	<script src="http://localhost:35729/livereload.js"></script>
+</body>
+<!-- end::Body -->
 </html>
diff --git a/GA/index_lembar.html b/GA/index_lembar.html
new file mode 100644
index 0000000..5c85c6b
--- /dev/null
+++ b/GA/index_lembar.html
@@ -0,0 +1,300 @@
+<!DOCTYPE html>
+<!-- 
+Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 4
+Author: KeenThemes
+Website: http://www.keenthemes.com/
+Contact: support@keenthemes.com
+Follow: www.twitter.com/keenthemes
+Dribbble: www.dribbble.com/keenthemes
+Like: www.facebook.com/keenthemes
+Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
+Renew Support: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
+License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
+-->
+<html lang="en" >
+<!-- begin::Head -->
+<head>
+	<meta charset="utf-8" />
+	<title>
+		Purchasing | Dashboard
+	</title>
+	<meta name="description" content="Latest updates and statistic charts">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<!--begin::Web font -->
+	<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
+	<script>
+		WebFont.load({
+			google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
+			active: function() {
+				sessionStorage.fonts = true;
+			}
+		});
+	</script>
+	<script src="utils.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>
+	<!--end::Web font -->
+	<!--begin::Base Styles -->  
+	<!--begin::Page Vendors -->
+	<link href="../assets/vendors/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
+	<!--end::Page Vendors -->
+	<link href="../assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
+	<link href="../assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
+	<!-- begin:: Style tambahan -->
+	<link href="../assets/demo/default/base/pelangi-style.css" rel="stylesheet" type="text/css">
+	<!-- end:: Style tambahan -->
+	<!--end::Base Styles -->
+	<link rel="shortcut icon" href="../assets/demo/default/media/img/logo/favicon.ico" />
+	<style> 
+		canvas {
+			-moz-user-select: none ;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+		}
+	</style>	
+</head>
+<!-- end::Head -->
+<!-- end::Body -->
+<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
+	<!-- begin:: Page -->
+	<div class="m-grid m-grid--hor m-grid--root m-page">
+		<!-- BEGIN: Header -->
+		<header class="m-grid__item    m-header "  data-minimize-offset="200" data-minimize-mobile-offset="200" >
+			<div class="m-container m-container--fluid m-container--full-height">
+				<div class="m-stack m-stack--ver m-stack--desktop">
+					<!-- BEGIN: Brand -->
+					<div class="m-stack__item m-brand  m-brand--skin-dark ">
+						<div class="m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-stack__item--middle m-brand__logo">
+								<a href="index.html" class="m-brand__logo-wrapper">
+									<img alt="" src="../assets/demo/default/media/img/logo/logo_default_dark.png"/>
+								</a>
+							</div>
+							<div class="m-stack__item m-stack__item--middle m-brand__tools">
+								<!-- BEGIN: Left Aside Minimize Toggle -->
+								<a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block">
+									<span></span>
+								</a>
+								<!-- END -->
+								<!-- BEGIN: Responsive Aside Left Menu Toggler -->
+								<a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block">
+									<span></span>
+								</a>
+								<!-- END -->
+								<!-- BEGIN: Responsive Header Menu Toggler -->
+								<a id="m_aside_header_menu_mobile_toggle" href="javascript:;" class="m-brand__icon m-brand__toggler m--visible-tablet-and-mobile-inline-block">
+									<span></span>
+								</a>
+								<!-- END -->
+								<!-- BEGIN: Topbar Toggler -->
+								<a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block">
+									<i class="flaticon-more"></i>
+								</a>
+								<!-- BEGIN: Topbar Toggler -->
+							</div>
+						</div>
+					</div>
+					<!-- END: Brand -->
+					<div class="m-stack__item m-stack__item--fluid m-header-head" id="m_header_nav">
+						<!-- BEGIN: Horizontal Menu -->
+						<div id="m_header_menu" class="m-header-menu m-aside-header-menu-mobile m-aside-header-menu-mobile--offcanvas  m-header-menu--skin-light m-header-menu--submenu-skin-light m-aside-header-menu-mobile--skin-dark m-aside-header-menu-mobile--submenu-skin-dark "  >
+							<img style="display: inline; float: left; height: inherit; width: auto" src="../assets/demo/default/media/img/misc/purchasing_2.png">
+						</div>
+						<!-- END: Horizontal Menu -->								
+						<!-- BEGIN: Topbar -->
+						<div id="m_header_topbar" class="m-topbar  m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-topbar__nav-wrapper">
+								<ul class="m-topbar__nav m-nav m-nav--inline">
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="user_wrapper">
+											<p style="margin-bottom: 0px"><i class="fa fa-user"> </i> 		Fascal Ivandry
+											</p>
+										</div>
+									</li>
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="logout_wrapper">
+											<a margin-right: 10px; href="snippets/pages/user/login-1.html" class="btn m-btn--pill    btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder">
+												Logout
+											</a>
+										</div>
+									</li>
+								</ul>
+							</div>
+						</div>
+						<!-- END: Topbar -->
+					</div>
+				</div>
+			</div>
+		</header>
+		<!-- END: Header -->		
+		<!-- begin::Body -->
+		<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
+			<!-- BEGIN: Left Aside -->
+			<button class="m-aside-left-close  m-aside-left-close--skin-dark " id="m_aside_left_close_btn">
+				<i class="la la-close"></i>
+			</button>
+			<div id="m_aside_left" class="m-grid__item	m-aside-left  m-aside-left--skin-dark ">
+				<!-- BEGIN: Aside Menu -->
+				
+				<!-- END: Aside Menu -->
+			</div>
+			<!-- END: Left Aside -->
+			<div class="m-grid__item m-grid__item--fluid m-wrapper">
+				<!-- BEGIN: Subheader -->
+				<div class="m-subheader ">
+					<div class="d-flex align-items-center">
+						<div class="mr-auto">
+							<h3 class="m-subheader__title m-subheader__title--separator">
+								Dashboard
+							</h3>
+							<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
+								<li class="m-nav__item m-nav__item--home">
+									<a href="index.html" class="m-nav__link m-nav__link--icon">
+										<i class="m-nav__link-icon la la-home"></i>
+									</a>
+								</li>
+							</ul>
+						</div>
+						<select style="width: 350px" selected="" name="pilih_satuan" class="form-control m-input m-input--square pilih_satuan" onchange="location = this.options[this.selectedIndex].value;">
+							<option value="http://localhost/DashboardPelangi/ptpelangi/ga/index_lembar.html">
+								Lembar
+							</option>
+							<option  value="http://localhost/DashboardPelangi/ptpelangi/ga/index_roll.html">
+								Roll
+							</option>
+						</select>
+					</div>
+				</div>
+				<!-- END: Subheader -->
+				<div class="m-content">
+					<div class="row">
+						<div class="col-lg-12">
+							<div class="m-portlet m-portlet--mobile">
+								<div style="padding: 20px" class="m-portlet__head">
+									<div class="m-portlet__head-caption">
+										<div class="m-portlet__head-title">
+											<h3 style="display: inline-block;" class="m-portlet__head-text">
+												<i class="fa fa-tasks"> </i> Table Bahan Baku
+											</h3>
+											<div class="m-input-icon m-input-icon--left">
+												<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="generalSearch">
+												<span class="m-input-icon__icon m-input-icon__icon--left">
+													<span>
+														<i class="la la-search"></i>
+													</span>
+												</span>
+											</div>
+										</div>
+									</div>
+								</div>
+								<div class="m-portlet__body">
+									<canvas id="bahan-baku-lembar"></canvas>
+									<canvas style="display: none" id="bahan-baku-roll"></canvas>
+								</div>
+							</div>
+						</div>
+					</div>	
+				</div>
+			</div>
+		</div>
+		<!-- end:: Body -->
+		<!-- begin::Footer -->
+		<footer class="m-grid__item		m-footer ">
+			<div class="m-container m-container--fluid m-container--full-height m-page__container">
+				<div class="m-stack m-stack--flex-tablet-and-mobile m-stack--ver m-stack--desktop">
+					<div class="m-stack__item m-stack__item--left m-stack__item--middle m-stack__item--last">
+						<span class="m-footer__copyright">
+							Upa'na Studio
+						</span>
+					</div>
+				</div>
+			</div>
+		</footer>
+		<!-- end::Footer -->
+	</div>
+	<!-- end:: Page -->		    
+	<!-- begin::Scroll Top -->
+	<div class="m-scroll-top m-scroll-top--skin-top" data-toggle="m-scroll-top" data-scroll-offset="500"data-scroll-speed="300">
+		<i class="la la-arrow-up"></i>
+	</div>
+	<!-- end::Scroll Top -->		    
+
+	<!--begin::Base Scripts -->
+	<script src="../assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
+	<script src="../assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
+	<script>
+		var MONTHS = ['Bahan 1', 'Bahan 2', 'Bahan 3', 'Bahan 4', 'Bahan 5', 'Bahan 6', 'Bahan 7', 'Bahan 8', 'Bahan 9', 'Bahan 10', 'Bahan 11', 'Bahan 12'];
+		const data = [10,40,30,-29,50,-40,-40,10,20,-30,12,43];
+		const colours = data.map((value) => value < 0 ? '#C62828' : '#8BC34A');
+		var color = Chart.helpers.color;
+		var horizontalBarChartData = {
+			labels: ['Bahan 1', 'Bahan 2', 'Bahan 3', 'Bahan 4', 'Bahan 5', 'Bahan 6', 'Bahan 7', 'Bahan 8', 'Bahan 9', 'Bahan 10', 'Bahan 11', 'Bahan 12'],
+			datasets: [{
+				label: 'Jumlah Bahan',
+				backgroundColor: colours,
+				borderColor: window.chartColors.white,
+				borderWidth: 0,
+				data: data
+			}]
+		};
+		window.onload = function() {
+			var ctx = document.getElementById('bahan-baku-lembar').getContext('2d');
+			window.myHorizontalBar = new Chart(ctx, {
+				type: 'horizontalBar',
+				data: horizontalBarChartData,
+				options: {
+						// Elements options apply to all of the options unless overridden in a dataset
+						// In this case, we are setting the border of each horizontal bar to be 2px wide
+						elements: {
+							rectangle: {
+								borderWidth: 0,
+							}
+						},
+						responsive: true,
+						legend: {
+							position: 'right',
+						},
+					}
+				});
+		};
+	</script>
+	<script>
+		var MONTHS = ['Bahan A', 'Bahan B', 'Bahan C', 'Bahan D', 'Bahan E', 'Bahan F', 'Bahan G', 'Bahan H', 'Bahan I', 'Bahan J', 'Bahan K', 'Bahan L'];
+		const data = [10,40,30,-29,50,-40,-40,10,20,-30,12,43];
+		const colours = data.map((value) => value < 0 ? '#C62828' : '#8BC34A');
+		var color = Chart.helpers.color;
+		var horizontalBarChartData = {
+			labels: ['Bahan 1', 'Bahan 2', 'Bahan 3', 'Bahan 4', 'Bahan 5', 'Bahan 6', 'Bahan 7', 'Bahan 8', 'Bahan 9', 'Bahan 10', 'Bahan 11', 'Bahan 12'],
+			datasets: [{
+				label: 'Jumlah Bahan',
+				backgroundColor: colours,
+				borderColor: window.chartColors.white,
+				borderWidth: 0,
+				data: data
+			}]
+		};
+		window.onload = function() {
+			var ctx = document.getElementById('bahan-baku-roll').getContext('2d');
+			window.myHorizontalBar = new Chart(ctx, {
+				type: 'horizontalBar',
+				data: horizontalBarChartData,
+				options: {
+						// Elements options apply to all of the options unless overridden in a dataset
+						// In this case, we are setting the border of each horizontal bar to be 2px wide
+						elements: {
+							rectangle: {
+								borderWidth: 0,
+							}
+						},
+						responsive: true,
+						legend: {
+							position: 'right',
+						},
+					}
+				});
+		};
+	</script>
+	<script src="http://localhost:35729/livereload.js"></script>
+</body>
+<!-- end::Body -->
+</html>
diff --git a/GA/index_roll.html b/GA/index_roll.html
new file mode 100644
index 0000000..e197a62
--- /dev/null
+++ b/GA/index_roll.html
@@ -0,0 +1,299 @@
+<!DOCTYPE html>
+<!-- 
+Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 4
+Author: KeenThemes
+Website: http://www.keenthemes.com/
+Contact: support@keenthemes.com
+Follow: www.twitter.com/keenthemes
+Dribbble: www.dribbble.com/keenthemes
+Like: www.facebook.com/keenthemes
+Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
+Renew Support: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
+License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
+-->
+<html lang="en" >
+<!-- begin::Head -->
+<head>
+	<meta charset="utf-8" />
+	<title>
+		Purchasing | Dashboard
+	</title>
+	<meta name="description" content="Latest updates and statistic charts">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<!--begin::Web font -->
+	<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
+	<script>
+		WebFont.load({
+			google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
+			active: function() {
+				sessionStorage.fonts = true;
+			}
+		});
+	</script>
+	<script src="utils.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>
+	<!--end::Web font -->
+	<!--begin::Base Styles -->  
+	<!--begin::Page Vendors -->
+	<link href="../assets/vendors/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
+	<!--end::Page Vendors -->
+	<link href="../assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
+	<link href="../assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
+	<!-- begin:: Style tambahan -->
+	<link href="../assets/demo/default/base/pelangi-style.css" rel="stylesheet" type="text/css">
+	<!-- end:: Style tambahan -->
+	<!--end::Base Styles -->
+	<link rel="shortcut icon" href="../assets/demo/default/media/img/logo/favicon.ico" />
+	<style> 
+		canvas {
+			-moz-user-select: none ;
+			-webkit-user-select: none;
+			-ms-user-select: none;
+		}
+	</style>	
+</head>
+<!-- end::Head -->
+<!-- end::Body -->
+<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
+	<!-- begin:: Page -->
+	<div class="m-grid m-grid--hor m-grid--root m-page">
+		<!-- BEGIN: Header -->
+		<header class="m-grid__item    m-header "  data-minimize-offset="200" data-minimize-mobile-offset="200" >
+			<div class="m-container m-container--fluid m-container--full-height">
+				<div class="m-stack m-stack--ver m-stack--desktop">
+					<!-- BEGIN: Brand -->
+					<div class="m-stack__item m-brand  m-brand--skin-dark ">
+						<div class="m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-stack__item--middle m-brand__logo">
+								<a href="index.html" class="m-brand__logo-wrapper">
+									<img alt="" src="../assets/demo/default/media/img/logo/logo_default_dark.png"/>
+								</a>
+							</div>
+							<div class="m-stack__item m-stack__item--middle m-brand__tools">
+								<!-- BEGIN: Left Aside Minimize Toggle -->
+								<a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block">
+									<span></span>
+								</a>
+								<!-- END -->
+								<!-- BEGIN: Responsive Aside Left Menu Toggler -->
+								<a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block">
+									<span></span>
+								</a>
+								<!-- END -->
+								<!-- BEGIN: Responsive Header Menu Toggler -->
+								<a id="m_aside_header_menu_mobile_toggle" href="javascript:;" class="m-brand__icon m-brand__toggler m--visible-tablet-and-mobile-inline-block">
+									<span></span>
+								</a>
+								<!-- END -->
+								<!-- BEGIN: Topbar Toggler -->
+								<a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block">
+									<i class="flaticon-more"></i>
+								</a>
+								<!-- BEGIN: Topbar Toggler -->
+							</div>
+						</div>
+					</div>
+					<!-- END: Brand -->
+					<div class="m-stack__item m-stack__item--fluid m-header-head" id="m_header_nav">
+						<!-- BEGIN: Horizontal Menu -->
+						<div id="m_header_menu" class="m-header-menu m-aside-header-menu-mobile m-aside-header-menu-mobile--offcanvas  m-header-menu--skin-light m-header-menu--submenu-skin-light m-aside-header-menu-mobile--skin-dark m-aside-header-menu-mobile--submenu-skin-dark "  >
+							<img style="display: inline; float: left; height: inherit; width: auto" src="../assets/demo/default/media/img/misc/purchasing_2.png">
+						</div>
+						<!-- END: Horizontal Menu -->								
+						<!-- BEGIN: Topbar -->
+						<div id="m_header_topbar" class="m-topbar  m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-topbar__nav-wrapper">
+								<ul class="m-topbar__nav m-nav m-nav--inline">
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="user_wrapper">
+											<p style="margin-bottom: 0px"><i class="fa fa-user"> </i> 		Fascal Ivandry
+											</p>
+										</div>
+									</li>
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="logout_wrapper">
+											<a margin-right: 10px; href="snippets/pages/user/login-1.html" class="btn m-btn--pill    btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder">
+												Logout
+											</a>
+										</div>
+									</li>
+								</ul>
+							</div>
+						</div>
+						<!-- END: Topbar -->
+					</div>
+				</div>
+			</div>
+		</header>
+		<!-- END: Header -->		
+		<!-- begin::Body -->
+		<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
+			<!-- BEGIN: Left Aside -->
+			<button class="m-aside-left-close  m-aside-left-close--skin-dark " id="m_aside_left_close_btn">
+				<i class="la la-close"></i>
+			</button>
+			<div id="m_aside_left" class="m-grid__item	m-aside-left  m-aside-left--skin-dark ">
+				<!-- BEGIN: Aside Menu -->
+				
+				<!-- END: Aside Menu -->
+			</div>
+			<!-- END: Left Aside -->
+			<div class="m-grid__item m-grid__item--fluid m-wrapper">
+				<!-- BEGIN: Subheader -->
+				<div class="m-subheader ">
+					<div class="d-flex align-items-center">
+						<div class="mr-auto">
+							<h3 class="m-subheader__title m-subheader__title--separator">
+								Dashboard
+							</h3>
+							<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
+								<li class="m-nav__item m-nav__item--home">
+									<a href="index.html" class="m-nav__link m-nav__link--icon">
+										<i class="m-nav__link-icon la la-home"></i>
+									</a>
+								</li>
+							</ul>
+						</div>
+						<select style="width: 350px"  name="pilih_satuan" class="form-control m-input m-input--square pilih_satuan" onchange="location = this.options[this.selectedIndex].value;">
+							<option value="http://localhost/DashboardPelangi/ptpelangi/ga/index_lembar.html">
+								Lembar
+							</option>
+							<option selected=""  value="http://localhost/DashboardPelangi/ptpelangi/ga/index_roll.html">
+								Roll
+							</option>
+						</select>
+					</div>
+				</div>
+				<!-- END: Subheader -->
+				<div class="m-content">
+					<div class="row">
+						<div class="col-lg-12">
+							<div class="m-portlet m-portlet--mobile">
+								<div style="padding: 20px" class="m-portlet__head">
+									<div class="m-portlet__head-caption">
+										<div class="m-portlet__head-title">
+											<h3 style="display: inline-block;" class="m-portlet__head-text">
+												<i class="fa fa-tasks"> </i> Table Bahan Baku
+											</h3>
+											<div class="m-input-icon m-input-icon--left">
+												<input type="text" class="form-control m-input m-input--solid" placeholder="Search..." id="generalSearch">
+												<span class="m-input-icon__icon m-input-icon__icon--left">
+													<span>
+														<i class="la la-search"></i>
+													</span>
+												</span>
+											</div>
+										</div>
+									</div>
+								</div>
+								<div class="m-portlet__body">
+									<canvas id="bahan-baku-roll"></canvas>
+								</div>
+							</div>
+						</div>
+					</div>	
+				</div>
+			</div>
+		</div>
+		<!-- end:: Body -->
+		<!-- begin::Footer -->
+		<footer class="m-grid__item		m-footer ">
+			<div class="m-container m-container--fluid m-container--full-height m-page__container">
+				<div class="m-stack m-stack--flex-tablet-and-mobile m-stack--ver m-stack--desktop">
+					<div class="m-stack__item m-stack__item--left m-stack__item--middle m-stack__item--last">
+						<span class="m-footer__copyright">
+							Upa'na Studio
+						</span>
+					</div>
+				</div>
+			</div>
+		</footer>
+		<!-- end::Footer -->
+	</div>
+	<!-- end:: Page -->		    
+	<!-- begin::Scroll Top -->
+	<div class="m-scroll-top m-scroll-top--skin-top" data-toggle="m-scroll-top" data-scroll-offset="500"data-scroll-speed="300">
+		<i class="la la-arrow-up"></i>
+	</div>
+	<!-- end::Scroll Top -->		    
+
+	<!--begin::Base Scripts -->
+	<script src="../assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
+	<script src="../assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
+	<script>
+		var MONTHS = ['Roll 1', 'Roll 2', 'Roll 3', 'Roll 4', 'Roll 5', 'Roll 6', 'Roll 7', 'Roll 8', 'Roll 9', 'Roll 10', 'Roll 11', 'Roll 12'];
+		const data = [30,10,10,-19,80,-30,-50,45,13,-42,32,59];
+		const colours = data.map((value) => value < 0 ? '#C62828' : '#8BC34A');
+		var color = Chart.helpers.color;
+		var horizontalBarChartData = {
+			labels: ['Roll 1', 'Roll 2', 'Roll 3', 'Roll 4', 'Roll 5', 'Roll 6', 'Roll 7', 'Roll 8', 'Roll 9', 'Roll 10', 'Roll 11', 'Roll 12'],
+			datasets: [{
+				label: 'Jumlah Bahan',
+				backgroundColor: colours,
+				borderColor: window.chartColors.white,
+				borderWidth: 0,
+				data: data
+			}]
+		};
+		window.onload = function() {
+			var ctx = document.getElementById('bahan-baku-roll').getContext('2d');
+			window.myHorizontalBar = new Chart(ctx, {
+				type: 'horizontalBar',
+				data: horizontalBarChartData,
+				options: {
+						// Elements options apply to all of the options unless overridden in a dataset
+						// In this case, we are setting the border of each horizontal bar to be 2px wide
+						elements: {
+							rectangle: {
+								borderWidth: 0,
+							}
+						},
+						responsive: true,
+						legend: {
+							position: 'right',
+						},
+					}
+				});
+		};
+	</script>
+	<script>
+		var MONTHS = ['Bahan A', 'Bahan B', 'Bahan C', 'Bahan D', 'Bahan E', 'Bahan F', 'Bahan G', 'Bahan H', 'Bahan I', 'Bahan J', 'Bahan K', 'Bahan L'];
+		const data = [30,10,10,-19,80,-30,-50,45,13,-42,32,59];
+		const colours = data.map((value) => value < 0 ? '#C62828' : '#8BC34A');
+		var color = Chart.helpers.color;
+		var horizontalBarChartData = {
+			labels: ['Bahan 1', 'Bahan 2', 'Bahan 3', 'Bahan 4', 'Bahan 5', 'Bahan 6', 'Bahan 7', 'Bahan 8', 'Bahan 9', 'Bahan 10', 'Bahan 11', 'Bahan 12'],
+			datasets: [{
+				label: 'Jumlah Bahan',
+				backgroundColor: colours,
+				borderColor: window.chartColors.white,
+				borderWidth: 0,
+				data: data
+			}]
+		};
+		window.onload = function() {
+			var ctx = document.getElementById('bahan-baku-roll').getContext('2d');
+			window.myHorizontalBar = new Chart(ctx, {
+				type: 'horizontalBar',
+				data: horizontalBarChartData,
+				options: {
+						// Elements options apply to all of the options unless overridden in a dataset
+						// In this case, we are setting the border of each horizontal bar to be 2px wide
+						elements: {
+							rectangle: {
+								borderWidth: 0,
+							}
+						},
+						responsive: true,
+						legend: {
+							position: 'right',
+						},
+					}
+				});
+		};
+	</script>
+	<script src="http://localhost:35729/livereload.js"></script>
+</body>
+<!-- end::Body -->
+</html>
diff --git a/Produksi/components/base/pekerjaan_detail.html b/Produksi/components/base/pekerjaan_detail.html
index 2b8bb9e..7c8566c 100644
--- a/Produksi/components/base/pekerjaan_detail.html
+++ b/Produksi/components/base/pekerjaan_detail.html
@@ -12,351 +12,351 @@
 License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
 -->
 <html lang="en" >
-	<!-- begin::Head -->
-	<head>
-		<meta charset="utf-8" />
-		<title>
-			Produksi | Pekerjaan - Detail
-		</title>
-		<meta name="description" content="Latest updates and statistic charts">
-		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-		<!--begin::Web font -->
-		<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
-		<script>
-          WebFont.load({
-            google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
-            active: function() {
-                sessionStorage.fonts = true;
-            }
-          });
-		</script>
-		<!--end::Web font -->
-        <!--begin::Base Styles -->  
-        <!--begin::Page Vendors -->
-		<link href="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
-		<!--end::Page Vendors -->
-		<link href="../../../assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
-		<link href="../../../assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
-		<!-- begin:: Style tambahan -->
-		<link href="../../../assets/demo/default/base/pelangi-style.css" rel="stylesheet" type="text/css">
-		<!-- end:: Style tambahan -->
-		<!--end::Base Styles -->
-		<link rel="shortcut icon" href="../../../assets/demo/default/media/img/logo/favicon.ico" />
-		<style>
-			.badge-size {
-				font-size: 1rem !important;
-				padding: 5px 15px !important;
+<!-- begin::Head -->
+<head>
+	<meta charset="utf-8" />
+	<title>
+		Produksi | Pekerjaan - Detail
+	</title>
+	<meta name="description" content="Latest updates and statistic charts">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<!--begin::Web font -->
+	<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
+	<script>
+		WebFont.load({
+			google: {"families":["Poppins:300,400,500,600,700","Roboto:300,400,500,600,700"]},
+			active: function() {
+				sessionStorage.fonts = true;
 			}
-		</style>
-	</head>
-	<!-- end::Head -->
-    <!-- end::Body -->
-	<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
-		<!-- begin:: Page -->
-		<div class="m-grid m-grid--hor m-grid--root m-page">
-			<!-- BEGIN: Header -->
-			<header class="m-grid__item    m-header "  data-minimize-offset="200" data-minimize-mobile-offset="200" >
-				<div class="m-container m-container--fluid m-container--full-height">
-					<div class="m-stack m-stack--ver m-stack--desktop">
-						<!-- BEGIN: Brand -->
-						<div class="m-stack__item m-brand  m-brand--skin-dark ">
-							<div class="m-stack m-stack--ver m-stack--general">
-								<div class="m-stack__item m-stack__item--middle m-brand__logo">
-									<a href="index.html" class="m-brand__logo-wrapper">
-										<img alt="" src="../../../assets/demo/default/media/img/logo/logo_default_dark.png"/>
-									</a>
-								</div>
-								<div class="m-stack__item m-stack__item--middle m-brand__tools">
-									<!-- BEGIN: Left Aside Minimize Toggle -->
-									<a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block">
-										<span></span>
-									</a>
-									<!-- END -->
-									<!-- BEGIN: Responsive Aside Left Menu Toggler -->
-									<a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block">
-										<span></span>
-									</a>
-									<!-- END -->
-									<!-- BEGIN: Responsive Header Menu Toggler -->
-									<a id="m_aside_header_menu_mobile_toggle" href="javascript:;" class="m-brand__icon m-brand__toggler m--visible-tablet-and-mobile-inline-block">
-										<span></span>
-									</a>
-									<!-- END -->
-									<!-- BEGIN: Topbar Toggler -->
-									<a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block">
-										<i class="flaticon-more"></i>
-									</a>
-									<!-- BEGIN: Topbar Toggler -->
-								</div>
-							</div>
-						</div>
-						<!-- END: Brand -->
-						<div class="m-stack__item m-stack__item--fluid m-header-head" id="m_header_nav">
-							<!-- BEGIN: Horizontal Menu -->
-							<img style="display: inline; float: left; height: 70px; width: auto" src="../../../assets/demo/default/media/img/misc/produksi.png">
-							<!-- END: Horizontal Menu -->								
-							<!-- BEGIN: Topbar -->
-							<div id="m_header_topbar" class="m-topbar  m-stack m-stack--ver m-stack--general">
-								<div class="m-stack__item m-topbar__nav-wrapper">
-									<ul class="m-topbar__nav m-nav m-nav--inline">
-										<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
-											<div class="user_wrapper">
-												<p style="margin-bottom: 0px"><i class="fa fa-user"> </i> Ahmad Rifaldi</p>
-											</div>
-										</li>
-										<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
-											<div class="logout_wrapper">
-												<a margin-right: 10px;" href="snippets/pages/user/login-1.html" class="btn m-btn--pill    btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder">
-													Logout
-												</a>
-											</div>
-										</li>
-									</ul>
-								</div>
+		});
+	</script>
+	<!--end::Web font -->
+	<!--begin::Base Styles -->  
+	<!--begin::Page Vendors -->
+	<link href="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
+	<!--end::Page Vendors -->
+	<link href="../../../assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />
+	<link href="../../../assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />
+	<!-- begin:: Style tambahan -->
+	<link href="../../../assets/demo/default/base/pelangi-style.css" rel="stylesheet" type="text/css">
+	<!-- end:: Style tambahan -->
+	<!--end::Base Styles -->
+	<link rel="shortcut icon" href="../../../assets/demo/default/media/img/logo/favicon.ico" />
+	<style>
+		.badge-size {
+			font-size: 1rem !important;
+			padding: 5px 15px !important;
+		}
+	</style>
+</head>
+<!-- end::Head -->
+<!-- end::Body -->
+<body class="m-page--fluid m--skin- m-content--skin-light2 m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">
+	<!-- begin:: Page -->
+	<div class="m-grid m-grid--hor m-grid--root m-page">
+		<!-- BEGIN: Header -->
+		<header class="m-grid__item    m-header "  data-minimize-offset="200" data-minimize-mobile-offset="200" >
+			<div class="m-container m-container--fluid m-container--full-height">
+				<div class="m-stack m-stack--ver m-stack--desktop">
+					<!-- BEGIN: Brand -->
+					<div class="m-stack__item m-brand  m-brand--skin-dark ">
+						<div class="m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-stack__item--middle m-brand__logo">
+								<a href="index.html" class="m-brand__logo-wrapper">
+									<img alt="" src="../../../assets/demo/default/media/img/logo/logo_default_dark.png"/>
+								</a>
 							</div>
-							<!-- END: Topbar -->
-						</div>
-					</div>
-				</div>
-			</header>
-			<!-- END: Header -->		
-			<!-- begin::Body -->
-			<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
-				<!-- BEGIN: Left Aside -->
-				<button class="m-aside-left-close  m-aside-left-close--skin-dark " id="m_aside_left_close_btn">
-					<i class="la la-close"></i>
-				</button>
-				<div id="m_aside_left" class="m-grid__item	m-aside-left  m-aside-left--skin-dark ">
-					<!-- BEGIN: Aside Menu -->
-					<div id="m_ver_menu" class="m-aside-menu  m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark" data-menu-vertical="true" data-menu-scrollable="false" data-menu-dropdown-timeout="500" >
-						<ul class="m-menu__nav  m-menu__nav--dropdown-submenu-arrow ">
-							<!-- DASHBOARD -->
-							<li class="m-menu__item  " aria-haspopup="true" >
-								<a  href="../../index.html" class="m-menu__link ">
-									<i class="m-menu__link-icon flaticon-line-graph"></i>
-									<span class="m-menu__link-title">
-										<span class="m-menu__link-wrap">
-											<span class="m-menu__link-text">
-												Dashboard
-											</span>	
-										</span>
-									</span>
+							<div class="m-stack__item m-stack__item--middle m-brand__tools">
+								<!-- BEGIN: Left Aside Minimize Toggle -->
+								<a href="javascript:;" id="m_aside_left_minimize_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-desktop-inline-block">
+									<span></span>
 								</a>
-							</li>
-							<!-- Pekerjaan -->
-							<li class="m-menu__item m-menu__item--active" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="pekerjaan.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon   fa fa-tasks"></i>
-									<span class="m-menu__link-text">
-										Pekerjaan
-									</span>
+								<!-- END -->
+								<!-- BEGIN: Responsive Aside Left Menu Toggler -->
+								<a href="javascript:;" id="m_aside_left_offcanvas_toggle" class="m-brand__icon m-brand__toggler m-brand__toggler--left m--visible-tablet-and-mobile-inline-block">
+									<span></span>
 								</a>
-							</li>
-							<!-- Purchasing -->
-								<li class="m-menu__item " aria-haspopup="true" data-menu-submenu-toggle="hover">
-									<a href="bahan_baku.html" class="m-menu__link m-menu__toggle">
-										<i class="m-menu__link-icon flaticon-graphic-2"></i>
-										<span class="m-menu__link-text">
-											Bahan Baku
-										</span>
-									</a>
-								</li>
-                            <!-- KEHADIRAN -->
-							<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="kehadiran.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon fa fa-user-o"></i>
-									<span class="m-menu__link-text">
-										Kehadiran
-									</span>
+								<!-- END -->
+								<!-- BEGIN: Responsive Header Menu Toggler -->
+								<a id="m_aside_header_menu_mobile_toggle" href="javascript:;" class="m-brand__icon m-brand__toggler m--visible-tablet-and-mobile-inline-block">
+									<span></span>
 								</a>
-							</li>
-							<!-- PENGATURAN -->
-							<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
-								<a href="settings.html" class="m-menu__link m-menu__toggle">
-									<i class="m-menu__link-icon fa fa-gear"></i>
-									<span class="m-menu__link-text">
-										Pengaturan
-									</span>
+								<!-- END -->
+								<!-- BEGIN: Topbar Toggler -->
+								<a id="m_aside_header_topbar_mobile_toggle" href="javascript:;" class="m-brand__icon m--visible-tablet-and-mobile-inline-block">
+									<i class="flaticon-more"></i>
 								</a>
-							</li>
-						</ul>
+								<!-- BEGIN: Topbar Toggler -->
+							</div>
+						</div>
 					</div>
-					<!-- END: Aside Menu -->
-				</div>
-				<!-- END: Left Aside -->
-				<div class="m-grid__item m-grid__item--fluid m-wrapper">
-					<!-- BEGIN: Subheader -->
-					<div class="m-subheader ">
-						<div class="d-flex align-items-center">
-							<div class="mr-auto">
-								<h3 class="m-subheader__title m-subheader__title--separator">
-									SPK
-								</h3>
-								<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
-									<li class="m-nav__item m-nav__item--home">
-										<a href="../../index.html" class="m-nav__link m-nav__link--icon">
-											<i class="m-nav__link-icon la la-home"></i>
-										</a>
-									</li>
-									<li class="m-nav__separator">
-										-
-									</li>
-									<li class="m-nav__item">
-										<a href="pekerjaan.html" class="m-nav__link">
-											<span class="m-nav__link-text">
-												SPK
-											</span>
-										</a>
-									</li>
-									<li class="m-nav__separator">
-										-
+					<!-- END: Brand -->
+					<div class="m-stack__item m-stack__item--fluid m-header-head" id="m_header_nav">
+						<!-- BEGIN: Horizontal Menu -->
+						<img style="display: inline; float: left; height: 70px; width: auto" src="../../../assets/demo/default/media/img/misc/produksi.png">
+						<!-- END: Horizontal Menu -->								
+						<!-- BEGIN: Topbar -->
+						<div id="m_header_topbar" class="m-topbar  m-stack m-stack--ver m-stack--general">
+							<div class="m-stack__item m-topbar__nav-wrapper">
+								<ul class="m-topbar__nav m-nav m-nav--inline">
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="user_wrapper">
+											<p style="margin-bottom: 0px"><i class="fa fa-user"> </i> Ahmad Rifaldi</p>
+										</div>
 									</li>
-									<li class="m-nav__item">
-										<a href="pekerjaan_detail.html" class="m-nav__link">
-											<span class="m-nav__link-text">
-												Rincian SPK
-											</span>
-										</a>
+									<li class="m-nav__item m-topbar__user-profile m-topbar__user-profile--img  m-dropdown m-dropdown--medium m-dropdown--arrow m-dropdown--header-bg-fill m-dropdown--align-right m-dropdown--mobile-full-width m-dropdown--skin-light" data-dropdown-toggle="click">
+										<div class="logout_wrapper">
+											<a margin-right: 10px;" href="snippets/pages/user/login-1.html" class="btn m-btn--pill    btn-secondary m-btn m-btn--custom m-btn--label-brand m-btn--bolder">
+												Logout
+											</a>
+										</div>
 									</li>
 								</ul>
 							</div>
 						</div>
+						<!-- END: Topbar -->
 					</div>
-					<!-- END: Subheader -->
-					<div class="m-content">
-                    	<div class="row">
-							<div class="col-xl-12">
-								<div class="m-portlet m-portlet--tab">
-									<div class="m-portlet__head header">
-										<br>
-										<h3 class="header-pesanan-no"> 
-											#123456789 
-										</h3><br><br>
-										<button onclick="window.print();return false;">
-											Print
-										</button>
-										<div class="info">
-											<p id="nama_pelanggan"><i class="flaticon-users"> </i> Ahmad Rifaldi</p> 
-											<p id="no_telpon"><i class="fa fa-phone"> </i> 085-145-322-137</p>
-											<p id="email_pelanggan"><i class="fa fa-envelope-o "> </i> aldi4rifaldi@gmail.com</p> 
-											<p id="alamat_pelanggan"><i class="flaticon-placeholder-1"> </i> Jl. Poros Malino, Griya Riski Abadi blok C6</p>
-										</div>	
-									</div>
-									<!--begin::Form-->
-									<form class="m-form m-form--fit m-form--label-align-right">
-										<div class="m-portlet__body">
-											<div class="form-group m-form__group row">
-												<label for="example-text-input" class="col-2 col-form-label">
-													Tipe Pesanan 
-												</label>
-												<div class="col-4">
-													<input name="tipe_pesanan" class="form-control m-input" type="text" value="Express" disabled="true">
-												</div>
+				</div>
+			</div>
+		</header>
+		<!-- END: Header -->		
+		<!-- begin::Body -->
+		<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
+			<!-- BEGIN: Left Aside -->
+			<button class="m-aside-left-close  m-aside-left-close--skin-dark " id="m_aside_left_close_btn">
+				<i class="la la-close"></i>
+			</button>
+			<div id="m_aside_left" class="m-grid__item	m-aside-left  m-aside-left--skin-dark ">
+				<!-- BEGIN: Aside Menu -->
+				<div id="m_ver_menu" class="m-aside-menu  m-aside-menu--skin-dark m-aside-menu--submenu-skin-dark" data-menu-vertical="true" data-menu-scrollable="false" data-menu-dropdown-timeout="500" >
+					<ul class="m-menu__nav  m-menu__nav--dropdown-submenu-arrow ">
+						<!-- DASHBOARD -->
+						<li class="m-menu__item  " aria-haspopup="true" >
+							<a  href="../../index.html" class="m-menu__link ">
+								<i class="m-menu__link-icon flaticon-line-graph"></i>
+								<span class="m-menu__link-title">
+									<span class="m-menu__link-wrap">
+										<span class="m-menu__link-text">
+											Dashboard
+										</span>	
+									</span>
+								</span>
+							</a>
+						</li>
+						<!-- Pekerjaan -->
+						<li class="m-menu__item m-menu__item--active" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="pekerjaan.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon   fa fa-tasks"></i>
+								<span class="m-menu__link-text">
+									Pekerjaan
+								</span>
+							</a>
+						</li>
+						<!-- Purchasing -->
+						<li class="m-menu__item " aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="bahan_baku.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon flaticon-graphic-2"></i>
+								<span class="m-menu__link-text">
+									Bahan Baku
+								</span>
+							</a>
+						</li>
+						<!-- KEHADIRAN -->
+						<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="kehadiran.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon fa fa-user-o"></i>
+								<span class="m-menu__link-text">
+									Kehadiran
+								</span>
+							</a>
+						</li>
+						<!-- PENGATURAN -->
+						<li class="m-menu__item m-menu__item--submenu" aria-haspopup="true" data-menu-submenu-toggle="hover">
+							<a href="settings.html" class="m-menu__link m-menu__toggle">
+								<i class="m-menu__link-icon fa fa-gear"></i>
+								<span class="m-menu__link-text">
+									Pengaturan
+								</span>
+							</a>
+						</li>
+					</ul>
+				</div>
+				<!-- END: Aside Menu -->
+			</div>
+			<!-- END: Left Aside -->
+			<div class="m-grid__item m-grid__item--fluid m-wrapper">
+				<!-- BEGIN: Subheader -->
+				<div class="m-subheader ">
+					<div class="d-flex align-items-center">
+						<div class="mr-auto">
+							<h3 class="m-subheader__title m-subheader__title--separator">
+								SPK
+							</h3>
+							<ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
+								<li class="m-nav__item m-nav__item--home">
+									<a href="../../index.html" class="m-nav__link m-nav__link--icon">
+										<i class="m-nav__link-icon la la-home"></i>
+									</a>
+								</li>
+								<li class="m-nav__separator">
+									-
+								</li>
+								<li class="m-nav__item">
+									<a href="pekerjaan.html" class="m-nav__link">
+										<span class="m-nav__link-text">
+											SPK
+										</span>
+									</a>
+								</li>
+								<li class="m-nav__separator">
+									-
+								</li>
+								<li class="m-nav__item">
+									<a href="pekerjaan_detail.html" class="m-nav__link">
+										<span class="m-nav__link-text">
+											Rincian SPK
+										</span>
+									</a>
+								</li>
+							</ul>
+						</div>
+					</div>
+				</div>
+				<!-- END: Subheader -->
+				<div class="m-content">
+					<div class="row">
+						<div class="col-xl-12">
+							<div class="m-portlet m-portlet--tab">
+								<div class="m-portlet__head header">
+									<br>
+									<h3 class="header-pesanan-no"> 
+										#123456789 
+									</h3><br><br>
+									<button onclick="window.print();return false;">
+										Print
+									</button>
+									<div class="info">
+										<p id="nama_pelanggan"><i class="flaticon-users"> </i> Ahmad Rifaldi</p> 
+										<p id="no_telpon"><i class="fa fa-phone"> </i> 085-145-322-137</p>
+										<p id="email_pelanggan"><i class="fa fa-envelope-o "> </i> aldi4rifaldi@gmail.com</p> 
+										<p id="alamat_pelanggan"><i class="flaticon-placeholder-1"> </i> Jl. Poros Malino, Griya Riski Abadi blok C6</p>
+									</div>	
+								</div>
+								<!--begin::Form-->
+								<form class="m-form m-form--fit m-form--label-align-right">
+									<div class="m-portlet__body">
+										<div class="form-group m-form__group row">
+											<label for="example-text-input" class="col-2 col-form-label">
+												Tipe Pesanan 
+											</label>
+											<div class="col-4">
+												<input name="tipe_pesanan" class="form-control m-input" type="text" value="Express" disabled="true">
 											</div>
-											<div class="form-group m-form__group row">
-												<label for="example-text-input" class="col-2 col-form-label">
-													catatan 
-												</label>
-												<div class="col-4">
-													<input name="catatan_pesanan" class="form-control m-input" type="text" value="Express" disabled="true">
-												</div>
+										</div>
+										<div class="form-group m-form__group row">
+											<label for="example-text-input" class="col-2 col-form-label">
+												catatan 
+											</label>
+											<div class="col-4">
+												<input name="catatan_pesanan" class="form-control m-input" type="text" value="Express" disabled="true">
 											</div>
-											<div class="form-group m-form__group row">
-												<label for="example-text-input" class="col-2 col-form-label">
-													Tanggal Pesanan 
-												</label>
-												<div class="col-4">
-													<input name="tanggal_pesanan" class="form-control m-input" type="text" value="20-11-2018" disabled="true">
-												</div>
+										</div>
+										<div class="form-group m-form__group row">
+											<label for="example-text-input" class="col-2 col-form-label">
+												Tanggal Pesanan 
+											</label>
+											<div class="col-4">
+												<input name="tanggal_pesanan" class="form-control m-input" type="text" value="20-11-2018" disabled="true">
 											</div>
-										  <div class="form-group m-form__group row">
-												<label for="example-text-input" class="col-2 col-form-label">
-													Order Status : 
-												</label>
-												<div class="col-4">
-													<span id="order_status" class="m-badge  m-badge--warning m-badge--wide badge-size">Produksi</span>
-												</div>
-										  </div>
 										</div>
-										<div class="m-portlet m-portlet--mobile">
-											<div class="m-portlet__body">
-												<!--begin: Datatable -->
-												<!-- <div class="m_datatable" id="local_data"></div> -->
-												<table class="table" id="tbl_detail_spk">
-													<thead>
-														<tr>
-															<th>No</th>
-															<th>Nama File</th>
-															<th>Produk</th>
-															<th>Ukuran</th>
-															<th>Finishing</th>
-															<th>Jumlah</th>
-															<th>Harga</th>
-														</tr>
-													</thead>
-													<tbody>
-														<tr>
-															<td>1</td>
-															<td>kartunama bagus</td>
-															<td>Kartu nama kingstruk 260 1 sisi</td>
-															<td>-</td>
-															<td>Doff</td>
-															<td>2 box</td>
-															<td>Rp. 150.000</td>
-														</tr>
-														<tr>
-															<td>2</td>
-															<td>spanduk hore</td>
-															<td>Spanduk Korea</td>
-															<td>1.6 x 0.6 m</td>
-															<td>Cincin 4 buah</td>
-															<td>3 lembar</td>
-															<td>Rp. 175.000</td>
-														</tr>
-													</tbody>
-												</table>
-												<div class="m-datatable__pager m-datatable--paging-loaded clearfix">
-													<div class="form-group m-form__group row">
-														<label class="col-2">
-															<b>CS Menangani :</b>
-														</label>
-														<div class="col-4">
-															<p id="nama_cs_menangani">Ahmad Rifaldi</p>
-														</div>
+										<div class="form-group m-form__group row">
+											<label for="example-text-input" class="col-2 col-form-label">
+												Order Status : 
+											</label>
+											<div class="col-4">
+												<span id="order_status" class="m-badge  m-badge--warning m-badge--wide badge-size">Produksi</span>
+											</div>
+										</div>
+									</div>
+									<div class="m-portlet m-portlet--mobile">
+										<div class="m-portlet__body">
+											<!--begin: Datatable -->
+											<!-- <div class="m_datatable" id="local_data"></div> -->
+											<table class="table" id="tbl_detail_spk">
+												<thead>
+													<tr>
+														<th>No</th>
+														<th>Nama File</th>
+														<th>Produk</th>
+														<th>Ukuran</th>
+														<th>Finishing</th>
+														<th>Jumlah</th>
+														<th>Harga</th>
+													</tr>
+												</thead>
+												<tbody>
+													<tr>
+														<td>1</td>
+														<td>kartunama bagus</td>
+														<td>Kartu nama kingstruk 260 1 sisi</td>
+														<td>-</td>
+														<td>Doff</td>
+														<td>2 box</td>
+														<td>Rp. 150.000</td>
+													</tr>
+													<tr>
+														<td>2</td>
+														<td>spanduk hore</td>
+														<td>Spanduk Korea</td>
+														<td>1.6 x 0.6 m</td>
+														<td>Cincin 4 buah</td>
+														<td>3 lembar</td>
+														<td>Rp. 175.000</td>
+													</tr>
+												</tbody>
+											</table>
+											<div class="m-datatable__pager m-datatable--paging-loaded clearfix">
+												<div class="form-group m-form__group row">
+													<label class="col-2">
+														<b>CS Menangani :</b>
+													</label>
+													<div class="col-4">
+														<p id="nama_cs_menangani">Ahmad Rifaldi</p>
 													</div>
-													<div class="form-group m-form__group row">
-														<label class="col-2">
-															<b>Designer :</b>
-														</label>
-														<div class="col-4">
-															<p id="nama_designer">Surya Aditama</p>
-														</div>
+												</div>
+												<div class="form-group m-form__group row">
+													<label class="col-2">
+														<b>Designer :</b>
+													</label>
+													<div class="col-4">
+														<p id="nama_designer">Surya Aditama</p>
 													</div>
-													<div class="form-group m-form__group row">
-														<label class="col-2">
-															<b>Produksi :</b>
-														</label>
-														<div class="col-4">
-															<p id="nama_produksi">Fascal Ivandry</p>
-														</div>
+												</div>
+												<div class="form-group m-form__group row">
+													<label class="col-2">
+														<b>Produksi :</b>
+													</label>
+													<div class="col-4">
+														<p id="nama_produksi">Fascal Ivandry</p>
 													</div>
-													<div class="form-group m-form__group row">
-														<label class="col-2">
-															<b>CS Pelunasan :</b>
-														</label>
-														<div class="col-4">
-															<p id="nama_cs_pelunasan">-</p>
-														</div>
+												</div>
+												<div class="form-group m-form__group row">
+													<label class="col-2">
+														<b>CS Pelunasan :</b>
+													</label>
+													<div class="col-4">
+														<p id="nama_cs_pelunasan">-</p>
 													</div>
-													<button id="btn_selesai_produksi" type="button" class="btn btn-primary" data-toggle="modal" style="float:right;" data-target="#modal_selesai">
-															Selesai
-													</button>
+												</div>
+												<button id="btn_selesai_produksi" type="button" class="btn btn-primary" data-toggle="modal" style="float:right;" data-target="#modal_selesai">
+													Selesai
+												</button>
 													<!-- <p align="left"><b>CS Menangani :</b> <span id="nama-cs-menangani">Arfandi</span></p>
 													<p align="left"><b>Designer     :</b> <span id="nama-designer">Surya Aditama</span></p>
 													<p align="left"><b>Produksi     :</b> <span id="nama-produksi">Sidik Permana</span></p>
 													<p align="left"><b>CS Pelunasan :</b> <span id="nama-cs-pelunasan">-</span></p> -->
-				                </div>
+												</div>
 												<!--end: Datatable -->
 											</div>
 										</div>
@@ -367,214 +367,149 @@ <h3 class="header-pesanan-no">
 					</div>
 				</div>
 			</div>
-					<!-- end:: Body -->
+			<!-- end:: Body -->
 			<!--begin::Modal-->
 			<div class="modal fade" id="modal_selesai" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-					<div class="modal-dialog" role="document">
-						<div class="modal-content">
-							<div class="modal-header">
-								<h5 class="modal-title" id="exampleModalLabel">
-									Penggunaan Bahan
-								</h5>
-								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-									<span aria-hidden="true">
-										&times;
-									</span>
-								</button>
-							</div>
-							<div class="modal-body">
-								<div class="m-scrollable" data-scrollbar-shown="true" data-scrollable="true" data-max-height="300">
-									<div class="list-pesanan">
-										<div class="head-pesanan">
-											<label class="col-4 col-form-label">
-												<h5><span id="nama_produk">Kartu Nama</span></h5>
-											</label>
+				<div class="modal-dialog" role="document">
+					<div class="modal-content">
+						<div class="modal-header">
+							<h5 class="modal-title" id="exampleModalLabel">
+								Penggunaan Bahan
+							</h5>
+							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+								<span aria-hidden="true">
+									&times;
+								</span>
+							</button>
+						</div>
+						<div class="modal-body">
+							<div class="m-scrollable" data-scrollbar-shown="true" data-scrollable="true" data-max-height="300">
+								<div class="list-pesanan">
+									<div class="head-pesanan">
+										<div class="form-group m-form__group">
+											<select style="width: 50%; display: inline;" name="jenis_bahan" class="form-control m-select2 dropdown_search">
+												<option value="kartu_nama" >
+													Kartu Nama
+												</option >
+												<option value="spanduk">
+													Spanduk
+												</option>
+												<option value="undangan">
+													Undangan
+												</option>
+											</select>
 											<button style="float: right;" class="btn btn-primary">
 												tambah bahan
 											</button>
 										</div>
-										<div class="list_bahan">
-											<div class="form-group m-form__group row">
-												<label for="example-text-input" class="col-3 col-form-label">
-													Jenis Bahan
-												</label>
-												<div class="col-9">
-													<select style="width: 100%" name="jenis_bahan" class="form-control m-select2 dropdown_search">
-														<option value="bahan_1" >
-															Bahan 1
-														</option >
-														<option value="bahan_2">
-															Bahan 2
-														</option>
-														<option value="bahan_3">
-															Bahan 3
-														</option>
-														<option value="Kingstroke 260" selected="selected">
-															Kingstroke 260
-														</option>
-														<option value="akrilik">
-															Akrilik
-														</option>
-														<option value="silika">
-															Silika
-														</option>
-													</select>									
-												</div>
-											</div>
-											<div class="form-group m-form__group row">
-												<label for="example-text-input" class="col-3 col-form-label">
-													Jumlah
-												</label>
-												<div class="input-group col-9">
-													<input type="text" name="jumlah_bahan_terpakai" class="form-control" aria-label="Text input with dropdown button">
-													<div class="input-group-append">
-														<select class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-															<option value="1">
-																Set
-															</option>
-															<option value="1">
-																Lembar
-															</option>
-															<option value="1">
-																Unit
-															</option>
-															<option value="1">
-																dll
-															</option>
-														</select>
-													</div>
-												</div>
+
+									</div>
+									<div class="list_bahan">
+										<div class="form-group m-form__group row">
+											<label for="example-text-input" class="col-3 col-form-label">
+												Jenis Bahan
+											</label>
+											<div class="col-9">
+												<select style="width: 100%" name="jenis_bahan" class="form-control m-select2 dropdown_search">
+													<option value="bahan_1" >
+														Bahan 1
+													</option >
+													<option value="bahan_2">
+														Bahan 2
+													</option>
+													<option value="bahan_3">
+														Bahan 3
+													</option>
+													<option value="Kingstroke 260" selected="selected">
+														Kingstroke 260
+													</option>
+													<option value="akrilik">
+														Akrilik
+													</option>
+													<option value="silika">
+														Silika
+													</option>
+												</select>									
 											</div>
-											<div class="form-group m-form__group row">
-												<label for="example-text-input" class="col-3 col-form-label">
-													Waste
-												</label>
-												<div class="input-group col-9">
-													<input type="text" name="jumlah_bahan_terbuang" class="form-control" aria-label="Text input with dropdown button">
-													<div class="input-group-append">
-														<select class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-															<option value="1">
-																Set
-															</option>
-															<option value="1">
-																Lembar
-															</option>
-															<option value="1">
-																Unit
-															</option>
-															<option value="1">
-																dll
-															</option>
-														</select>
-													</div>
+										</div>
+										<div class="form-group m-form__group row">
+											<label for="example-text-input" class="col-3 col-form-label">
+												Jumlah
+											</label>
+											<div class="input-group col-9">
+												<input name="input_jumlah" type="text" class="form-control m-input" placeholder="masukkan jumlah" aria-describedby="basic-addon2">
+												<div class="input-group-append">
+													<span class="input-group-text" id="unit_bahan">
+														Unit
+													</span>
 												</div>
 											</div>
 										</div>
-							      <hr>
-									</div>
-									<div class="list-pesanan">
-										<div class="head-pesanan">
-											<label class="col-4 col-form-label">
-												<h5>Spanduk</h5>
+										<div class="form-group m-form__group row">
+											<label for="example-text-input" class="col-3 col-form-label">
+												Finishing
 											</label>
-											<button style="float: right;" class="btn btn-primary">
-												tambah bahan
-											</button>
-										</div>
-										<div class="list_bahan">
-											<div class="form-group m-form__group row">
-												<label for="example-text-input" class="col-3 col-form-label">
-													Jenis Bahan
-												</label>
-												<div class="col-9">
-													<select style="width: 100%" name="jenis_bahan" class="form-control m-select2 dropdown_search" name="jenis_bahan">
-														<option value="bahan_1" >
-															Bahan 1
-														</option >
-														<option value="bahan_2">
-															Bahan 2
-														</option>
-														<option value="korea" selected="selected">
-															Korea
-														</option>
-														<option value="Kingstroke 260">
-															Kingstroke 260
-														</option>
-														<option value="akrilik">
-															Akrilik
-														</option>
-														<option value="silika">
-															Silika
-														</option>
-													</select>									
-												</div>
+											<div class="col-9">
+												<select style="width: 100%" name="finishing" class="form-control m-select2 dropdown_search">
+													<option value="1" selected="selected">
+														Cincin
+													</option >
+													<option value="1">
+														Potong
+													</option>
+													<option value="1">
+														Laminating Glossy
+													</option>
+													<option value="1" >
+														Laminating Doff
+													</option>
+												</select>
 											</div>
-											<div class="form-group m-form__group row">
-												<label for="example-text-input" class="col-3 col-form-label">
-													Jumlah
-												</label>
-												<div class="input-group col-9">
-													<input type="text" name="jumlah_bahan_terpakai" class="form-control" aria-label="Text input with dropdown button">
-													<div class="input-group-append">
-														<select class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-															<option value="1">
-																Set
-															</option>
-															<option value="1">
-																Lembar
-															</option>
-															<option value="1">
-																Unit
-															</option>
-															<option value="1">
-																dll
-															</option>
-														</select>
-													</div>
+										</div>
+										<div class="form-group m-form__group row">
+											<label for="example-text-input" class="col-3 col-form-label">
+												Jumlah Finishing
+											</label>
+											<div class="input-group col-9">
+												<input name="input_jumlah_finishing" type="text" class="form-control m-input" placeholder="masukkan jumlah" aria-describedby="basic-addon2">
+												<div class="input-group-append">
+													<span class="input-group-text" id="unit_bahan_finishing">
+														Unit
+													</span>
 												</div>
 											</div>
-											<div class="form-group m-form__group row">
-												<label for="example-text-input" class="col-3 col-form-label">
-													Waste
-												</label>
-												<div class="input-group col-9">
-													<input type="text" name="jumlah_bahan_terbuang" class="form-control" aria-label="Text input with dropdown button">
-													<div class="input-group-append">
-														<select class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-															<option value="1">
-																Set
-															</option>
-															<option value="1">
-																Lembar
-															</option>
-															<option value="1">
-																Unit
-															</option>
-															<option value="1">
-																dll
-															</option>
-														</select>
-													</div>
+										</div>
+										<div class="form-group m-form__group row">
+											<label for="example-text-input" class="col-3 col-form-label">
+												Waste
+											</label>
+											<div class="input-group col-9">
+												<input name="input_jumlah_waste" type="text" class="form-control m-input" placeholder="masukkan jumlah" aria-describedby="basic-addon2">
+												<div class="input-group-append">
+													<span class="input-group-text" id="unit_bahan_waste">
+														Unit
+													</span>
 												</div>
 											</div>
 										</div>
-										<hr>
 									</div>
+									<hr style="border: 1px solid rgb(95,102,158)">
 								</div>
 							</div>
-							<div class="modal-footer">
-								<button type="button" class="btn btn-secondary" data-dismiss="modal">
-									Tutup
-								</button>
-								<button type="button" class="btn btn-primary" id="m_sweetalert_demo_3_3" >
-									Kirim
-								</button>
-							</div>
+						</div>
+						<div class="modal-footer">
+							<button type="button" class="btn btn-secondary" data-dismiss="modal">
+								Tutup
+							</button>
+							<button type="button" class="btn btn-primary" id="btn_kirim" >
+								Kirim
+							</button>
 						</div>
 					</div>
+				</div>
 			</div>
-				<!--end::Modal-->	
-					<!-- begin::Footer -->
+			<!--end::Modal-->	
+			<!-- begin::Footer -->
 			<footer class="m-grid__item	m-footer ">
 				<div class="m-container m-container--fluid m-container--full-height m-page__container">
 					<div class="m-stack m-stack--flex-tablet-and-mobile m-stack--ver m-stack--desktop">
@@ -586,29 +521,29 @@ <h5>Spanduk</h5>
 					</div>
 				</div>
 			</footer>
-						<!-- end::Footer -->
-			</div>
-			<!-- end:: Page -->		    
-		    <!-- begin::Scroll Top -->
-			<div class="m-scroll-top m-scroll-top--skin-top" data-toggle="m-scroll-top" data-scroll-offset="500" data-scroll-speed="300">
-				<i class="la la-arrow-up"></i>
-			</div>
-			<!-- end::Scroll Top -->		    
-				
-	    	<!--begin::Base Scripts -->
-			<script src="../../../assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
-			<script src="../../../assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
-			<!--end::Base Scripts -->   
-	        <!--begin::Page Vendors -->
-			<script src="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.js" type="text/javascript"></script>
-			<!--end::Page Vendors -->  
-	        <!--begin::Page Snippets -->
-			<script src="../../../assets/app/js/dashboard.js" type="text/javascript"></script>
-			<!--end::Page Snippets -->
-			<script type="text/javascript">
-				var tbl_detail_spk = $('#tbl_detail_spk').mDatatable({
-			data: {
-				saveState: {cookie: false},
+			<!-- end::Footer -->
+		</div>
+		<!-- end:: Page -->		    
+		<!-- begin::Scroll Top -->
+		<div class="m-scroll-top m-scroll-top--skin-top" data-toggle="m-scroll-top" data-scroll-offset="500" data-scroll-speed="300">
+			<i class="la la-arrow-up"></i>
+		</div>
+		<!-- end::Scroll Top -->		    
+
+		<!--begin::Base Scripts -->
+		<script src="../../../assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
+		<script src="../../../assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
+		<!--end::Base Scripts -->   
+		<!--begin::Page Vendors -->
+		<script src="../../../assets/vendors/custom/fullcalendar/fullcalendar.bundle.js" type="text/javascript"></script>
+		<!--end::Page Vendors -->  
+		<!--begin::Page Snippets -->
+		<script src="../../../assets/app/js/dashboard.js" type="text/javascript"></script>
+		<!--end::Page Snippets -->
+		<script type="text/javascript">
+			var tbl_detail_spk = $('#tbl_detail_spk').mDatatable({
+				data: {
+					saveState: {cookie: false},
 				/*type: 'remote',
 			        source: {
 			          read: {
@@ -629,7 +564,7 @@ <h5>Spanduk</h5>
 			        serverPaging: true,
 			        serverFiltering: true,
 			        serverSorting: true,*/
-			},
+			    },
 			// layout definition
 			layout: {
 				theme: 'default', // datatable theme
@@ -637,7 +572,7 @@ <h5>Spanduk</h5>
 				scroll: false, // enable/disable datatable scroll both horizontal and vertical when needed.
 				/*max-height: 200,*/ // datatable's body's fixed height
 				footer: false, // display/hide footer
-			
+
 			},
 
 			// column sorting
@@ -647,49 +582,49 @@ <h5>Spanduk</h5>
 				input: $('#generalSearch'),
 			},
 			columns: [
-		
-				{
-					field: 'No',
-					textAlign: 'center',
-					width: 100
-				},
-				{
-					field: 'Nama File',
-					textAlign: 'center',
-					width: 100
-				},
-				{
-					field: 'Produk',
-					textAlign: 'center',
-					width: 100
-				},
-				{
-					field: 'Ukuran',
-					textAlign: 'center',
-					width: 100
-				},
-				{
-					field: 'Finishing',
-					textAlign: 'center',
-					width: 100
-				},
-				{
-					field: 'Jumlah',
-					textAlign: 'center',
-					width: 100
-				},
-				{
-					field: 'Harga',
-					textAlign: 'center',
-					width: 100
-				}
+
+			{
+				field: 'No',
+				textAlign: 'center',
+				width: 100
+			},
+			{
+				field: 'Nama File',
+				textAlign: 'center',
+				width: 100
+			},
+			{
+				field: 'Produk',
+				textAlign: 'center',
+				width: 100
+			},
+			{
+				field: 'Ukuran',
+				textAlign: 'center',
+				width: 100
+			},
+			{
+				field: 'Finishing',
+				textAlign: 'center',
+				width: 100
+			},
+			{
+				field: 'Jumlah',
+				textAlign: 'center',
+				width: 100
+			},
+			{
+				field: 'Harga',
+				textAlign: 'center',
+				width: 100
+			}
 
 			],
 		});
-			</script>
-			<script>
-					var Select2 = function() {
-						var demos = function(){
+	</script>
+	<script>
+		var Select2 = function() {
+			var demos = function(){
 							// basic
 							$('.dropdown_search, .dropdown_search_validate').select2({
 								placeholder: "Select a state"
@@ -714,32 +649,32 @@ <h5>Spanduk</h5>
 					jQuery(document).ready(function() {
 						Select2.init();
 					});
-			</script>
-			<script>
+				</script>
+				<script>
 				//== Class definition
 				var SweetAlert2Demo = function() {
 
 				//== Demos
 				var initDemos = function() {
-						
-						$('#m_sweetalert_demo_3_3').click(function(e) {
-								swal("SPK telah selesai!", "SPK akan dikirim ke CS untuk pelunasan!", "success");
-						});
+
+					$('#btn_kirim').click(function(e) {
+						swal("SPK telah selesai!", "SPK akan dikirim ke CS untuk pelunasan!", "success");
+					});
 				};
 
 				return {
 						//== Init
 						init: function() {
-								initDemos();
+							initDemos();
 						},
-				};
+					};
 				}();
 
 				//== Class Initialization
 				jQuery(document).ready(function() {
-				SweetAlert2Demo.init();
+					SweetAlert2Demo.init();
 				});
 			</script>
-	</body>
-	<!-- end::Body -->
-</html>
+		</body>
+		<!-- end::Body -->
+		</html>
diff --git a/Produksi/components/base/spk_detail.html b/Produksi/components/base/spk_detail.html
index 5176eaa..938985b 100644
--- a/Produksi/components/base/spk_detail.html
+++ b/Produksi/components/base/spk_detail.html
@@ -337,6 +337,14 @@ <h3 class="header-pesanan-no">
 													<input class="form-control m-input" type="text" value="20-11-2018" id="example-text-input" disabled="true">
 												</div>
 											</div>
+											<div class="form-group m-form__group row">
+												<label for="example-text-input" class="col-2 col-form-label">
+													Waktu Selesai
+												</label>
+												<div class="col-4">
+													<input name="tanggal_pesanan_selesai" class="form-control m-input" type="text" value="21-11-2018" id="example-text-input" disabled="true">
+												</div>
+											</div>
 										    <div class="form-group m-form__group row">
 												<label for="example-text-input" class="col-2 col-form-label">
 													Order Status : 
diff --git a/assets/demo/default/base/pelangi-style.css b/assets/demo/default/base/pelangi-style.css
index 8d43e89..112327b 100644
--- a/assets/demo/default/base/pelangi-style.css
+++ b/assets/demo/default/base/pelangi-style.css
@@ -431,3 +431,10 @@ float: right;
 .m--bg-accent-ungu {
     background-color: #924388 !important;
 }
+
+.pilih_satuan {
+    font-size: 1.1rem !important;
+    font-weight: 500;
+    background-color: #2c2e3e !important;
+    color: white !important;
+}
\ No newline at end of file
diff --git a/assets/demo/default/media/img/logo/favicon.ico b/assets/demo/default/media/img/logo/favicon.ico
index 0b56cb2..712be3a 100644
Binary files a/assets/demo/default/media/img/logo/favicon.ico and b/assets/demo/default/media/img/logo/favicon.ico differ
diff --git a/assets/demo/default/media/img/logo/favicon2.ico b/assets/demo/default/media/img/logo/favicon2.ico
new file mode 100644
index 0000000..0b56cb2
Binary files /dev/null and b/assets/demo/default/media/img/logo/favicon2.ico differ
diff --git a/assets/demo/default/media/img/logo/pelangi_navicon.png b/assets/demo/default/media/img/logo/pelangi_navicon.png
new file mode 100644
index 0000000..f501415
Binary files /dev/null and b/assets/demo/default/media/img/logo/pelangi_navicon.png differ
diff --git a/assets/demo/default/media/img/logo/spk_logo.png b/assets/demo/default/media/img/logo/spk_logo.png
new file mode 100644
index 0000000..e082eba
Binary files /dev/null and b/assets/demo/default/media/img/logo/spk_logo.png differ
diff --git a/assets/demo/default/media/img/logo/spk_logo@2x.png b/assets/demo/default/media/img/logo/spk_logo@2x.png
new file mode 100644
index 0000000..e082eba
Binary files /dev/null and b/assets/demo/default/media/img/logo/spk_logo@2x.png differ
