271 lines
8.3 KiB
HTML
271 lines
8.3 KiB
HTML
<!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>
|