diff --git a/admin/barang.php b/admin/barang.php
index 68cea8d..8311efc 100644
--- a/admin/barang.php
+++ b/admin/barang.php
@@ -1,157 +1,201 @@
 <?php include 'header.php'; ?>
 
-<h3><span class="glyphicon glyphicon-briefcase"></span>  Data Barang</h3>
-<button style="margin-bottom:20px" data-toggle="modal" data-target="#myModal" class="btn btn-info col-md-2"><span class="glyphicon glyphicon-plus"></span>Tambah Barang</button>
-<br/>
-<br/>
-
 <?php 
-$periksa=mysql_query("select * from barang where jumlah <=3");
-while($q=mysql_fetch_array($periksa)){	
-	if($q['jumlah']<=3){	
+$periksa = mysql_query("select * from barang where jumlah <=3");
+while($q = mysql_fetch_array($periksa)){	
+	if($q['jumlah'] <= 3){	
 		?>	
 		<script>
-			$(document).ready(function(){
-				$('#pesan_sedia').css("color","red");
-				$('#pesan_sedia').append("<span class='glyphicon glyphicon-asterisk'></span>");
-			});
+		$(document).ready(function(){
+			$('.notif-bell').css("color","#ef4444");
+		});
 		</script>
 		<?php
-		echo "<div style='padding:5px' class='alert alert-warning'><span class='glyphicon glyphicon-info-sign'></span> Stok  <a style='color:red'>". $q['nama']."</a> yang tersisa sudah kurang dari 3 . silahkan pesan lagi !!</div>";	
 	}
 }
 ?>
+
 <?php 
-$per_hal=10;
-$jumlah_record=mysql_query("SELECT COUNT(*) from barang");
-$jum=mysql_result($jumlah_record, 0);
-$halaman=ceil($jum / $per_hal);
+$per_hal = 10;
+$jumlah_record = mysql_query("SELECT COUNT(*) from barang");
+$jum = mysql_result($jumlah_record, 0);
+$halaman = ceil($jum / $per_hal);
 $page = (isset($_GET['page'])) ? (int)$_GET['page'] : 1;
 $start = ($page - 1) * $per_hal;
 ?>
-<div class="col-md-12">
-	<table class="col-md-2">
-		<tr>
-			<td>Jumlah Record</td>		
-			<td><?php echo $jum; ?></td>
-		</tr>
-		<tr>
-			<td>Jumlah Halaman</td>	
-			<td><?php echo $halaman; ?></td>
-		</tr>
-	</table>
-	<a style="margin-bottom:10px" href="lap_barang.php" target="_blank" class="btn btn-default pull-right"><span class='glyphicon glyphicon-print'></span>  Cetak</a>
+
+<div class="page-header">
+	<h2>
+		<span class="page-icon">&#128230;</span>
+		Data Barang
+	</h2>
+	<div class="d-flex gap-8">
+		<a href="lap_barang.php" target="_blank" class="btn-modern btn-secondary-modern">
+			&#128438; Cetak
+		</a>
+		<button data-toggle="modal" data-target="#myModal" class="btn-modern btn-primary-modern">
+			&#43; Tambah Barang
+		</button>
+	</div>
 </div>
-<form action="cari_act.php" method="get">
-	<div class="input-group col-md-5 col-md-offset-7">
-		<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-search"></span></span>
-		<input type="text" class="form-control" placeholder="Cari barang di sini .." aria-describedby="basic-addon1" name="cari">	
+
+<!-- STOCK WARNINGS -->
+<?php 
+$periksa2 = mysql_query("select * from barang where jumlah <=3");
+while($q = mysql_fetch_array($periksa2)){	
+	echo "<div class='stock-warning'><span class='warning-icon'>&#9888;</span> Stok <strong>".$q['nama']."</strong> tersisa <strong>".$q['jumlah']."</strong> unit. Segera pesan ulang!</div>";
+}
+?>
+
+<!-- STATS ROW -->
+<div style="display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap;">
+	<div style="background:white; border:1px solid #e2e8f0; border-radius:8px; padding:12px 20px; display:flex; align-items:center; gap:10px; box-shadow:0 1px 3px rgba(0,0,0,0.08);">
+		<span style="font-size:20px;">&#128230;</span>
+		<div>
+			<div style="font-size:18px; font-weight:700; color:#1e293b;"><?php echo $jum; ?></div>
+			<div style="font-size:11px; color:#64748b;">Total Barang</div>
+		</div>
 	</div>
-</form>
-<br/>
-<table class="table table-hover">
-	<tr>
-		<th class="col-md-1">No</th>
-		<th class="col-md-4">Nama Barang</th>
-		<th class="col-md-3">Harga Jual</th>
-		<th class="col-md-1">Jumlah</th>
-		<!-- <th class="col-md-1">Sisa</th>		 -->
-		<th class="col-md-3">Opsi</th>
-	</tr>
-	<?php 
-	if(isset($_GET['cari'])){
-		$cari=mysql_real_escape_string($_GET['cari']);
-		$brg=mysql_query("select * from barang where nama like '$cari' or jenis like '$cari'");
-	}else{
-		$brg=mysql_query("select * from barang limit $start, $per_hal");
-	}
-	$no=1;
-	while($b=mysql_fetch_array($brg)){
+	<div style="background:white; border:1px solid #e2e8f0; border-radius:8px; padding:12px 20px; display:flex; align-items:center; gap:10px; box-shadow:0 1px 3px rgba(0,0,0,0.08);">
+		<span style="font-size:20px;">&#128196;</span>
+		<div>
+			<div style="font-size:18px; font-weight:700; color:#1e293b;"><?php echo $halaman; ?></div>
+			<div style="font-size:11px; color:#64748b;">Halaman</div>
+		</div>
+	</div>
+</div>
 
-		?>
-		<tr>
-			<td><?php echo $no++ ?></td>
-			<td><?php echo $b['nama'] ?></td>
-			<td>Rp.<?php echo number_format($b['harga']) ?>,-</td>
-			<td><?php echo $b['jumlah'] ?></td>
-			<td>
-				<a href="det_barang.php?id=<?php echo $b['id']; ?>" class="btn btn-info">Detail</a>
-				<a href="edit.php?id=<?php echo $b['id']; ?>" class="btn btn-warning">Edit</a>
-				<a onclick="if(confirm('Apakah anda yakin ingin menghapus data ini ??')){ location.href='hapus.php?id=<?php echo $b['id']; ?>' }" class="btn btn-danger">Hapus</a>
-			</td>
-		</tr>		
-		<?php 
+<!-- SEARCH -->
+<div class="card mb-24">
+	<div class="card-body" style="padding:16px;">
+		<form action="cari_act.php" method="get">
+			<div class="search-bar" style="max-width:400px;">
+				<span class="search-icon">&#128269;</span>
+				<input type="text" name="cari" placeholder="Cari nama atau jenis barang...">
+				<button type="submit" class="btn-modern btn-primary-modern" style="padding:6px 14px; font-size:12px;">Cari</button>
+			</div>
+		</form>
+	</div>
+</div>
+
+<!-- TABLE -->
+<div class="card">
+	<div class="card-body" style="padding:0;">
+		<table class="table-modern">
+			<thead>
+				<tr>
+					<th style="width:50px;">No</th>
+					<th>Nama Barang</th>
+					<th>Harga Jual</th>
+					<th>Jumlah Stok</th>
+					<th style="width:200px;">Aksi</th>
+				</tr>
+			</thead>
+			<tbody>
+				<?php 
+				if(isset($_GET['cari'])){
+					$cari = mysql_real_escape_string($_GET['cari']);
+					$brg = mysql_query("select * from barang where nama like '$cari' or jenis like '$cari'");
+				}else{
+					$brg = mysql_query("select * from barang limit $start, $per_hal");
+				}
+				$no = 1;
+				while($b = mysql_fetch_array($brg)){
+					$stok_class = $b['jumlah'] <= 3 ? 'badge-danger' : ($b['jumlah'] <= 10 ? 'badge-warning' : 'badge-success');
+					?>
+					<tr>
+						<td class="text-muted"><?php echo $no++ ?></td>
+						<td>
+							<div style="font-weight:500;"><?php echo $b['nama'] ?></div>
+						</td>
+						<td class="fw-600">Rp <?php echo number_format($b['harga']) ?>,-</td>
+						<td>
+							<span class="badge-modern <?php echo $stok_class; ?>"><?php echo $b['jumlah'] ?> unit</span>
+						</td>
+						<td>
+							<div class="d-flex gap-8">
+								<a href="det_barang.php?id=<?php echo $b['id']; ?>" class="btn-modern btn-info-modern" style="padding:5px 10px; font-size:12px;">Detail</a>
+								<a href="edit.php?id=<?php echo $b['id']; ?>" class="btn-modern btn-warning-modern" style="padding:5px 10px; font-size:12px;">Edit</a>
+								<a onclick="if(confirm('Apakah anda yakin ingin menghapus data ini ??')){ location.href='hapus.php?id=<?php echo $b['id']; ?>' }" class="btn-modern btn-danger-modern" style="padding:5px 10px; font-size:12px; cursor:pointer;">Hapus</a>
+							</div>
+						</td>
+					</tr>		
+					<?php 
+				}
+				?>
+			</tbody>
+			<tfoot>
+				<tr>
+					<td colspan="4" style="font-weight:600; color:#64748b;">&#128181; Total Modal Keseluruhan</td>
+					<td>
+						<?php 
+						$x = mysql_query("select sum(modal) as total from barang");	
+						$xx = mysql_fetch_array($x);			
+						echo "<span style='font-size:15px; font-weight:700; color:#4f46e5;'>Rp ".number_format($xx['total']).",-</span>";		
+						?>
+					</td>
+				</tr>
+			</tfoot>
+		</table>
+	</div>
+</div>
+
+<!-- PAGINATION -->
+<?php if($halaman > 1): ?>
+<div class="pagination-modern mt-16">
+	<?php 
+	for($x = 1; $x <= $halaman; $x++){
+		$active = ($page == $x) ? 'active' : '';
+		echo "<a href='?page=$x' class='$active'>$x</a>";
 	}
 	?>
-	<tr>
-		<td colspan="4">Total Modal</td>
-		<td>			
-		<?php 
-		
-			$x=mysql_query("select sum(modal) as total from barang");	
-			$xx=mysql_fetch_array($x);			
-			echo "<b> Rp.". number_format($xx['total']).",-</b>";		
-		?>
-		</td>
-	</tr>
-</table>
-<ul class="pagination">			
-			<?php 
-			for($x=1;$x<=$halaman;$x++){
-				?>
-				<li><a href="?page=<?php echo $x ?>"><?php echo $x ?></a></li>
-				<?php
-			}
-			?>						
-		</ul>
-<!-- modal input -->
-<div id="myModal" class="modal fade">
+</div>
+<?php endif; ?>
+
+<!-- MODAL TAMBAH BARANG -->
+<div id="myModal" class="modal fade modal-modern">
 	<div class="modal-dialog">
 		<div class="modal-content">
 			<div class="modal-header">
 				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-				<h4 class="modal-title">Tambah Barang Baru</h4>
+				<h4 class="modal-title">&#43; Tambah Barang Baru</h4>
 			</div>
-			<div class="modal-body">
-				<form action="tmb_brg_act.php" method="post">
+			<form action="tmb_brg_act.php" method="post" class="form-modern">
+				<div class="modal-body">
 					<div class="form-group">
 						<label>Nama Barang</label>
-						<input name="nama" type="text" class="form-control" placeholder="Nama Barang ..">
+						<input name="nama" type="text" placeholder="Nama Barang ..">
 					</div>
 					<div class="form-group">
 						<label>Jenis</label>
-						<input name="jenis" type="text" class="form-control" placeholder="Jenis Barang ..">
+						<input name="jenis" type="text" placeholder="Jenis Barang ..">
 					</div>
 					<div class="form-group">
 						<label>Suplier</label>
-						<input name="suplier" type="text" class="form-control" placeholder="Suplier ..">
+						<input name="suplier" type="text" placeholder="Suplier ..">
 					</div>
 					<div class="form-group">
 						<label>Harga Modal</label>
-						<input name="modal" type="text" class="form-control" placeholder="Modal per unit">
+						<input name="modal" type="text" placeholder="Modal per unit">
 					</div>	
 					<div class="form-group">
 						<label>Harga Jual</label>
-						<input name="harga" type="text" class="form-control" placeholder="Harga Jual per unit">
+						<input name="harga" type="text" placeholder="Harga Jual per unit">
 					</div>	
 					<div class="form-group">
 						<label>Jumlah</label>
-						<input name="jumlah" type="text" class="form-control" placeholder="Jumlah">
-					</div>																	
-
+						<input name="jumlah" type="text" placeholder="Jumlah">
+					</div>
 				</div>
 				<div class="modal-footer">
-					<button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
-					<input type="submit" class="btn btn-primary" value="Simpan">
+					<button type="button" class="btn-modern btn-secondary-modern" data-dismiss="modal">Batal</button>
+					<input type="submit" class="btn-modern btn-primary-modern" value="Simpan">
 				</div>
 			</form>
 		</div>
 	</div>
 </div>
 
-
-
 <?php 
 include 'footer.php';
-
-?>
\ No newline at end of file
+?>
diff --git a/admin/barang_laku.php b/admin/barang_laku.php
index 7041c60..11f4b5a 100644
--- a/admin/barang_laku.php
+++ b/admin/barang_laku.php
@@ -1,160 +1,195 @@
-<?php include 'header.php';	?>
-
-<h3><span class="glyphicon glyphicon-briefcase"></span>  Data Barang Terjual</h3>
-<button style="margin-bottom:20px" data-toggle="modal" data-target="#myModal" class="btn btn-info col-md-2"><span class="glyphicon glyphicon-pencil"></span>  Entry</button>
-<form action="" method="get">
-	<div class="input-group col-md-5 col-md-offset-7">
-		<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-calendar"></span></span>
-		<select type="submit" name="tanggal" class="form-control" onchange="this.form.submit()">
-			<option>Pilih tanggal ..</option>
-			<?php 
-			$pil=mysql_query("select distinct tanggal from barang_laku order by tanggal desc");
-			while($p=mysql_fetch_array($pil)){
-				?>
-				<option><?php echo $p['tanggal'] ?></option>
-				<?php
-			}
-			?>			
-		</select>
-	</div>
-
-</form>
-<br/>
-<?php 
-if(isset($_GET['tanggal'])){
-	$tanggal=mysql_real_escape_string($_GET['tanggal']);
-	$tg="lap_barang_laku.php?tanggal='$tanggal'";
-	?><a style="margin-bottom:10px" href="<?php echo $tg ?>" target="_blank" class="btn btn-default pull-right"><span class='glyphicon glyphicon-print'></span>  Cetak</a><?php
-}else{
-	$tg="lap_barang_laku.php";
-}
-?>
-
-<br/>
-<?php 
-if(isset($_GET['tanggal'])){
-	echo "<h4> Data Penjualan Tanggal  <a style='color:blue'> ". $_GET['tanggal']."</a></h4>";
-}
-?>
-<table class="table">
-	<tr>
-		<th>No</th>
-		<th>Tanggal</th>
-		<th>Nama Barang</th>
-		<th>Harga Terjual /pc</th>
-		<th>Total Harga</th>
-		<th>Jumlah</th>			
-		<th>Laba</th>			
-		<th>Opsi</th>
-	</tr>
-	<?php 
-	if(isset($_GET['tanggal'])){
-		$tanggal=mysql_real_escape_string($_GET['tanggal']);
-		$brg=mysql_query("select * from barang_laku where tanggal like '$tanggal' order by tanggal desc");
-	}else{
-		$brg=mysql_query("select * from barang_laku order by tanggal desc");
-	}
-	$no=1;
-	while($b=mysql_fetch_array($brg)){
-
-		?>
-		<tr>
-			<td><?php echo $no++ ?></td>
-			<td><?php echo $b['tanggal'] ?></td>
-			<td><?php echo $b['nama'] ?></td>
-			<td>Rp.<?php echo number_format($b['harga']) ?>,-</td>
-			<td>Rp.<?php echo number_format($b['total_harga']) ?>,-</td>
-			<td><?php echo $b['jumlah'] ?></td>			
-			<td><?php echo "Rp.".number_format($b['laba']).",-"?></td>			
-			<td>		
-				<a href="edit_laku.php?id=<?php echo $b['id']; ?>" class="btn btn-warning">Edit</a>
-				<a onclick="if(confirm('Apakah anda yakin ingin menghapus data ini ??')){ location.href='hapus_laku.php?id=<?php echo $b['id']; ?>&jumlah=<?php echo $b['jumlah'] ?>&nama=<?php echo $b['nama']; ?>' }" class="btn btn-danger">Hapus</a>
-			</td>
-		</tr>
+<?php include 'header.php'; ?>
 
-		<?php 
-	}
-	?>
-	<tr>
-		<td colspan="7">Total Pemasukan</td>
+<div class="page-header">
+	<h2>
+		<span class="page-icon">&#128179;</span>
+		Data Penjualan
+	</h2>
+	<div class="d-flex gap-8">
 		<?php 
 		if(isset($_GET['tanggal'])){
-			$tanggal=mysql_real_escape_string($_GET['tanggal']);
-			$x=mysql_query("select sum(total_harga) as total from barang_laku where tanggal='$tanggal'");	
-			$xx=mysql_fetch_array($x);			
-			echo "<td><b> Rp.". number_format($xx['total']).",-</b></td>";
-		}else{
-
+			$tanggal = mysql_real_escape_string($_GET['tanggal']);
+			$tg = "lap_barang_laku.php?tanggal='$tanggal'";
+			echo "<a href='$tg' target='_blank' class='btn-modern btn-secondary-modern'>&#128438; Cetak</a>";
 		}
-
 		?>
-	</tr>
-	<tr>
-		<td colspan="7">Total Laba</td>
-		<?php 
-		if(isset($_GET['tanggal'])){
-			$tanggal=mysql_real_escape_string($_GET['tanggal']);
-			$x=mysql_query("select sum(laba) as total from barang_laku where tanggal='$tanggal'");	
-			$xx=mysql_fetch_array($x);			
-			echo "<td><b> Rp.". number_format($xx['total']).",-</b></td>";
-		}else{
+		<button data-toggle="modal" data-target="#myModal" class="btn-modern btn-primary-modern">
+			&#43; Entry Penjualan
+		</button>
+	</div>
+</div>
 
-		}
+<!-- FILTER BY DATE -->
+<div class="card mb-24">
+	<div class="card-body" style="padding:16px;">
+		<form action="" method="get">
+			<div class="d-flex align-center gap-12" style="flex-wrap:wrap;">
+				<label style="font-size:13px; font-weight:500; color:#1e293b; white-space:nowrap;">&#128197; Filter Tanggal:</label>
+				<div class="search-bar" style="min-width:220px;">
+					<span class="search-icon">&#128197;</span>
+					<select name="tanggal" class="form-control" onchange="this.form.submit()" style="border:none; outline:none; font-size:13.5px; font-family:inherit; background:transparent; width:100%; color:#1e293b;">
+						<option value="">Semua Tanggal</option>
+						<?php 
+						$pil = mysql_query("select distinct tanggal from barang_laku order by tanggal desc");
+						while($p = mysql_fetch_array($pil)){
+							$selected = (isset($_GET['tanggal']) && $_GET['tanggal'] == $p['tanggal']) ? 'selected' : '';
+							echo "<option $selected>".$p['tanggal']."</option>";
+						}
+						?>			
+					</select>
+				</div>
+				<?php if(isset($_GET['tanggal']) && $_GET['tanggal']): ?>
+				<span class="badge-modern badge-info">Menampilkan: <?php echo htmlspecialchars($_GET['tanggal']); ?></span>
+				<a href="barang_laku.php" class="btn-modern btn-secondary-modern" style="padding:5px 10px; font-size:12px;">&#10005; Reset</a>
+				<?php endif; ?>
+			</div>
+		</form>
+	</div>
+</div>
 
-		?>
-	</tr>
-</table>
+<!-- TABLE -->
+<div class="card">
+	<div class="card-body" style="padding:0;">
+		<table class="table-modern">
+			<thead>
+				<tr>
+					<th style="width:50px;">No</th>
+					<th>Tanggal</th>
+					<th>Nama Barang</th>
+					<th>Harga /pc</th>
+					<th>Total Harga</th>
+					<th>Jumlah</th>
+					<th>Laba</th>
+					<th style="width:150px;">Aksi</th>
+				</tr>
+			</thead>
+			<tbody>
+				<?php 
+				if(isset($_GET['tanggal']) && $_GET['tanggal']){
+					$tanggal = mysql_real_escape_string($_GET['tanggal']);
+					$brg = mysql_query("select * from barang_laku where tanggal like '$tanggal' order by tanggal desc");
+				}else{
+					$brg = mysql_query("select * from barang_laku order by tanggal desc");
+				}
+				$no = 1;
+				while($b = mysql_fetch_array($brg)){
+					?>
+					<tr>
+						<td class="text-muted"><?php echo $no++ ?></td>
+						<td><span class="badge-modern badge-info"><?php echo $b['tanggal'] ?></span></td>
+						<td style="font-weight:500;"><?php echo $b['nama'] ?></td>
+						<td>Rp <?php echo number_format($b['harga']) ?>,-</td>
+						<td class="fw-600">Rp <?php echo number_format($b['total_harga']) ?>,-</td>
+						<td><?php echo $b['jumlah'] ?> unit</td>
+						<td class="text-success-color fw-600">Rp <?php echo number_format($b['laba']) ?>,-</td>
+						<td>
+							<div class="d-flex gap-8">
+								<a href="edit_laku.php?id=<?php echo $b['id']; ?>" class="btn-modern btn-warning-modern" style="padding:5px 10px; font-size:12px;">Edit</a>
+								<a onclick="if(confirm('Apakah anda yakin ingin menghapus data ini ??')){ location.href='hapus_laku.php?id=<?php echo $b['id']; ?>&jumlah=<?php echo $b['jumlah'] ?>&nama=<?php echo $b['nama']; ?>' }" class="btn-modern btn-danger-modern" style="padding:5px 10px; font-size:12px; cursor:pointer;">Hapus</a>
+							</div>
+						</td>
+					</tr>
+					<?php 
+				}
+				?>
+			</tbody>
+			<?php if(isset($_GET['tanggal']) && $_GET['tanggal']): ?>
+			<tfoot>
+				<?php 
+				$tanggal = mysql_real_escape_string($_GET['tanggal']);
+				$x = mysql_query("select sum(total_harga) as total, sum(laba) as total_laba from barang_laku where tanggal='$tanggal'");	
+				$xx = mysql_fetch_array($x);
+				?>
+				<tr>
+					<td colspan="4" style="font-weight:600; color:#64748b;">&#128181; Total Pemasukan</td>
+					<td colspan="4" style="font-size:15px; font-weight:700; color:#4f46e5;">Rp <?php echo number_format($xx['total']); ?>,-</td>
+				</tr>
+				<tr>
+					<td colspan="4" style="font-weight:600; color:#64748b;">&#128200; Total Laba</td>
+					<td colspan="4" style="font-size:15px; font-weight:700; color:#10b981;">Rp <?php echo number_format($xx['total_laba']); ?>,-</td>
+				</tr>
+			</tfoot>
+			<?php endif; ?>
+		</table>
+	</div>
+</div>
 
-<!-- modal input -->
-<div id="myModal" class="modal fade">
-	<div class="modal-dialog">
+<!-- MODAL ENTRY PENJUALAN -->
+<div id="myModal" class="modal fade modal-modern">
+	<div class="modal-dialog modal-lg">
 		<div class="modal-content">
 			<div class="modal-header">
 				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-				<h4 class="modal-title">Tambah Penjualan
-				</div>
-				<div class="modal-body">				
-					<form action="barang_laku_act.php" method="post">
-						<div class="form-group">
-							<label>Tanggal</label>
-							<input name="tgl" type="text" class="form-control" id="tgl" autocomplete="off">
-						</div>	
-						<div class="form-group">
-							<label>Nama Barang</label>								
-							<select class="form-control" name="nama">
-								<?php 
-								$brg=mysql_query("select * from barang");
-								while($b=mysql_fetch_array($brg)){
-									?>	
-									<option value="<?php echo $b['nama']; ?>"><?php echo $b['nama'] ?></option>
-									<?php 
-								}
-								?>
-							</select>
-
-						</div>									
-						<div class="form-group">
-							<label>Harga Jual / unit</label>
-							<input name="harga" type="text" class="form-control" placeholder="Harga" autocomplete="off">
-						</div>	
-						<div class="form-group">
-							<label>Jumlah</label>
-							<input name="jumlah" type="text" class="form-control" placeholder="Jumlah" autocomplete="off">
-						</div>																	
-
+				<h4 class="modal-title">&#43; Entry Penjualan Baru</h4>
+			</div>
+			<form action="barang_laku_act.php" method="post" class="form-modern">
+				<div class="modal-body">
+					<div class="form-group">
+						<label>Tanggal Penjualan</label>
+						<input name="tgl" type="text" id="tgl" autocomplete="off" placeholder="Pilih tanggal...">
 					</div>
-					<div class="modal-footer">
-						<button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>
-						<input type="reset" class="btn btn-danger" value="Reset">												
-						<input type="submit" class="btn btn-primary" value="Simpan">
+					<div class="form-group">
+						<label>Daftar Barang <span class="text-muted" style="font-weight:400;">(bisa tambah lebih dari 1)</span></label>
+						<div style="overflow-x:auto;">
+							<table class="table-modern" id="items_table" style="min-width:500px;">
+								<thead>
+									<tr>
+										<th>Nama Barang</th>
+										<th>Harga Jual /unit</th>
+										<th>Jumlah</th>
+										<th style="width:80px;">Aksi</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr class="item-row">
+										<td>
+											<select class="form-control" name="nama[]" style="border:1.5px solid #e2e8f0; border-radius:8px; padding:8px 10px; font-size:13px; width:100%;">
+												<?php 
+												$brg = mysql_query("select * from barang");
+												while($b = mysql_fetch_array($brg)){
+													echo '<option value="'.$b['nama'].'">'.$b['nama'].'</option>';
+												}
+												?>
+											</select>
+										</td>
+										<td><input name="harga[]" type="text" placeholder="Harga" autocomplete="off"></td>
+										<td><input name="jumlah[]" type="text" placeholder="Jumlah" autocomplete="off"></td>
+										<td><button type="button" class="btn-modern btn-danger-modern remove-row" style="padding:5px 10px; font-size:12px;">&#10005;</button></td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+						<button type="button" id="add_row" class="btn-modern btn-secondary-modern" style="margin-top:10px;">
+							&#43; Tambah Baris
+						</button>
 					</div>
-				</form>
-			</div>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn-modern btn-secondary-modern" data-dismiss="modal">Batal</button>
+					<input type="reset" class="btn-modern btn-danger-modern" value="Reset">
+					<input type="submit" class="btn-modern btn-primary-modern" value="Simpan">
+				</div>
+			</form>
 		</div>
 	</div>
-	<script type="text/javascript">
-		$(document).ready(function(){
-			$("#tgl").datepicker({dateFormat : 'yy/mm/dd'});							
-		});
-	</script>
-	<?php include 'footer.php'; ?>
\ No newline at end of file
+</div>
+
+<script type="text/javascript">
+$(document).ready(function(){
+	$("#tgl").datepicker({dateFormat : 'yy/mm/dd'}); 
+
+	$('#add_row').on('click', function(){
+		var row = $('.item-row:first').clone();
+		row.find('input').val('');
+		$('#items_table tbody').append(row);
+	});
+
+	$(document).on('click', '.remove-row', function(){
+		if($('#items_table tbody tr').length > 1){
+			$(this).closest('tr').remove();
+		}
+	});
+});
+</script>
+
+<?php include 'footer.php'; ?>
diff --git a/admin/barang_laku_act.php b/admin/barang_laku_act.php
index 7afa76e..fa21fd6 100644
--- a/admin/barang_laku_act.php
+++ b/admin/barang_laku_act.php
@@ -1,21 +1,56 @@
-<?php 
-
+<?php
 include 'config.php';
-$tgl=$_POST['tgl'];
-$nama=$_POST['nama'];
-$harga=$_POST['harga'];
-$jumlah=$_POST['jumlah'];
-
-$dt=mysql_query("select * from barang where nama='$nama'");
-$data=mysql_fetch_array($dt);
-$sisa=$data['jumlah']-$jumlah;
-mysql_query("update barang set jumlah='$sisa' where nama='$nama'");
-
-$modal=$data['modal'];
-$laba=$harga-$modal;
-$labaa=$laba*$jumlah;
-$total_harga=$harga*$jumlah;
-mysql_query("insert into barang_laku values('','$tgl','$nama','$jumlah','$harga','$total_harga','$labaa')")or die(mysql_error());
+
+$tgl = mysql_real_escape_string($_POST['tgl']);
+
+// support multiple items: nama[], harga[], jumlah[]
+if (isset($_POST['nama']) && is_array($_POST['nama'])) {
+	$names = $_POST['nama'];
+	$prices = $_POST['harga'];
+	$amounts = $_POST['jumlah'];
+
+	for ($i = 0; $i < count($names); $i++) {
+		$nama = mysql_real_escape_string($names[$i]);
+		$harga = floatval($prices[$i]);
+		$jumlah = intval($amounts[$i]);
+
+		if ($nama === '' || $jumlah <= 0) continue;
+
+		$dt = mysql_query("select * from barang where nama='$nama'") or die(mysql_error());
+		$data = mysql_fetch_array($dt);
+		if (!$data) continue;
+
+		// update stock
+		$sisa = $data['jumlah'] - $jumlah;
+		if ($sisa < 0) $sisa = 0;
+		mysql_query("update barang set jumlah='$sisa' where nama='$nama'");
+
+		$modal = $data['modal'];
+		$laba = $harga - $modal;
+		$labaa = $laba * $jumlah;
+		$total_harga = $harga * $jumlah;
+
+		mysql_query("insert into barang_laku values(NULL,'$tgl','$nama','$jumlah','$harga','$total_harga','$labaa')") or die(mysql_error());
+	}
+
+} else {
+	// fallback single item
+	$nama = mysql_real_escape_string($_POST['nama']);
+	$harga = floatval($_POST['harga']);
+	$jumlah = intval($_POST['jumlah']);
+
+	$dt = mysql_query("select * from barang where nama='$nama'") or die(mysql_error());
+	$data = mysql_fetch_array($dt);
+	$sisa = $data['jumlah'] - $jumlah;
+	mysql_query("update barang set jumlah='$sisa' where nama='$nama'");
+
+	$modal = $data['modal'];
+	$laba = $harga - $modal;
+	$labaa = $laba * $jumlah;
+	$total_harga = $harga * $jumlah;
+	mysql_query("insert into barang_laku values(NULL,'$tgl','$nama','$jumlah','$harga','$total_harga','$labaa')") or die(mysql_error());
+}
+
 header("location:barang_laku.php");
 
 ?>
\ No newline at end of file
diff --git a/admin/config.php b/admin/config.php
index ea4b427..97ae887 100644
--- a/admin/config.php
+++ b/admin/config.php
@@ -1,4 +1,65 @@
-<?php 
-mysql_connect("localhost","root","xxx");
-mysql_select_db("malasngoding_kios");
+<?php
+// Compatibility layer: provide legacy mysql_* functions using mysqli
+$DB_HOST = "db_malasngoding";
+$DB_USER = "root";
+$DB_PASS = "xxx";
+$DB_NAME = "malasngoding_kios";
+
+$__mysqli = mysqli_connect($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME);
+if (!$__mysqli) {
+	die('Database connection failed: ' . mysqli_connect_error());
+}
+
+function mysql_connect($host = null, $user = null, $pass = null)
+{
+	global $__mysqli, $DB_HOST, $DB_USER, $DB_PASS;
+	return $__mysqli;
+}
+
+function mysql_select_db($db)
+{
+	global $__mysqli;
+	return mysqli_select_db($__mysqli, $db);
+}
+
+function mysql_query($query)
+{
+	global $__mysqli;
+	return mysqli_query($__mysqli, $query);
+}
+
+function mysql_fetch_array($result)
+{
+	return mysqli_fetch_array($result);
+}
+
+function mysql_fetch_assoc($result)
+{
+	return mysqli_fetch_assoc($result);
+}
+
+function mysql_num_rows($result)
+{
+	return mysqli_num_rows($result);
+}
+
+function mysql_real_escape_string($str)
+{
+	global $__mysqli;
+	return mysqli_real_escape_string($__mysqli, $str);
+}
+
+function mysql_result($result, $row = 0, $field = 0)
+{
+	if (!mysqli_data_seek($result, $row)) return false;
+	$data = mysqli_fetch_array($result);
+	return isset($data[$field]) ? $data[$field] : false;
+}
+
+function mysql_error()
+{
+	global $__mysqli;
+	return mysqli_error($__mysqli);
+}
+
 ?>
\ No newline at end of file
diff --git a/admin/det_barang.php b/admin/det_barang.php
index 951b062..7d15c08 100644
--- a/admin/det_barang.php
+++ b/admin/det_barang.php
@@ -2,47 +2,68 @@
 include 'header.php';
 ?>
 
-<h3><span class="glyphicon glyphicon-briefcase"></span>  Detail Barang</h3>
-<a class="btn" href="barang.php"><span class="glyphicon glyphicon-arrow-left"></span>  Kembali</a>
+<div class="page-header">
+	<h2>
+		<span class="page-icon">&#128230;</span>
+		Detail Barang
+	</h2>
+	<a href="barang.php" class="btn-modern btn-secondary-modern">&#8592; Kembali</a>
+</div>
 
 <?php
-$id_brg=mysql_real_escape_string($_GET['id']);
-
-
-$det=mysql_query("select * from barang where id='$id_brg'")or die(mysql_error());
-while($d=mysql_fetch_array($det)){
-	?>					
-	<table class="table">
-		<tr>
-			<td>Nama</td>
-			<td><?php echo $d['nama'] ?></td>
-		</tr>
-		<tr>
-			<td>Jenis</td>
-			<td><?php echo $d['jenis'] ?></td>
-		</tr>
-		<tr>
-			<td>Suplier</td>
-			<td><?php echo $d['suplier'] ?></td>
-		</tr>
-		<tr>
-			<td>Modal</td>
-			<td>Rp.<?php echo number_format($d['modal']); ?>,-</td>
-		</tr>
-		<tr>
-			<td>Harga</td>
-			<td>Rp.<?php echo number_format($d['harga']) ?>,-</td>
-		</tr>
-		<tr>
-			<td>Jumlah</td>
-			<td><?php echo $d['jumlah'] ?></td>
-		</tr>
-		<tr>
-			<td>Sisa</td>
-			<td><?php echo $d['sisa'] ?></td>
-		</tr>
-	</table>
-	<?php 
+$id_brg = mysql_real_escape_string($_GET['id']);
+$det = mysql_query("select * from barang where id='$id_brg'") or die(mysql_error());
+while($d = mysql_fetch_array($det)){
+?>
+<div class="card" style="max-width:600px;">
+	<div class="card-header">
+		<h3>&#128230; <?php echo htmlspecialchars($d['nama']); ?></h3>
+		<div class="d-flex gap-8">
+			<a href="edit.php?id=<?php echo $d['id']; ?>" class="btn-modern btn-warning-modern" style="padding:6px 12px; font-size:12px;">&#9998; Edit</a>
+		</div>
+	</div>
+	<div class="card-body">
+		<table class="table-modern">
+			<tbody>
+				<tr>
+					<td style="width:40%; color:#64748b; font-weight:500;">Nama Barang</td>
+					<td style="font-weight:600;"><?php echo htmlspecialchars($d['nama']); ?></td>
+				</tr>
+				<tr>
+					<td style="color:#64748b; font-weight:500;">Jenis</td>
+					<td><?php echo htmlspecialchars($d['jenis']); ?></td>
+				</tr>
+				<tr>
+					<td style="color:#64748b; font-weight:500;">Suplier</td>
+					<td><?php echo htmlspecialchars($d['suplier']); ?></td>
+				</tr>
+				<tr>
+					<td style="color:#64748b; font-weight:500;">Harga Modal</td>
+					<td class="fw-600">Rp <?php echo number_format($d['modal']); ?>,-</td>
+				</tr>
+				<tr>
+					<td style="color:#64748b; font-weight:500;">Harga Jual</td>
+					<td class="fw-600 text-primary-color">Rp <?php echo number_format($d['harga']); ?>,-</td>
+				</tr>
+				<tr>
+					<td style="color:#64748b; font-weight:500;">Jumlah Stok</td>
+					<td>
+						<?php 
+						$stok_class = $d['jumlah'] <= 3 ? 'badge-danger' : ($d['jumlah'] <= 10 ? 'badge-warning' : 'badge-success');
+						echo "<span class='badge-modern $stok_class'>".$d['jumlah']." unit</span>";
+						?>
+					</td>
+				</tr>
+				<tr>
+					<td style="color:#64748b; font-weight:500;">Sisa</td>
+					<td><?php echo $d['sisa']; ?></td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</div>
+<?php 
 }
 ?>
-<?php include 'footer.php'; ?>
\ No newline at end of file
+
+<?php include 'footer.php'; ?>
diff --git a/admin/edit.php b/admin/edit.php
index b545ede..46d9a23 100644
--- a/admin/edit.php
+++ b/admin/edit.php
@@ -1,50 +1,60 @@
 <?php 
 include 'header.php';
 ?>
-<h3><span class="glyphicon glyphicon-briefcase"></span>  Edit Barang</h3>
-<a class="btn" href="barang.php"><span class="glyphicon glyphicon-arrow-left"></span>  Kembali</a>
+
+<div class="page-header">
+	<h2>
+		<span class="page-icon">&#9998;</span>
+		Edit Barang
+	</h2>
+	<a href="barang.php" class="btn-modern btn-secondary-modern">&#8592; Kembali</a>
+</div>
+
 <?php
-$id_brg=mysql_real_escape_string($_GET['id']);
-$det=mysql_query("select * from barang where id='$id_brg'")or die(mysql_error());
-while($d=mysql_fetch_array($det)){
-?>					
-	<form action="update.php" method="post">
-		<table class="table">
-			<tr>
-				<td></td>
-				<td><input type="hidden" name="id" value="<?php echo $d['id'] ?>"></td>
-			</tr>
-			<tr>
-				<td>Nama</td>
-				<td><input type="text" class="form-control" name="nama" value="<?php echo $d['nama'] ?>"></td>
-			</tr>
-			<tr>
-				<td>Jenis</td>
-				<td><input type="text" class="form-control" name="jenis" value="<?php echo $d['jenis'] ?>"></td>
-			</tr>
-			<tr>
-				<td>Suplier</td>
-				<td><input type="text" class="form-control" name="suplier" value="<?php echo $d['suplier'] ?>"></td>
-			</tr>
-			<tr>
-				<td>Modal</td>
-				<td><input type="text" class="form-control" name="modal" value="<?php echo $d['modal'] ?>"></td>
-			</tr>
-			<tr>
-				<td>Harga</td>
-				<td><input type="text" class="form-control" name="harga" value="<?php echo $d['harga'] ?>"></td>
-			</tr>
-			<tr>
-				<td>Jumlah</td>
-				<td><input type="text" class="form-control" name="jumlah" value="<?php echo $d['jumlah'] ?>"></td>
-			</tr>
-			<tr>
-				<td></td>
-				<td><input type="submit" class="btn btn-info" value="Simpan"></td>
-			</tr>
-		</table>
-	</form>
-	<?php 
+$id_brg = mysql_real_escape_string($_GET['id']);
+$det = mysql_query("select * from barang where id='$id_brg'") or die(mysql_error());
+while($d = mysql_fetch_array($det)){
+?>
+<div class="card" style="max-width:600px;">
+	<div class="card-header">
+		<h3>&#128230; Informasi Barang</h3>
+	</div>
+	<div class="card-body">
+		<form action="update.php" method="post" class="form-modern">
+			<input type="hidden" name="id" value="<?php echo $d['id'] ?>">
+			<div class="form-group">
+				<label>Nama Barang</label>
+				<input type="text" name="nama" value="<?php echo htmlspecialchars($d['nama']) ?>">
+			</div>
+			<div class="form-group">
+				<label>Jenis</label>
+				<input type="text" name="jenis" value="<?php echo htmlspecialchars($d['jenis']) ?>">
+			</div>
+			<div class="form-group">
+				<label>Suplier</label>
+				<input type="text" name="suplier" value="<?php echo htmlspecialchars($d['suplier']) ?>">
+			</div>
+			<div class="form-group">
+				<label>Harga Modal</label>
+				<input type="text" name="modal" value="<?php echo $d['modal'] ?>">
+			</div>
+			<div class="form-group">
+				<label>Harga Jual</label>
+				<input type="text" name="harga" value="<?php echo $d['harga'] ?>">
+			</div>
+			<div class="form-group">
+				<label>Jumlah Stok</label>
+				<input type="text" name="jumlah" value="<?php echo $d['jumlah'] ?>">
+			</div>
+			<div class="d-flex gap-8" style="margin-top:8px;">
+				<input type="submit" class="btn-modern btn-primary-modern" value="&#10003; Simpan Perubahan">
+				<a href="barang.php" class="btn-modern btn-secondary-modern">Batal</a>
+			</div>
+		</form>
+	</div>
+</div>
+<?php 
 }
 ?>
-<?php include 'footer.php'; ?>
\ No newline at end of file
+
+<?php include 'footer.php'; ?>
diff --git a/admin/edit_laku.php b/admin/edit_laku.php
index 54e0987..174ae22 100644
--- a/admin/edit_laku.php
+++ b/admin/edit_laku.php
@@ -2,67 +2,67 @@
 include 'header.php';
 ?>
 
-<h3><span class="glyphicon glyphicon-briefcase"></span>  Edit Barang</h3>
-<a class="btn" href="barang_laku.php"><span class="glyphicon glyphicon-arrow-left"></span>  Kembali</a>
+<div class="page-header">
+	<h2>
+		<span class="page-icon">&#9998;</span>
+		Edit Penjualan
+	</h2>
+	<a href="barang_laku.php" class="btn-modern btn-secondary-modern">&#8592; Kembali</a>
+</div>
 
 <?php
-$id_brg=mysql_real_escape_string($_GET['id']);
-
-$det=mysql_query("select * from barang_laku where id='$id_brg'")or die(mysql_error());
-while($d=mysql_fetch_array($det)){
-	?>					
-	<form action="update_laku.php" method="post">
-		<table class="table">
-			<tr>
-				<td></td>
-				<td><input type="hidden" name="id" value="<?php echo $d['id'] ?>"></td>
-			</tr>
-
-			<tr>
-				<td>Tanggal</td>
-				<td><input name="tgl" type="text" class="form-control" id="tgl" autocomplete="off" value="<?php echo $d['tanggal'] ?>"></td>
-			</tr>
-			<tr>
-				<td>Nama</td>
-				<td>
-					<select class="form-control" name="nama">
-						<?php 
-						$brg=mysql_query("select * from barang");
-						while($b=mysql_fetch_array($brg)){
-							?>	
-							<option <?php if($d['nama']==$b['nama']){echo "selected"; } ?> value="<?php echo $b['nama']; ?>"><?php echo $b['nama'] ?></option>
-							<?php 
-						}
-						?>
-					</select>
-				</td>
-			</tr>		
-
-			<tr>
-				<td>Harga</td>
-				<td><input type="text" class="form-control" name="harga" value="<?php echo $d['harga'] ?>"></td>
-			</tr>
-			<tr>
-				<td>Jumlah</td>
-				<td><input type="text" class="form-control" name="jumlah" value="<?php echo $d['jumlah'] ?>"></td>
-			</tr>
-			<tr>
-				<td></td>
-				<td><input type="submit" class="btn btn-info" value="Simpan"></td>
-			</tr>
-		</table>
-	</form>
-	<?php 
+$id_brg = mysql_real_escape_string($_GET['id']);
+$det = mysql_query("select * from barang_laku where id='$id_brg'") or die(mysql_error());
+while($d = mysql_fetch_array($det)){
+?>
+<div class="card" style="max-width:600px;">
+	<div class="card-header">
+		<h3>&#128179; Data Penjualan</h3>
+	</div>
+	<div class="card-body">
+		<form action="update_laku.php" method="post" class="form-modern">
+			<input type="hidden" name="id" value="<?php echo $d['id'] ?>">
+			<div class="form-group">
+				<label>Tanggal</label>
+				<input name="tgl" type="text" id="tgl" autocomplete="off" value="<?php echo $d['tanggal'] ?>">
+			</div>
+			<div class="form-group">
+				<label>Nama Barang</label>
+				<select name="nama" style="width:100%; padding:9px 12px; border:1.5px solid #e2e8f0; border-radius:8px; font-size:13.5px; font-family:inherit; color:#1e293b; background:white; outline:none;">
+					<?php 
+					$brg = mysql_query("select * from barang");
+					while($b = mysql_fetch_array($brg)){
+						$selected = ($d['nama'] == $b['nama']) ? 'selected' : '';
+						echo "<option $selected value='".$b['nama']."'>".$b['nama']."</option>";
+					}
+					?>
+				</select>
+			</div>
+			<div class="form-group">
+				<label>Harga Jual /unit</label>
+				<input type="text" name="harga" value="<?php echo $d['harga'] ?>">
+			</div>
+			<div class="form-group">
+				<label>Jumlah</label>
+				<input type="text" name="jumlah" value="<?php echo $d['jumlah'] ?>">
+			</div>
+			<div class="d-flex gap-8" style="margin-top:8px;">
+				<input type="submit" class="btn-modern btn-primary-modern" value="&#10003; Simpan Perubahan">
+				<a href="barang_laku.php" class="btn-modern btn-secondary-modern">Batal</a>
+			</div>
+		</form>
+	</div>
+</div>
+<?php 
 }
 ?>
- <script type="text/javascript">
-        $(document).ready(function(){
 
-            $('#tgl').datepicker({dateFormat: 'yy/mm/dd'});
+<script type="text/javascript">
+$(document).ready(function(){
+	$('#tgl').datepicker({dateFormat: 'yy/mm/dd'});
+});
+</script>
 
-        });
-    </script>
 <?php 
 include 'footer.php';
-
-?>
\ No newline at end of file
+?>
diff --git a/admin/footer.php b/admin/footer.php
index 17c7245..59a5d50 100644
--- a/admin/footer.php
+++ b/admin/footer.php
@@ -1,3 +1,14 @@
-</div>
+		</div><!-- end page-content -->
+	</div><!-- end main-content -->
+</div><!-- end admin-wrapper -->
+
+<script>
+$(document).ready(function(){
+	// Sidebar toggle for mobile
+	$('#sidebarToggle').on('click', function(){
+		$('#sidebar').toggleClass('open');
+	});
+});
+</script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/admin/ganti_foto.php b/admin/ganti_foto.php
index 6192a94..512a095 100644
--- a/admin/ganti_foto.php
+++ b/admin/ganti_foto.php
@@ -2,36 +2,42 @@
 include 'header.php';
 ?>
 
-<h3><span class="glyphicon glyphicon-picture"></span>  Ganti Foto</h3>
-<br/><br/>
+<div class="page-header">
+	<h2>
+		<span class="page-icon">&#128247;</span>
+		Ganti Foto Profil
+	</h2>
+</div>
+
 <?php 
 if(isset($_GET['pesan'])){
-	$pesan=mysql_real_escape_string($_GET['pesan']);
-	if($pesan=="oke"){
-		echo "<div class='alert alert-success'>Foto berhasil di ganti !! </div>";
+	$pesan = mysql_real_escape_string($_GET['pesan']);
+	if($pesan == "oke"){
+		echo "<div class='alert-modern alert-success mb-16'><span>&#10003;</span> Foto profil berhasil diubah!</div>";
 	}
 }
 ?>
 
-<br/>
-<div class="col-md-5 col-md-offset-3">
-	<form action="ganti_foto_act.php" method="post" enctype="multipart/form-data">
-		<div class="form-group">
-			<input name="user" type="hidden" value="<?php echo $_SESSION['uname']; ?>">
-		</div>
-		<div class="form-group">
-			<label>Foto</label>
-			<input name="foto" type="file" class="form-control" placeholder="Password Lama ..">
-		</div>		
-		<div class="form-group">
-			<label></label>
-			<input type="submit" class="btn btn-info" value="Ganti">
-			<input type="reset" class="btn btn-danger" value="reset">
-		</div>																	
-	</form>
+<div class="card" style="max-width:500px;">
+	<div class="card-header">
+		<h3>&#128247; Upload Foto Baru</h3>
+	</div>
+	<div class="card-body">
+		<form action="ganti_foto_act.php" method="post" enctype="multipart/form-data" class="form-modern">
+			<input name="user" type="hidden" value="<?php echo htmlspecialchars($_SESSION['uname']); ?>">
+			<div class="form-group">
+				<label>Pilih Foto</label>
+				<input name="foto" type="file" style="padding:8px; border:1.5px solid #e2e8f0; border-radius:8px; width:100%; font-family:inherit; font-size:13px;">
+				<p style="font-size:12px; color:#64748b; margin-top:6px;">Format: JPG, PNG, GIF. Ukuran maksimal 2MB.</p>
+			</div>
+			<div class="d-flex gap-8" style="margin-top:8px;">
+				<input type="submit" class="btn-modern btn-primary-modern" value="&#10003; Upload Foto">
+				<input type="reset" class="btn-modern btn-danger-modern" value="Reset">
+			</div>
+		</form>
+	</div>
 </div>
 
 <?php 
 include 'footer.php';
-
-?>
\ No newline at end of file
+?>
diff --git a/admin/ganti_pass.php b/admin/ganti_pass.php
index 5749435..617cc3d 100644
--- a/admin/ganti_pass.php
+++ b/admin/ganti_pass.php
@@ -2,49 +2,53 @@
 include 'header.php';
 ?>
 
-<h3><span class="glyphicon glyphicon-briefcase"></span>  Password</h3>
-<br/><br/>
+<div class="page-header">
+	<h2>
+		<span class="page-icon">&#128274;</span>
+		Ganti Password
+	</h2>
+</div>
+
 <?php 
 if(isset($_GET['pesan'])){
-	$pesan=mysql_real_escape_string($_GET['pesan']);
-	if($pesan=="gagal"){
-		echo "<div class='alert alert-danger'>Password gagal di ganti !!     Periksa Kembali Password yang anda masukkan !!</div>";
-	}else if($pesan=="tdksama"){
-		echo "<div class='alert alert-warning'>Password yang anda masukkan tidak sesuai  !!     silahkan ulangi !! </div>";
-	}else if($pesan=="oke"){
-		echo "<div class='alert alert-success'>Password yang anda masukkan tidak sesuai  !!     silahkan ulangi !! </div>";
+	$pesan = mysql_real_escape_string($_GET['pesan']);
+	if($pesan == "gagal"){
+		echo "<div class='alert-modern alert-danger mb-16'><span>&#9888;</span> Password gagal diganti! Periksa kembali password lama Anda.</div>";
+	}else if($pesan == "tdksama"){
+		echo "<div class='alert-modern alert-warning mb-16'><span>&#9888;</span> Password baru dan konfirmasi tidak sesuai. Silahkan ulangi.</div>";
+	}else if($pesan == "oke"){
+		echo "<div class='alert-modern alert-success mb-16'><span>&#10003;</span> Password berhasil diubah!</div>";
 	}
 }
 ?>
 
-<br/>
-<div class="col-md-5 col-md-offset-3">
-	<form action="ganti_pass_act.php" method="post">
-		<div class="form-group">
-			<input name="user" type="hidden" value="<?php echo $_SESSION['uname']; ?>">
-		</div>
-		<div class="form-group">
-			<label>Password Lama</label>
-			<input name="lama" type="password" class="form-control" placeholder="Password Lama ..">
-		</div>
-		<div class="form-group">
-			<label>Password Baru</label>
-			<input name="baru" type="password" class="form-control" placeholder="Password Baru ..">
-		</div>
-		<div class="form-group">
-			<label>Ulangi Password</label>
-			<input name="ulang" type="password" class="form-control" placeholder="Ulangi Password ..">
-		</div>	
-		<div class="form-group">
-			<label></label>
-			<input type="submit" class="btn btn-info" value="Simpan">
-			<input type="reset" class="btn btn-danger" value="reset">
-		</div>																	
-	</form>
+<div class="card" style="max-width:500px;">
+	<div class="card-header">
+		<h3>&#128274; Ubah Password Akun</h3>
+	</div>
+	<div class="card-body">
+		<form action="ganti_pass_act.php" method="post" class="form-modern">
+			<input name="user" type="hidden" value="<?php echo htmlspecialchars($_SESSION['uname']); ?>">
+			<div class="form-group">
+				<label>Password Lama</label>
+				<input name="lama" type="password" placeholder="Masukkan password lama...">
+			</div>
+			<div class="form-group">
+				<label>Password Baru</label>
+				<input name="baru" type="password" placeholder="Masukkan password baru...">
+			</div>
+			<div class="form-group">
+				<label>Konfirmasi Password Baru</label>
+				<input name="ulang" type="password" placeholder="Ulangi password baru...">
+			</div>
+			<div class="d-flex gap-8" style="margin-top:8px;">
+				<input type="submit" class="btn-modern btn-primary-modern" value="&#10003; Simpan Password">
+				<input type="reset" class="btn-modern btn-danger-modern" value="Reset">
+			</div>
+		</form>
+	</div>
 </div>
 
-
 <?php 
 include 'footer.php';
-
-?>
\ No newline at end of file
+?>
diff --git a/admin/header.php b/admin/header.php
index fc80920..6c59fb4 100644
--- a/admin/header.php
+++ b/admin/header.php
@@ -1,92 +1,162 @@
+<?php
+session_start();
+include 'cek.php';
+include 'config.php';
+?>
 <!DOCTYPE html>
-<html>
+<html lang="id">
 <head>
-	<?php 
-	session_start();
-	include 'cek.php';
-	include 'config.php';
-	?>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>KIOS MALASNGODING</title>
 	<link rel="stylesheet" type="text/css" href="../assets/css/bootstrap.css">
 	<link rel="stylesheet" type="text/css" href="../assets/js/jquery-ui/jquery-ui.css">
-	<script type="text/javascript" src="../assets/js/jquery.js"></script>
+	<link rel="stylesheet" type="text/css" href="../assets/css/modern.css">
 	<script type="text/javascript" src="../assets/js/jquery.js"></script>
 	<script type="text/javascript" src="../assets/js/bootstrap.js"></script>
-	<script type="text/javascript" src="../assets/js/jquery-ui/jquery-ui.js"></script>	
+	<script type="text/javascript" src="../assets/js/jquery-ui/jquery-ui.js"></script>
 </head>
 <body>
-	<div class="navbar navbar-default">
-		<div class="container-fluid">
-			<div class="navbar-header">
-				<a href="http://www.malasngoding.com" class="navbar-brand">KIOS MALASNGODING</a>
-				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
-					<span class="sr-only">Toggle navigation</span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-				</button>
+<div class="admin-wrapper">
+
+	<!-- SIDEBAR -->
+	<aside class="sidebar" id="sidebar">
+		<div class="sidebar-brand">
+			<div class="brand-icon">&#128722;</div>
+			<div class="brand-text">
+				<h3>KIOS</h3>
+				<span>Malasngoding</span>
 			</div>
-			<div class="collapse navbar-collapse">				
-				<ul class="nav navbar-nav navbar-right">
-					<li><a id="pesan_sedia" href="#" data-toggle="modal" data-target="#modalpesan"><span class='glyphicon glyphicon-comment'></span>  Pesan</a></li>
-					<li><a class="dropdown-toggle" data-toggle="dropdown" role="button" href="#">Hy , <?php echo $_SESSION['uname']  ?>&nbsp&nbsp<span class="glyphicon glyphicon-user"></span></a></li>
-				</ul>
+		</div>
+
+		<div class="sidebar-user">
+			<?php 
+			$use = $_SESSION['uname'];
+			$fo = mysql_query("select foto from admin where uname='$use'");
+			$f = mysql_fetch_array($fo);
+			if($f && $f['foto'] && file_exists("foto/".$f['foto'])){
+				echo '<img class="user-avatar" src="foto/'.$f['foto'].'" alt="Avatar">';
+			} else {
+				echo '<div class="user-avatar-placeholder">&#128100;</div>';
+			}
+			?>
+			<div class="user-info">
+				<h4><?php echo htmlspecialchars($_SESSION['uname']); ?></h4>
+				<span>Administrator</span>
 			</div>
 		</div>
-	</div>
 
-	<!-- modal input -->
-	<div id="modalpesan" class="modal fade">
-		<div class="modal-dialog">
-			<div class="modal-content">
-				<div class="modal-header">
-					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-					<h4 class="modal-title">Pesan Notification</h4>
-				</div>
-				<div class="modal-body">
-					<?php 
-					$periksa=mysql_query("select * from barang where jumlah <=3");
-					while($q=mysql_fetch_array($periksa)){	
-						if($q['jumlah']<=3){			
-							echo "<div style='padding:5px' class='alert alert-warning'><span class='glyphicon glyphicon-info-sign'></span> Stok  <a style='color:red'>". $q['nama']."</a> yang tersisa sudah kurang dari 3 . silahkan pesan lagi !!</div>";	
-						}
-					}
+		<nav class="sidebar-nav">
+			<div class="nav-section-title">Menu Utama</div>
+			<a href="index.php" class="<?php echo basename($_SERVER['PHP_SELF'])=='index.php' ? 'active' : ''; ?>">
+				<span class="nav-icon">&#127968;</span> Dashboard
+			</a>
+			<a href="barang.php" class="<?php echo basename($_SERVER['PHP_SELF'])=='barang.php' ? 'active' : ''; ?>">
+				<span class="nav-icon">&#128230;</span> Data Barang
+			</a>
+			<a href="barang_laku.php" class="<?php echo basename($_SERVER['PHP_SELF'])=='barang_laku.php' ? 'active' : ''; ?>">
+				<span class="nav-icon">&#128179;</span> Entry Penjualan
+			</a>
+
+			<div class="nav-section-title" style="margin-top:8px;">Laporan</div>
+			<a href="lap_laba_rugi_form.php" class="<?php echo basename($_SERVER['PHP_SELF'])=='lap_laba_rugi_form.php' ? 'active' : ''; ?>">
+				<span class="nav-icon">&#128202;</span> Laba Rugi
+			</a>
+
+			<div class="nav-section-title" style="margin-top:8px;">Pengaturan</div>
+			<a href="report_settings.php" class="<?php echo basename($_SERVER['PHP_SELF'])=='report_settings.php' ? 'active' : ''; ?>">
+				<span class="nav-icon">&#9881;</span> Pengaturan Kop
+			</a>
+			<a href="ganti_foto.php" class="<?php echo basename($_SERVER['PHP_SELF'])=='ganti_foto.php' ? 'active' : ''; ?>">
+				<span class="nav-icon">&#128247;</span> Ganti Foto
+			</a>
+			<a href="ganti_pass.php" class="<?php echo basename($_SERVER['PHP_SELF'])=='ganti_pass.php' ? 'active' : ''; ?>">
+				<span class="nav-icon">&#128274;</span> Ganti Password
+			</a>
+
+			<div class="nav-section-title" style="margin-top:8px;"></div>
+			<a href="logout.php" style="color:#f87171;">
+				<span class="nav-icon">&#128682;</span> Logout
+			</a>
+		</nav>
+	</aside>
+
+	<!-- MAIN CONTENT -->
+	<div class="main-content">
+
+		<!-- TOPBAR -->
+		<header class="topbar">
+			<div class="topbar-left">
+				<button class="topbar-btn" id="sidebarToggle" style="display:none;">
+					&#9776;
+				</button>
+				<span class="topbar-title">
+					<?php
+					$page = basename($_SERVER['PHP_SELF']);
+					$titles = [
+						'index.php' => 'Dashboard',
+						'barang.php' => 'Data Barang',
+						'barang_laku.php' => 'Entry Penjualan',
+						'lap_laba_rugi_form.php' => 'Laporan Laba Rugi',
+						'report_settings.php' => 'Pengaturan Kop',
+						'ganti_foto.php' => 'Ganti Foto',
+						'ganti_pass.php' => 'Ganti Password',
+						'edit.php' => 'Edit Barang',
+						'det_barang.php' => 'Detail Barang',
+						'edit_laku.php' => 'Edit Penjualan',
+					];
+					echo isset($titles[$page]) ? $titles[$page] : 'Admin Panel';
 					?>
+				</span>
+			</div>
+			<div class="topbar-right">
+				<?php 
+				$periksa_notif = mysql_query("select count(*) as cnt from barang where jumlah <=3");
+				$notif_row = mysql_fetch_array($periksa_notif);
+				$notif_count = $notif_row['cnt'];
+				?>
+				<a href="#" class="topbar-btn" data-toggle="modal" data-target="#modalpesan" title="Notifikasi Stok">
+					&#128276;
+					<?php if($notif_count > 0): ?>
+					<span class="badge-dot"></span>
+					<?php endif; ?>
+				</a>
+				<div class="topbar-user">
+					<span style="font-size:20px;">&#128100;</span>
+					<span class="user-name"><?php echo htmlspecialchars($_SESSION['uname']); ?></span>
 				</div>
-				<div class="modal-footer">
-					<button type="button" class="btn btn-default" data-dismiss="modal">Batal</button>						
-				</div>
-				
 			</div>
-		</div>
-	</div>
+		</header>
 
-	<div class="col-md-2">
-		<div class="row">
-			<?php 
-			$use=$_SESSION['uname'];
-			$fo=mysql_query("select foto from admin where uname='$use'");
-			while($f=mysql_fetch_array($fo)){
-				?>				
-
-				<div class="col-xs-6 col-md-12">
-					<a class="thumbnail">
-						<img class="img-responsive" src="foto/<?php echo $f['foto']; ?>">
-					</a>
+		<!-- NOTIFICATION MODAL -->
+		<div id="modalpesan" class="modal fade modal-modern">
+			<div class="modal-dialog">
+				<div class="modal-content">
+					<div class="modal-header">
+						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+						<h4 class="modal-title">&#128276; Notifikasi Stok</h4>
+					</div>
+					<div class="modal-body">
+						<?php 
+						$periksa = mysql_query("select * from barang where jumlah <=3");
+						$found = false;
+						while($q = mysql_fetch_array($periksa)){	
+							if($q['jumlah'] <= 3){
+								$found = true;
+								echo "<div class='stock-warning'><span class='warning-icon'>&#9888;</span> Stok <strong>".$q['nama']."</strong> tersisa <strong>".$q['jumlah']."</strong> unit. Segera pesan ulang!</div>";
+							}
+						}
+						if(!$found){
+							echo "<div class='alert-modern alert-success'><span>&#10003;</span> Semua stok barang dalam kondisi aman.</div>";
+						}
+						?>
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn-modern btn-secondary-modern" data-dismiss="modal">Tutup</button>
+					</div>
 				</div>
-				<?php 
-			}
-			?>		
+			</div>
 		</div>
 
-		<div class="row"></div>
-		<ul class="nav nav-pills nav-stacked">
-			<li class="active"><a href="index.php"><span class="glyphicon glyphicon-home"></span>  Dashboard</a></li>			
-			<li><a href="barang.php"><span class="glyphicon glyphicon-briefcase"></span>  Data Barang</a></li>
-			<li><a href="barang_laku.php"><span class="glyphicon glyphicon-briefcase"></span>  Entry Penjualan</a></li>        												
-			<li><a href="ganti_foto.php"><span class="glyphicon glyphicon-picture"></span>  Ganti Foto</a></li>
-			<li><a href="ganti_pass.php"><span class="glyphicon glyphicon-lock"></span> Ganti Password</a></li>
-			<li><a href="logout.php"><span class="glyphicon glyphicon-log-out"></span>  Logout</a></li>			
-		</ul>
-	</div>
-	<div class="col-md-10">
\ No newline at end of file
+		<!-- PAGE CONTENT START -->
+		<div class="page-content">
diff --git a/admin/index.php b/admin/index.php
index 67a41ce..e39e56b 100644
--- a/admin/index.php
+++ b/admin/index.php
@@ -2,21 +2,107 @@
 include 'header.php';
 ?>
 
-<?php
-$a = mysql_query("select * from barang_laku");
-?>
+<div class="page-header">
+	<h2>
+		<span class="page-icon">&#127968;</span>
+		Dashboard
+	</h2>
+	<span class="text-muted" style="font-size:13px;">Selamat datang, <strong><?php echo htmlspecialchars($_SESSION['uname']); ?></strong></span>
+</div>
 
-<div class="col-md-10">
-	<h3>Selamat datang</h3>	
-    <h3>Aplikasi Penjualan Sederhana</h3>
-    <h3>WWW.MALASNGODING.COM</h3>
+<!-- STAT CARDS -->
+<div class="stat-grid">
+	<?php
+	$total_barang = mysql_fetch_array(mysql_query("SELECT COUNT(*) as cnt FROM barang"));
+	$total_terjual = mysql_fetch_array(mysql_query("SELECT COUNT(*) as cnt FROM barang_laku"));
+	$total_modal = mysql_fetch_array(mysql_query("SELECT SUM(modal) as total FROM barang"));
+	$total_laba = mysql_fetch_array(mysql_query("SELECT SUM(laba) as total FROM barang_laku"));
+	?>
+	<div class="stat-card">
+		<div class="stat-icon blue">&#128230;</div>
+		<div class="stat-info">
+			<h4><?php echo $total_barang['cnt']; ?></h4>
+			<p>Total Jenis Barang</p>
+		</div>
+	</div>
+	<div class="stat-card">
+		<div class="stat-icon green">&#128179;</div>
+		<div class="stat-info">
+			<h4><?php echo $total_terjual['cnt']; ?></h4>
+			<p>Total Transaksi</p>
+		</div>
+	</div>
+	<div class="stat-card">
+		<div class="stat-icon orange">&#128181;</div>
+		<div class="stat-info">
+			<h4 style="font-size:16px;">Rp <?php echo number_format($total_modal['total']); ?></h4>
+			<p>Total Modal</p>
+		</div>
+	</div>
+	<div class="stat-card">
+		<div class="stat-icon purple">&#128200;</div>
+		<div class="stat-info">
+			<h4 style="font-size:16px;">Rp <?php echo number_format($total_laba['total']); ?></h4>
+			<p>Total Laba</p>
+		</div>
+	</div>
 </div>
-<!-- kalender -->
-<div class="pull-right">
-	<div id="kalender"></div>
+
+<!-- RECENT TRANSACTIONS & CALENDAR -->
+<div style="display:grid; grid-template-columns: 1fr 300px; gap:16px; flex-wrap:wrap;">
+	<div class="card">
+		<div class="card-header">
+			<h3>&#128203; Transaksi Terbaru</h3>
+			<a href="barang_laku.php" class="btn-modern btn-primary-modern" style="font-size:12px; padding:6px 12px;">Lihat Semua</a>
+		</div>
+		<div class="card-body" style="padding:0;">
+			<table class="table-modern" style="width:100%;">
+				<thead>
+					<tr>
+						<th>Tanggal</th>
+						<th>Nama Barang</th>
+						<th>Jumlah</th>
+						<th>Total Harga</th>
+						<th>Laba</th>
+					</tr>
+				</thead>
+				<tbody>
+					<?php
+					$recent = mysql_query("SELECT * FROM barang_laku ORDER BY tanggal DESC LIMIT 8");
+					while($r = mysql_fetch_array($recent)){
+						echo "<tr>";
+						echo "<td><span class='badge-modern badge-info'>".$r['tanggal']."</span></td>";
+						echo "<td>".$r['nama']."</td>";
+						echo "<td>".$r['jumlah']."</td>";
+						echo "<td class='fw-600'>Rp ".number_format($r['total_harga']).",-</td>";
+						echo "<td class='text-success-color fw-600'>Rp ".number_format($r['laba']).",-</td>";
+						echo "</tr>";
+					}
+					?>
+				</tbody>
+			</table>
+		</div>
+	</div>
+
+	<div class="card">
+		<div class="card-header">
+			<h3>&#128197; Kalender</h3>
+		</div>
+		<div class="card-body" style="padding:12px;">
+			<div id="kalender"></div>
+		</div>
+	</div>
 </div>
 
+<script>
+$(document).ready(function(){
+	$("#kalender").datepicker({
+		inline: true,
+		showOtherMonths: true
+	});
+});
+</script>
+
 <?php 
 include 'footer.php';
-
-?>
\ No newline at end of file
+?>
diff --git a/admin/lap_laba_rugi.php b/admin/lap_laba_rugi.php
new file mode 100644
index 0000000..04fc120
--- /dev/null
+++ b/admin/lap_laba_rugi.php
@@ -0,0 +1,103 @@
+<?php
+
+include 'config.php';
+require('../assets/pdf/fpdf.php');
+
+// load kop surat settings
+$settings_file = __DIR__ . '/report_settings.json';
+$settings = file_exists($settings_file) ? json_decode(file_get_contents($settings_file), true) : array();
+$defaults = array('company_name'=>'KIOS MALASNGODING','phone'=>'0038XXXXXXX','address'=>'JL. KIOS MALASNGODING','website'=>'www.malasngoding.com','email'=>'malasngoding@gmail.com','logo'=>'malasngoding.png');
+$settings = array_merge($defaults, $settings);
+
+$pdf = new FPDF("L","cm","A4");
+
+$pdf->SetMargins(2,1,1);
+$pdf->AliasNbPages();
+$pdf->AddPage();
+$pdf->SetFont('Times','B',11);
+$logo_path = file_exists(__DIR__ . '/../logo/' . $settings['logo']) ? '../logo/' . $settings['logo'] : '../logo/malasngoding.png';
+$pdf->Image($logo_path,1,1,2,2);
+$pdf->SetX(4);            
+$pdf->MultiCell(19.5,0.5,$settings['company_name'],0,'L');
+$pdf->SetX(4);
+$pdf->MultiCell(19.5,0.5,'Telpon : ' . $settings['phone'],0,'L');    
+$pdf->SetFont('Arial','B',10);
+$pdf->SetX(4);
+$pdf->MultiCell(19.5,0.5,$settings['address'],0,'L');
+$pdf->SetX(4);
+$pdf->MultiCell(19.5,0.5,'website : ' . $settings['website'] . ' email : ' . $settings['email'],0,'L');
+$pdf->Line(1,3.1,28.5,3.1);
+$pdf->SetLineWidth(0.1);      
+$pdf->Line(1,3.2,28.5,3.2);   
+$pdf->SetLineWidth(0);
+$pdf->ln(1);
+$pdf->SetFont('Arial','B',14);
+$pdf->Cell(0,0.7,'Laporan Laba Rugi',0,0,'C');
+$pdf->ln(1);
+$pdf->SetFont('Arial','B',10);
+$pdf->Cell(5,0.7,"Di cetak pada : ".date("D-d/m/Y"),0,0,'C');
+$pdf->ln(1);
+$dari = $_GET['dari'];
+$sampai = $_GET['sampai'];
+$pdf->Cell(6,0.7,"Periode : ".$dari ." s/d ".$sampai,0,0,'C');
+$pdf->ln(1);
+
+// Table header
+$pdf->SetFont('Arial','B',9);
+$pdf->Cell(1, 0.8, 'NO', 1, 0, 'C');
+$pdf->Cell(3, 0.8, 'Tanggal', 1, 0, 'C');
+$pdf->Cell(6, 0.8, 'Nama Barang', 1, 0, 'C');
+$pdf->Cell(2, 0.8, 'Jumlah', 1, 0, 'C');
+$pdf->Cell(3, 0.8, 'Harga Jual', 1, 0, 'C');
+$pdf->Cell(3, 0.8, 'Modal/Satuan', 1, 0, 'C');
+$pdf->Cell(3.5, 0.8, 'Modal Total', 1, 0, 'C');
+$pdf->Cell(3.5, 0.8, 'Total Jual', 1, 0, 'C');
+$pdf->Cell(3, 0.8, 'Laba', 1, 1, 'C');
+
+$pdf->SetFont('Arial','',9);
+
+$no=1;
+
+// Join barang_laku with barang to fetch modal
+$query = mysql_query("SELECT bl.tanggal, bl.nama, bl.jumlah, bl.harga, bl.total_harga, bl.laba, b.modal 
+    FROM barang_laku bl LEFT JOIN barang b ON bl.nama = b.nama 
+    WHERE bl.tanggal >= '$dari' AND bl.tanggal <= '$sampai' ORDER BY bl.tanggal ASC");
+
+$total_pendapatan = 0;
+$total_modal = 0;
+$total_laba = 0;
+
+while($row = mysql_fetch_array($query)){
+    $modal_satuan = isset($row['modal']) ? $row['modal'] : 0;
+    $modal_total = $modal_satuan * $row['jumlah'];
+    $pdf->Cell(1, 0.8, $no , 1, 0, 'C');
+    $pdf->Cell(3, 0.8, $row['tanggal'],1, 0, 'C');
+    $pdf->Cell(6, 0.8, $row['nama'],1, 0, 'C');
+    $pdf->Cell(2, 0.8, $row['jumlah'], 1, 0,'C');
+    $pdf->Cell(3, 0.8, "Rp. ".number_format($row['harga'])." ,-", 1, 0,'C');
+    $pdf->Cell(3, 0.8, "Rp. ".number_format($modal_satuan)." ,-", 1, 0,'C');
+    $pdf->Cell(3.5, 0.8, "Rp. ".number_format($modal_total)." ,-",1, 0, 'C');
+    $pdf->Cell(3.5, 0.8, "Rp. ".number_format($row['total_harga'])." ,-",1, 0, 'C');
+    $pdf->Cell(3, 0.8, "Rp. ".number_format($row['laba'])." ,-", 1, 1,'C');
+
+    $total_pendapatan += $row['total_harga'];
+    $total_modal += $modal_total;
+    $total_laba += $row['laba'];
+
+    $no++;
+}
+
+// Totals
+$pdf->SetFont('Arial','B',9);
+$pdf->Cell(18.5, 0.8, "Total Pendapatan", 1, 0,'C');
+$pdf->Cell(3.5, 0.8, "Rp. ".number_format($total_pendapatan)." ,-", 1, 1,'C');
+
+$pdf->Cell(18.5, 0.8, "Total Modal", 1, 0,'C');
+$pdf->Cell(3.5, 0.8, "Rp. ".number_format($total_modal)." ,-", 1, 1,'C');
+
+$pdf->Cell(18.5, 0.8, "Total Laba (Pendapatan - Modal)", 1, 0,'C');
+$pdf->Cell(3.5, 0.8, "Rp. ".number_format($total_pendapatan - $total_modal)." ,-", 1, 1,'C');
+
+$pdf->Output("laporan_labarugi.pdf","I");
+
+?>
\ No newline at end of file
diff --git a/admin/lap_laba_rugi_form.php b/admin/lap_laba_rugi_form.php
new file mode 100644
index 0000000..3e79bb0
--- /dev/null
+++ b/admin/lap_laba_rugi_form.php
@@ -0,0 +1,41 @@
+<?php
+include 'header.php';
+?>
+
+<div class="page-header">
+	<h2>
+		<span class="page-icon">&#128202;</span>
+		Laporan Laba Rugi
+	</h2>
+</div>
+
+<div class="card" style="max-width:500px;">
+	<div class="card-header">
+		<h3>&#128202; Pilih Periode Laporan</h3>
+	</div>
+	<div class="card-body">
+		<form action="lap_laba_rugi.php" method="get" target="_blank" class="form-modern">
+			<div class="form-group">
+				<label>Dari Tanggal</label>
+				<input type="text" id="dari" name="dari" autocomplete="off" value="<?php echo date('Y/m/d', strtotime('-30 days')); ?>">
+			</div>
+			<div class="form-group">
+				<label>Sampai Tanggal</label>
+				<input type="text" id="sampai" name="sampai" autocomplete="off" value="<?php echo date('Y/m/d'); ?>">
+			</div>
+			<div style="margin-top:8px;">
+				<input type="submit" class="btn-modern btn-primary-modern" value="&#128438; Cetak Laporan">
+			</div>
+		</form>
+	</div>
+</div>
+
+<script type="text/javascript">
+$(document).ready(function(){
+	$('#dari,#sampai').datepicker({dateFormat: 'yy/mm/dd'});
+});
+</script>
+
+<?php
+include 'footer.php';
+?>
diff --git a/admin/lap_penjualan_tgl.php b/admin/lap_penjualan_tgl.php
index bbf8f33..b52f6ff 100644
--- a/admin/lap_penjualan_tgl.php
+++ b/admin/lap_penjualan_tgl.php
@@ -9,16 +9,21 @@
 $pdf->AliasNbPages();
 $pdf->AddPage();
 $pdf->SetFont('Times','B',11);
-$pdf->Image('../logo/malasngoding.png',1,1,2,2);
+$settings_file = __DIR__ . '/report_settings.json';
+$settings = file_exists($settings_file) ? json_decode(file_get_contents($settings_file), true) : array();
+$defaults = array('company_name'=>'KIOS MALASNGODING','phone'=>'0038XXXXXXX','address'=>'JL. KIOS MALASNGODING','website'=>'www.malasngoding.com','email'=>'malasngoding@gmail.com','logo'=>'malasngoding.png');
+$settings = array_merge($defaults, $settings);
+$logo_path = file_exists(__DIR__ . '/../logo/' . $settings['logo']) ? '../logo/' . $settings['logo'] : '../logo/malasngoding.png';
+$pdf->Image($logo_path,1,1,2,2);
 $pdf->SetX(4);            
-$pdf->MultiCell(19.5,0.5,'KIOS MALASNGODING',0,'L');
+$pdf->MultiCell(19.5,0.5,$settings['company_name'],0,'L');
 $pdf->SetX(4);
-$pdf->MultiCell(19.5,0.5,'Telpon : 0038XXXXXXX',0,'L');    
+$pdf->MultiCell(19.5,0.5,'Telpon : ' . $settings['phone'],0,'L');    
 $pdf->SetFont('Arial','B',10);
 $pdf->SetX(4);
-$pdf->MultiCell(19.5,0.5,'JL. KIOS MALASNGODING',0,'L');
+$pdf->MultiCell(19.5,0.5,$settings['address'],0,'L');
 $pdf->SetX(4);
-$pdf->MultiCell(19.5,0.5,'website : www.malasngoding.com email : malasngoding@gmail.com',0,'L');
+$pdf->MultiCell(19.5,0.5,'website : ' . $settings['website'] . ' email : ' . $settings['email'],0,'L');
 $pdf->Line(1,3.1,28.5,3.1);
 $pdf->SetLineWidth(0.1);      
 $pdf->Line(1,3.2,28.5,3.2);   
diff --git a/admin/report_settings.json b/admin/report_settings.json
new file mode 100644
index 0000000..c8afed5
--- /dev/null
+++ b/admin/report_settings.json
@@ -0,0 +1,8 @@
+{
+    "company_name": "PT PENJUALAN LARIS",
+    "phone": "000019920",
+    "address": "JL YANG LURUS",
+    "website": "penjualan.com",
+    "email": "penjualan@gmail.com",
+    "logo": "malasngoding.png"
+}
\ No newline at end of file
diff --git a/admin/report_settings.php b/admin/report_settings.php
new file mode 100644
index 0000000..0f846fa
--- /dev/null
+++ b/admin/report_settings.php
@@ -0,0 +1,101 @@
+<?php
+include 'header.php';
+
+$settings_file = __DIR__ . '/report_settings.json';
+$settings = file_exists($settings_file) ? json_decode(file_get_contents($settings_file), true) : array();
+
+if ($_SERVER['REQUEST_METHOD'] === 'POST') {
+    $company_name = $_POST['company_name'] ?? '';
+    $phone = $_POST['phone'] ?? '';
+    $address = $_POST['address'] ?? '';
+    $website = $_POST['website'] ?? '';
+    $email = $_POST['email'] ?? '';
+
+    // handle logo upload
+    if (!empty($_FILES['logo']['name'])) {
+        $uploadDir = __DIR__ . '/../logo/';
+        if (!is_dir($uploadDir)) mkdir($uploadDir, 0755, true);
+        $fname = basename($_FILES['logo']['name']);
+        $target = $uploadDir . $fname;
+        if (move_uploaded_file($_FILES['logo']['tmp_name'], $target)) {
+            $settings['logo'] = $fname;
+        }
+    }
+
+    $settings['company_name'] = $company_name;
+    $settings['phone'] = $phone;
+    $settings['address'] = $address;
+    $settings['website'] = $website;
+    $settings['email'] = $email;
+
+    file_put_contents($settings_file, json_encode($settings, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));
+    $saved = true;
+}
+
+// ensure defaults exist
+$defaults = array(
+    'company_name' => 'KIOS MALASNGODING',
+    'phone' => '0038XXXXXXX',
+    'address' => 'JL. KIOS MALASNGODING',
+    'website' => 'www.malasngoding.com',
+    'email' => 'malasngoding@gmail.com',
+    'logo' => 'malasngoding.png'
+);
+$settings = array_merge($defaults, $settings);
+?>
+
+<div class="page-header">
+	<h2>
+		<span class="page-icon">&#9881;</span>
+		Pengaturan Kop Surat
+	</h2>
+</div>
+
+<?php if(isset($saved)): ?>
+<div class="alert-modern alert-success mb-16"><span>&#10003;</span> Pengaturan berhasil disimpan!</div>
+<?php endif; ?>
+
+<div class="card" style="max-width:600px;">
+	<div class="card-header">
+		<h3>&#9881; Informasi Perusahaan</h3>
+	</div>
+	<div class="card-body">
+		<form method="post" enctype="multipart/form-data" class="form-modern">
+			<div class="form-group">
+				<label>Nama Perusahaan</label>
+				<input name="company_name" value="<?php echo htmlspecialchars($settings['company_name']); ?>">
+			</div>
+			<div class="form-group">
+				<label>Telepon</label>
+				<input name="phone" value="<?php echo htmlspecialchars($settings['phone']); ?>">
+			</div>
+			<div class="form-group">
+				<label>Alamat</label>
+				<input name="address" value="<?php echo htmlspecialchars($settings['address']); ?>">
+			</div>
+			<div class="form-group">
+				<label>Website</label>
+				<input name="website" value="<?php echo htmlspecialchars($settings['website']); ?>">
+			</div>
+			<div class="form-group">
+				<label>Email</label>
+				<input name="email" value="<?php echo htmlspecialchars($settings['email']); ?>">
+			</div>
+			<div class="form-group">
+				<label>Logo Saat Ini</label>
+				<div style="margin-top:8px; padding:12px; background:#f8fafc; border-radius:8px; border:1px solid #e2e8f0;">
+					<img src="../logo/<?php echo htmlspecialchars($settings['logo']); ?>" style="max-height:80px; max-width:200px;" onerror="this.style.display='none'">
+				</div>
+			</div>
+			<div class="form-group">
+				<label>Upload Logo Baru <span class="text-muted" style="font-weight:400;">(opsional)</span></label>
+				<input type="file" name="logo" accept="image/*" style="padding:8px; border:1.5px solid #e2e8f0; border-radius:8px; width:100%; font-family:inherit; font-size:13px;">
+			</div>
+			<div style="margin-top:8px;">
+				<button type="submit" class="btn-modern btn-primary-modern">&#10003; Simpan Pengaturan</button>
+			</div>
+		</form>
+	</div>
+</div>
+
+<?php include 'footer.php'; ?>
diff --git a/admin/tmb_brg_act.php b/admin/tmb_brg_act.php
index 4d56e68..0e6bedb 100644
--- a/admin/tmb_brg_act.php
+++ b/admin/tmb_brg_act.php
@@ -8,7 +8,7 @@
 $jumlah=$_POST['jumlah'];
 $sisa=$_POST['jumlah'];
 
-mysql_query("insert into barang values('','$nama','$jenis','$suplier','$modal','$harga','$jumlah','$sisa')");
+mysql_query("insert into barang values(NULL,'$nama','$jenis','$suplier','$modal','$harga','$jumlah','$sisa')");
 header("location:barang.php");
 
  ?>
\ No newline at end of file
diff --git a/admin/update_laku.php b/admin/update_laku.php
new file mode 100644
index 0000000..4c57ecc
--- /dev/null
+++ b/admin/update_laku.php
@@ -0,0 +1,36 @@
+<?php 
+include 'config.php';
+
+$id = mysql_real_escape_string($_POST['id']);
+$tgl = mysql_real_escape_string($_POST['tgl']);
+$nama = mysql_real_escape_string($_POST['nama']);
+$harga = mysql_real_escape_string($_POST['harga']);
+$jumlah = mysql_real_escape_string($_POST['jumlah']);
+
+// get existing sale record
+$old = mysql_query("select * from barang_laku where id='$id'") or die(mysql_error());
+$r = mysql_fetch_array($old);
+$old_nama = $r['nama'];
+$old_jumlah = $r['jumlah'];
+
+// return old quantity to stock
+$a = mysql_query("select jumlah from barang where nama='$old_nama'");
+$b = mysql_fetch_array($a);
+$kembalikan = $b['jumlah'] + $old_jumlah;
+mysql_query("update barang set jumlah='$kembalikan' where nama='$old_nama'");
+
+// deduct new quantity from selected product
+$dt = mysql_query("select * from barang where nama='$nama'");
+$data = mysql_fetch_array($dt);
+$sisa = $data['jumlah'] - $jumlah;
+mysql_query("update barang set jumlah='$sisa' where nama='$nama'");
+
+$modal = $data['modal'];
+$laba = $harga - $modal;
+$labaa = $laba * $jumlah;
+$total_harga = $harga * $jumlah;
+
+mysql_query("update barang_laku set tanggal='$tgl', nama='$nama', jumlah='$jumlah', harga='$harga', total_harga='$total_harga', laba='$labaa' where id='$id'") or die(mysql_error());
+header("location:barang_laku.php");
+
+?>
\ No newline at end of file
diff --git a/assets/css/modern.css b/assets/css/modern.css
new file mode 100644
index 0000000..1ee1988
--- /dev/null
+++ b/assets/css/modern.css
@@ -0,0 +1,917 @@
+/* ===== MODERN KIOS CSS ===== */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+:root {
+  --primary: #4f46e5;
+  --primary-dark: #3730a3;
+  --primary-light: #818cf8;
+  --secondary: #06b6d4;
+  --success: #10b981;
+  --warning: #f59e0b;
+  --danger: #ef4444;
+  --dark: #1e293b;
+  --sidebar-bg: #1e293b;
+  --sidebar-text: #94a3b8;
+  --sidebar-active: #4f46e5;
+  --body-bg: #f1f5f9;
+  --card-bg: #ffffff;
+  --border: #e2e8f0;
+  --text-primary: #1e293b;
+  --text-secondary: #64748b;
+  --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
+  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
+  --radius: 8px;
+  --radius-lg: 12px;
+  --transition: all 0.2s ease;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background-color: var(--body-bg);
+  color: var(--text-primary);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+/* ===== SCROLLBAR ===== */
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: #f1f5f9; }
+::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
+
+/* ===== LOGIN PAGE ===== */
+.login-wrapper {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px;
+}
+
+.login-card {
+  background: white;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  padding: 40px;
+  width: 100%;
+  max-width: 420px;
+  animation: slideUp 0.4s ease;
+}
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.login-logo {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.login-logo .logo-icon {
+  width: 64px;
+  height: 64px;
+  background: linear-gradient(135deg, var(--primary), var(--secondary));
+  border-radius: 16px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16px;
+  font-size: 28px;
+  color: white;
+}
+
+.login-logo h2 {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 4px;
+}
+
+.login-logo p {
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.login-form .form-group {
+  margin-bottom: 20px;
+}
+
+.login-form label {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 6px;
+}
+
+.login-form .input-wrapper {
+  position: relative;
+}
+
+.login-form .input-wrapper .input-icon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-secondary);
+  font-size: 16px;
+}
+
+.login-form .input-wrapper input {
+  width: 100%;
+  padding: 10px 12px 10px 40px;
+  border: 1.5px solid var(--border);
+  border-radius: var(--radius);
+  font-size: 14px;
+  font-family: inherit;
+  transition: var(--transition);
+  outline: none;
+  color: var(--text-primary);
+}
+
+.login-form .input-wrapper input:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+.btn-login {
+  width: 100%;
+  padding: 12px;
+  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
+  color: white;
+  border: none;
+  border-radius: var(--radius);
+  font-size: 15px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  transition: var(--transition);
+  margin-top: 8px;
+}
+
+.btn-login:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
+}
+
+.btn-login:active {
+  transform: translateY(0);
+}
+
+.alert-modern {
+  padding: 12px 16px;
+  border-radius: var(--radius);
+  margin-bottom: 20px;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.alert-modern.alert-danger {
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  color: #dc2626;
+}
+
+.alert-modern.alert-warning {
+  background: #fffbeb;
+  border: 1px solid #fde68a;
+  color: #d97706;
+}
+
+.alert-modern.alert-success {
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  color: #16a34a;
+}
+
+/* ===== ADMIN LAYOUT ===== */
+.admin-wrapper {
+  display: flex;
+  min-height: 100vh;
+}
+
+/* ===== SIDEBAR ===== */
+.sidebar {
+  width: 260px;
+  min-height: 100vh;
+  background: var(--sidebar-bg);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  transition: var(--transition);
+  overflow-y: auto;
+}
+
+.sidebar-brand {
+  padding: 20px 24px;
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.sidebar-brand .brand-icon {
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(135deg, var(--primary), var(--secondary));
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: white;
+  flex-shrink: 0;
+}
+
+.sidebar-brand .brand-text h3 {
+  font-size: 15px;
+  font-weight: 700;
+  color: white;
+  line-height: 1.2;
+}
+
+.sidebar-brand .brand-text span {
+  font-size: 11px;
+  color: var(--sidebar-text);
+}
+
+.sidebar-user {
+  padding: 20px 24px;
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.sidebar-user .user-avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid rgba(255,255,255,0.2);
+  flex-shrink: 0;
+}
+
+.sidebar-user .user-avatar-placeholder {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--primary), var(--secondary));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 18px;
+  flex-shrink: 0;
+}
+
+.sidebar-user .user-info h4 {
+  font-size: 13px;
+  font-weight: 600;
+  color: white;
+  line-height: 1.2;
+}
+
+.sidebar-user .user-info span {
+  font-size: 11px;
+  color: var(--sidebar-text);
+}
+
+.sidebar-nav {
+  padding: 16px 0;
+  flex: 1;
+}
+
+.sidebar-nav .nav-section-title {
+  padding: 8px 24px 4px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #475569;
+}
+
+.sidebar-nav a {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 24px;
+  color: var(--sidebar-text);
+  text-decoration: none;
+  font-size: 13.5px;
+  font-weight: 500;
+  transition: var(--transition);
+  border-left: 3px solid transparent;
+  position: relative;
+}
+
+.sidebar-nav a:hover {
+  color: white;
+  background: rgba(255,255,255,0.06);
+  border-left-color: var(--primary-light);
+}
+
+.sidebar-nav a.active {
+  color: white;
+  background: rgba(79, 70, 229, 0.2);
+  border-left-color: var(--primary);
+}
+
+.sidebar-nav a .nav-icon {
+  width: 20px;
+  text-align: center;
+  font-size: 15px;
+  flex-shrink: 0;
+}
+
+.sidebar-nav a .nav-badge {
+  margin-left: auto;
+  background: var(--danger);
+  color: white;
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: 10px;
+}
+
+/* ===== MAIN CONTENT ===== */
+.main-content {
+  margin-left: 260px;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+/* ===== TOP NAVBAR ===== */
+.topbar {
+  background: white;
+  border-bottom: 1px solid var(--border);
+  padding: 0 24px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: var(--shadow);
+}
+
+.topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.topbar-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.topbar-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.topbar-btn {
+  width: 38px;
+  height: 38px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: var(--transition);
+  text-decoration: none;
+  position: relative;
+}
+
+.topbar-btn:hover {
+  background: var(--body-bg);
+  color: var(--primary);
+}
+
+.topbar-btn .badge-dot {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 8px;
+  height: 8px;
+  background: var(--danger);
+  border-radius: 50%;
+  border: 2px solid white;
+}
+
+.topbar-user {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: var(--transition);
+  text-decoration: none;
+  color: var(--text-primary);
+}
+
+.topbar-user:hover {
+  background: var(--body-bg);
+}
+
+.topbar-user .user-name {
+  font-size: 13px;
+  font-weight: 500;
+}
+
+/* ===== PAGE CONTENT ===== */
+.page-content {
+  padding: 24px;
+  flex: 1;
+}
+
+.page-header {
+  margin-bottom: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+.page-header h2 {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.page-header h2 .page-icon {
+  width: 36px;
+  height: 36px;
+  background: linear-gradient(135deg, var(--primary), var(--secondary));
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 16px;
+}
+
+/* ===== CARDS ===== */
+.card {
+  background: var(--card-bg);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  border: 1px solid var(--border);
+  overflow: hidden;
+}
+
+.card-header {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.card-header h3 {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.card-body {
+  padding: 20px;
+}
+
+/* ===== STAT CARDS ===== */
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+.stat-card {
+  background: white;
+  border-radius: var(--radius-lg);
+  padding: 20px;
+  box-shadow: var(--shadow);
+  border: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  transition: var(--transition);
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+}
+
+.stat-card .stat-icon {
+  width: 52px;
+  height: 52px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  flex-shrink: 0;
+}
+
+.stat-card .stat-icon.blue { background: #eff6ff; color: #3b82f6; }
+.stat-card .stat-icon.green { background: #f0fdf4; color: #22c55e; }
+.stat-card .stat-icon.orange { background: #fff7ed; color: #f97316; }
+.stat-card .stat-icon.purple { background: #faf5ff; color: #a855f7; }
+
+.stat-card .stat-info h4 {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1.2;
+}
+
+.stat-card .stat-info p {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-top: 2px;
+}
+
+/* ===== BUTTONS ===== */
+.btn-modern {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border-radius: var(--radius);
+  font-size: 13px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: var(--transition);
+  border: none;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.btn-modern:hover { transform: translateY(-1px); }
+.btn-modern:active { transform: translateY(0); }
+
+.btn-primary-modern {
+  background: var(--primary);
+  color: white;
+}
+.btn-primary-modern:hover { background: var(--primary-dark); box-shadow: 0 4px 12px rgba(79,70,229,0.3); color: white; }
+
+.btn-success-modern {
+  background: var(--success);
+  color: white;
+}
+.btn-success-modern:hover { background: #059669; box-shadow: 0 4px 12px rgba(16,185,129,0.3); color: white; }
+
+.btn-warning-modern {
+  background: var(--warning);
+  color: white;
+}
+.btn-warning-modern:hover { background: #d97706; box-shadow: 0 4px 12px rgba(245,158,11,0.3); color: white; }
+
+.btn-danger-modern {
+  background: var(--danger);
+  color: white;
+}
+.btn-danger-modern:hover { background: #dc2626; box-shadow: 0 4px 12px rgba(239,68,68,0.3); color: white; }
+
+.btn-secondary-modern {
+  background: white;
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+}
+.btn-secondary-modern:hover { background: var(--body-bg); color: var(--text-primary); }
+
+.btn-info-modern {
+  background: var(--secondary);
+  color: white;
+}
+.btn-info-modern:hover { background: #0891b2; box-shadow: 0 4px 12px rgba(6,182,212,0.3); color: white; }
+
+/* ===== TABLES ===== */
+.table-modern {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.table-modern thead tr {
+  background: var(--body-bg);
+}
+
+.table-modern thead th {
+  padding: 12px 16px;
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary);
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+}
+
+.table-modern tbody tr {
+  border-bottom: 1px solid var(--border);
+  transition: var(--transition);
+}
+
+.table-modern tbody tr:hover {
+  background: #f8fafc;
+}
+
+.table-modern tbody tr:last-child {
+  border-bottom: none;
+}
+
+.table-modern tbody td {
+  padding: 12px 16px;
+  font-size: 13.5px;
+  color: var(--text-primary);
+  vertical-align: middle;
+}
+
+.table-modern tfoot tr {
+  background: #f8fafc;
+  font-weight: 600;
+}
+
+.table-modern tfoot td {
+  padding: 12px 16px;
+  font-size: 13.5px;
+  border-top: 2px solid var(--border);
+}
+
+/* ===== FORMS ===== */
+.form-modern .form-group {
+  margin-bottom: 16px;
+}
+
+.form-modern label {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 6px;
+}
+
+.form-modern input,
+.form-modern select,
+.form-modern textarea {
+  width: 100%;
+  padding: 9px 12px;
+  border: 1.5px solid var(--border);
+  border-radius: var(--radius);
+  font-size: 13.5px;
+  font-family: inherit;
+  color: var(--text-primary);
+  background: white;
+  transition: var(--transition);
+  outline: none;
+}
+
+.form-modern input:focus,
+.form-modern select:focus,
+.form-modern textarea:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+.form-modern .input-with-icon {
+  position: relative;
+}
+
+.form-modern .input-with-icon .icon {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-secondary);
+}
+
+.form-modern .input-with-icon input {
+  padding-left: 34px;
+}
+
+/* ===== SEARCH BAR ===== */
+.search-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: white;
+  border: 1.5px solid var(--border);
+  border-radius: var(--radius);
+  padding: 8px 12px;
+  transition: var(--transition);
+}
+
+.search-bar:focus-within {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+.search-bar input {
+  border: none;
+  outline: none;
+  font-size: 13.5px;
+  font-family: inherit;
+  color: var(--text-primary);
+  background: transparent;
+  width: 100%;
+}
+
+.search-bar .search-icon {
+  color: var(--text-secondary);
+  font-size: 14px;
+  flex-shrink: 0;
+}
+
+/* ===== PAGINATION ===== */
+.pagination-modern {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 16px;
+}
+
+.pagination-modern a,
+.pagination-modern span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border-radius: var(--radius);
+  font-size: 13px;
+  font-weight: 500;
+  text-decoration: none;
+  transition: var(--transition);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  background: white;
+}
+
+.pagination-modern a:hover {
+  background: var(--primary);
+  color: white;
+  border-color: var(--primary);
+}
+
+.pagination-modern a.active {
+  background: var(--primary);
+  color: white;
+  border-color: var(--primary);
+}
+
+/* ===== MODAL ===== */
+.modal-modern .modal-dialog {
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow-lg);
+}
+
+.modal-modern .modal-content {
+  border: none;
+  border-radius: var(--radius-lg);
+}
+
+.modal-modern .modal-header {
+  background: var(--dark);
+  color: white;
+  padding: 16px 20px;
+  border-bottom: none;
+}
+
+.modal-modern .modal-header h4 {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.modal-modern .modal-header .close {
+  color: white;
+  opacity: 0.7;
+  font-size: 20px;
+}
+
+.modal-modern .modal-header .close:hover {
+  opacity: 1;
+}
+
+.modal-modern .modal-body {
+  padding: 20px;
+}
+
+.modal-modern .modal-footer {
+  padding: 16px 20px;
+  border-top: 1px solid var(--border);
+  background: #f8fafc;
+}
+
+/* ===== BADGES ===== */
+.badge-modern {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 8px;
+  border-radius: 20px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.badge-success { background: #dcfce7; color: #16a34a; }
+.badge-warning { background: #fef9c3; color: #ca8a04; }
+.badge-danger { background: #fee2e2; color: #dc2626; }
+.badge-info { background: #e0f2fe; color: #0284c7; }
+.badge-primary { background: #ede9fe; color: #7c3aed; }
+
+/* ===== STOCK WARNING ===== */
+.stock-warning {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  background: #fffbeb;
+  border: 1px solid #fde68a;
+  border-radius: var(--radius);
+  margin-bottom: 12px;
+  font-size: 13px;
+  color: #92400e;
+}
+
+.stock-warning .warning-icon {
+  color: var(--warning);
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+/* ===== RESPONSIVE ===== */
+@media (max-width: 768px) {
+  .sidebar {
+    transform: translateX(-100%);
+  }
+  
+  .sidebar.open {
+    transform: translateX(0);
+  }
+  
+  .main-content {
+    margin-left: 0;
+  }
+  
+  .stat-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+  
+  .page-content {
+    padding: 16px;
+  }
+}
+
+/* ===== UTILITY ===== */
+.text-primary-color { color: var(--primary); }
+.text-success-color { color: var(--success); }
+.text-warning-color { color: var(--warning); }
+.text-danger-color { color: var(--danger); }
+.text-muted { color: var(--text-secondary); }
+.fw-600 { font-weight: 600; }
+.fw-700 { font-weight: 700; }
+.d-flex { display: flex; }
+.align-center { align-items: center; }
+.justify-between { justify-content: space-between; }
+.gap-8 { gap: 8px; }
+.gap-12 { gap: 12px; }
+.mb-16 { margin-bottom: 16px; }
+.mb-24 { margin-bottom: 24px; }
+.mt-16 { margin-top: 16px; }
+.w-100 { width: 100%; }
+
+/* ===== OVERRIDE BOOTSTRAP CONFLICTS ===== */
+.table { margin-bottom: 0; }
+.modal-backdrop { z-index: 1040; }
+.modal { z-index: 1050; }
diff --git a/index.php b/index.php
index 73b273e..c974aad 100644
--- a/index.php
+++ b/index.php
@@ -1,50 +1,54 @@
 <!DOCTYPE html>
-<html>
+<html lang="id">
 <head>
-	<title>KIOS MALASNGODING</title>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>KIOS MALASNGODING - Login</title>
 	<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
-	<link rel="stylesheet" type="text/css" href="assets/js/jquery-ui/jquery-ui.css">
+	<link rel="stylesheet" type="text/css" href="assets/css/modern.css">
 	<script type="text/javascript" src="assets/js/jquery.js"></script>
 	<script type="text/javascript" src="assets/js/bootstrap.js"></script>
-	<script type="text/javascript" src="assets/js/jquery-ui/jquery-ui.js"></script>
 	<?php include 'admin/config.php'; ?>
-	<style type="text/css">
-	.kotak{	
-		margin-top: 150px;
-	}
-
-	.kotak .input-group{
-		margin-bottom: 20px;
-	}
-	</style>
 </head>
-<body>	
-	<div class="container">
+<body>
+<div class="login-wrapper">
+	<div class="login-card">
+		<div class="login-logo">
+			<div class="logo-icon">&#128722;</div>
+			<h2>KIOS MALASNGODING</h2>
+			<p>Sistem Manajemen Penjualan</p>
+		</div>
+
 		<?php 
 		if(isset($_GET['pesan'])){
 			if($_GET['pesan'] == "gagal"){
-				echo "<div style='margin-bottom:-55px' class='alert alert-danger' role='alert'><span class='glyphicon glyphicon-warning-sign'></span>  Login Gagal !! Username dan Password Salah !!</div>";
+				echo "<div class='alert-modern alert-danger'><span>&#9888;</span> Username atau Password salah. Silahkan coba lagi.</div>";
 			}
 		}
 		?>
-		<div class="panel panel-default">
-			<form action="login_act.php" method="post">
-				<div class="col-md-4 col-md-offset-4 kotak">
-					<h3>Silahkan Login ..</h3>
-					<div class="input-group">
-						<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
-						<input type="text" class="form-control" placeholder="Username" name="uname">
-					</div>
-					<div class="input-group">
-						<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
-						<input type="password" class="form-control" placeholder="Password" name="pass">
-					</div>
-					<div class="input-group">			
-						<input type="submit" class="btn btn-primary" value="Login">
-					</div>
+
+		<form action="login_act.php" method="post" class="login-form">
+			<div class="form-group">
+				<label>Username</label>
+				<div class="input-wrapper">
+					<span class="input-icon">&#128100;</span>
+					<input type="text" name="uname" placeholder="Masukkan username" autocomplete="off" required>
 				</div>
-			</form>
-		</div>
+			</div>
+			<div class="form-group">
+				<label>Password</label>
+				<div class="input-wrapper">
+					<span class="input-icon">&#128274;</span>
+					<input type="password" name="pass" placeholder="Masukkan password" required>
+				</div>
+			</div>
+			<button type="submit" class="btn-login">Masuk &rarr;</button>
+		</form>
+
+		<p style="text-align:center; margin-top:20px; font-size:12px; color:#94a3b8;">
+			&copy; 2024 Kios Malasngoding &mdash; <a href="http://www.malasngoding.com" style="color:#4f46e5; text-decoration:none;">malasngoding.com</a>
+		</p>
 	</div>
+</div>
 </body>
-</html>
\ No newline at end of file
+</html>