tambah folder modul
This commit is contained in:
sas.fajri
270
FOLDER/Managemen Pelanggan/page/dashboar_pelanggan.html
Normal file
270
FOLDER/Managemen Pelanggan/page/dashboar_pelanggan.html
Normal file
@@ -0,0 +1,270 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dashboard Pelanggan - Lab Lingkungan</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.customer-info {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.stats-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #2196F3;
|
||||
}
|
||||
|
||||
.recent-requests {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 5px 10px;
|
||||
border-radius: 15px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-new { background: #e3f2fd; color: #1565c0; }
|
||||
.status-process { background: #fff3e0; color: #ef6c00; }
|
||||
.status-completed { background: #e8f5e9; color: #2e7d32; }
|
||||
.status-cancelled { background: #ffebee; color: #c62828; }
|
||||
|
||||
.btn {
|
||||
padding: 8px 15px;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary { background-color: #2196F3; }
|
||||
.btn-success { background-color: #4CAF50; }
|
||||
|
||||
.notification-panel {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.notification-item {
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.notification-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="dashboard-header">
|
||||
<h1>Dashboard Pelanggan</h1>
|
||||
<div class="customer-info">
|
||||
<div class="info-card">
|
||||
<h3>Informasi Perusahaan</h3>
|
||||
<p>PT Lingkungan Hijau</p>
|
||||
<p>CUST001</p>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<h3>Kontak PIC</h3>
|
||||
<p>Budi Santoso</p>
|
||||
<p>081234567890</p>
|
||||
</div>
|
||||
<div class="info-card">
|
||||
<h3>Status Akun</h3>
|
||||
<p>Aktif</p>
|
||||
<p>Sejak: 15 Mar 2024</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-container">
|
||||
<div class="stat-card">
|
||||
<h3>Total Permintaan</h3>
|
||||
<div class="stat-number">15</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Dalam Proses</h3>
|
||||
<div class="stat-number">3</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Selesai</h3>
|
||||
<div class="stat-number">11</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Total Pembayaran</h3>
|
||||
<div class="stat-number">Rp 25.5M</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="recent-requests">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<h2>Permintaan Analisis Terbaru</h2>
|
||||
<a href="#" class="btn btn-primary">Buat Permintaan Baru</a>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Kode</th>
|
||||
<th>Tanggal</th>
|
||||
<th>Jenis Analisis</th>
|
||||
<th>Status</th>
|
||||
<th>Total Biaya</th>
|
||||
<th>Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>REQ001</td>
|
||||
<td>15 Mar 2024</td>
|
||||
<td>Analisis Air Limbah</td>
|
||||
<td><span class="status status-completed">Selesai</span></td>
|
||||
<td>Rp 2.500.000</td>
|
||||
<td><a href="#" class="btn btn-primary">Lihat Detail</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>REQ002</td>
|
||||
<td>16 Mar 2024</td>
|
||||
<td>Analisis Kualitas Udara</td>
|
||||
<td><span class="status status-process">Proses</span></td>
|
||||
<td>Rp 1.750.000</td>
|
||||
<td><a href="#" class="btn btn-primary">Lihat Detail</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>REQ003</td>
|
||||
<td>17 Mar 2024</td>
|
||||
<td>Analisis Tanah</td>
|
||||
<td><span class="status status-new">Baru</span></td>
|
||||
<td>Rp 3.000.000</td>
|
||||
<td><a href="#" class="btn btn-primary">Lihat Detail</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 2fr 1fr; gap: 20px;">
|
||||
<div class="recent-requests">
|
||||
<h2>Riwayat Pembayaran</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Kode</th>
|
||||
<th>Tanggal</th>
|
||||
<th>Jumlah</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>PAY001</td>
|
||||
<td>15 Mar 2024</td>
|
||||
<td>Rp 2.500.000</td>
|
||||
<td><span class="status status-completed">Lunas</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PAY002</td>
|
||||
<td>16 Mar 2024</td>
|
||||
<td>Rp 875.000</td>
|
||||
<td><span class="status status-process">DP 50%</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="notification-panel">
|
||||
<h2>Notifikasi</h2>
|
||||
<div class="notification-item">
|
||||
<p><strong>Jadwal Sampling</strong></p>
|
||||
<p>20 Mar 2024 - 09:00</p>
|
||||
<p>Lokasi: Plant A</p>
|
||||
</div>
|
||||
<div class="notification-item">
|
||||
<p><strong>Hasil Analisis Selesai</strong></p>
|
||||
<p>REQ001 telah selesai</p>
|
||||
<p>15 Mar 2024</p>
|
||||
</div>
|
||||
<div class="notification-item">
|
||||
<p><strong>Pembayaran Diterima</strong></p>
|
||||
<p>PAY001 - Rp 2.500.000</p>
|
||||
<p>15 Mar 2024</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
140
FOLDER/Managemen Pelanggan/page/form_pendaftaran_pelanggan.html
Normal file
140
FOLDER/Managemen Pelanggan/page/form_pendaftaran_pelanggan.html
Normal file
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pendaftaran Pelanggan - Lab Lingkungan</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
background-color: #f4f4f4;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="tel"],
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
.form-header {
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="form-header">
|
||||
<h1>Pendaftaran Pelanggan Baru</h1>
|
||||
<p>Silakan lengkapi form di bawah ini</p>
|
||||
</div>
|
||||
|
||||
<form id="customerForm">
|
||||
<div class="form-group">
|
||||
<label for="companyName">Nama Perusahaan</label>
|
||||
<input type="text" id="companyName" name="companyName" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="customerType">Jenis Pelanggan</label>
|
||||
<select id="customerType" name="customerType" required>
|
||||
<option value="">Pilih Jenis Pelanggan</option>
|
||||
<option value="internal">Internal</option>
|
||||
<option value="external">External</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="address">Alamat</label>
|
||||
<textarea id="address" name="address" rows="3" required></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="city">Kota</label>
|
||||
<input type="text" id="city" name="city" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="postalCode">Kode Pos</label>
|
||||
<input type="text" id="postalCode" name="postalCode" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="phone">Telepon Perusahaan</label>
|
||||
<input type="tel" id="phone" name="phone" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Email Perusahaan</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
</div>
|
||||
|
||||
<h3>Informasi PIC</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="picName">Nama PIC</label>
|
||||
<input type="text" id="picName" name="picName" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="picPhone">Telepon PIC</label>
|
||||
<input type="tel" id="picPhone" name="picPhone" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="picEmail">Email PIC</label>
|
||||
<input type="email" id="picEmail" name="picEmail" required>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn">Daftar</button>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user