Form Order Material
Berikut adalah desain untuk form order bahan baku yang komprehensif dan mudah digunakan.
Jika ingin lebih banyak fitur, silahkan lebih explore lagi sendiri ya.
Dan code nya sebagai berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Order Bahan Baku</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f7fa;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.form-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.form-title {
font-size: 1.5em;
color: #2c3e50;
}
.form-actions {
display: flex;
gap: 10px;
}
.btn {
padding: 8px 15px;
border-radius: 4px;
border: none;
cursor: pointer;
font-weight: 500;
}
.btn-primary {
background-color: #2980b9;
color: white;
}
.btn-secondary {
background-color: #95a5a6;
color: white;
}
.btn-danger {
background-color: #e74c3c;
color: white;
}
.card {
background-color: white;
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
padding: 20px;
margin-bottom: 20px;
}
.form-section {
margin-bottom: 15px;
}
.form-section-title {
font-weight: bold;
margin-bottom: 15px;
color: #2c3e50;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
}
.form-row {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}
.form-group {
flex: 1 1 300px;
margin: 0 10px 15px 10px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 500;
color: #555;
}
input, select, textarea {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
textarea {
min-height: 100px;
resize: vertical;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ecf0f1;
}
th {
color: #7f8c8d;
font-weight: 500;
}
.item-action {
display: flex;
gap: 5px;
}
.item-total {
text-align: right;
padding: 10px 0;
font-weight: bold;
}
.add-item-row {
margin-top: 10px;
}
.approval-section {
margin-top: 30px;
}
.approval-item {
margin-bottom: 15px;
}
.file-upload {
margin-top: 15px;
}
.file-upload-btn {
background-color: #f1f1f1;
border: 1px dashed #ccc;
padding: 15px;
text-align: center;
cursor: pointer;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<div class="form-header">
<div class="form-title">Buat Order Bahan Baku Baru</div>
<div class="form-actions">
<button class="btn btn-secondary">Simpan Draft</button>
<button class="btn btn-primary">Kirim Order</button>
</div>
</div>
<div class="card">
<div class="form-section">
<div class="form-section-title">Informasi Dasar</div>
<div class="form-row">
<div class="form-group">
<label for="po-number">Nomor PO</label>
<input type="text" id="po-number" value="PO-2023-0128" readonly>
</div>
<div class="form-group">
<label for="order-date">Tanggal Order</label>
<input type="date" id="order-date" value="2023-02-15">
</div>
<div class="form-group">
<label for="delivery-date">Tanggal Pengiriman Harapan</label>
<input type="date" id="delivery-date">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="supplier">Supplier</label>
<select id="supplier">
<option value="">-- Pilih Supplier --</option>
<option value="1">Supplier A</option>
<option value="2">Supplier B</option>
<option value="3">Supplier C</option>
<option value="4">Supplier D</option>
<option value="5">Supplier E</option>
</select>
</div>
<div class="form-group">
<label for="department">Departemen</label>
<select id="department">
<option value="production">Produksi</option>
<option value="warehouse">Gudang</option>
<option value="rnd">R&D</option>
</select>
</div>
<div class="form-group">
<label for="priority">Prioritas</label>
<select id="priority">
<option value="normal">Normal</option>
<option value="high">Tinggi</option>
<option value="urgent">Urgent</option>
</select>
</div>
</div>
</div>
</div>
<div class="card">
<div class="form-section">
<div class="form-section-title">Daftar Item</div>
<table>
<thead>
<tr>
<th style="width: 40%">Nama Item</th>
<th style="width: 15%">Satuan</th>
<th style="width: 10%">Jumlah</th>
<th style="width: 15%">Harga Satuan</th>
<th style="width: 15%">Total</th>
<th style="width: 5%"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select style="width: 100%">
<option value="">-- Pilih Item --</option>
<option value="item1">Bahan A - Grade 1</option>
<option value="item2">Bahan A - Grade 2</option>
<option value="item3">Bahan B - Standard</option>
<option value="item4">Bahan C - Premium</option>
<option value="item5">Bahan D - Industrial</option>
</select>
</td>
<td>KG</td>
<td><input type="number" value="100"></td>
<td><input type="number" value="25000"></td>
<td>Rp 2,500,000</td>
<td>
<div class="item-action">
<button class="btn btn-danger" style="padding: 3px 8px;">×</button>
</div>
</td>
</tr>
<tr>
<td>
<select style="width: 100%">
<option value="">-- Pilih Item --</option>
<option value="item1">Bahan A - Grade 1</option>
<option value="item2" selected>Bahan A - Grade 2</option>
<option value="item3">Bahan B - Standard</option>
<option value="item4">Bahan C - Premium</option>
<option value="item5">Bahan D - Industrial</option>
</select>
</td>
<td>KG</td>
<td><input type="number" value="50"></td>
<td><input type="number" value="20000"></td>
<td>Rp 1,000,000</td>
<td>
<div class="item-action">
<button class="btn btn-danger" style="padding: 3px 8px;">×</button>
</div>
</td>
</tr>
</tbody>
</table>
<div class="add-item-row">
<button class="btn btn-secondary">+ Tambah Item</button>
</div>
<div class="item-total">
<div>Subtotal: Rp 3,500,000</div>
<div>Pajak (11%): Rp 385,000</div>
<div style="font-size: 1.2em; margin-top: 5px;">Total: Rp 3,885,000</div>
</div>
</div>
</div>
<div class="card">
<div class="form-section">
<div class="form-section-title">Informasi Tambahan</div>
<div class="form-row">
<div class="form-group" style="flex: 1 1 100%;">
<label for="notes">Catatan</label>
<textarea id="notes" placeholder="Masukkan catatan atau instruksi khusus untuk supplier..."></textarea>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="shipping-method">Metode Pengiriman</label>
<select id="shipping-method">
<option value="supplier">Diantar Supplier</option>
<option value="pickup">Diambil Sendiri</option>
<option value="courier">Kurir/Ekspedisi</option>
</select>
</div>
<div class="form-group">
<label for="payment-terms">Syarat Pembayaran</label>
<select id="payment-terms">
<option value="net30">Net 30</option>
<option value="net15">Net 15</option>
<option value="cod">Cash on Delivery</option>
<option value="advance">Uang Muka 50%</option>
</select>
</div>
</div>
<div class="file-upload">
<label>Dokumen Pendukung</label>
<div class="file-upload-btn">
<input type="file" id="supporting-docs" multiple style="display: none;">
<label for="supporting-docs">Klik untuk upload dokumen pendukung</label>
</div>
</div>
</div>
</div>
<div class="card approval-section">
<div class="form-section-title">Persetujuan</div>
<div class="approval-item">
<label>
<input type="checkbox"> Saya menyatakan bahwa informasi yang diberikan benar dan akurat
</label>
</div>
<div class="form-actions" style="justify-content: flex-end;">
<button class="btn btn-secondary">Batal</button>
<button class="btn btn-secondary">Simpan Draft</button>
<button class="btn btn-primary">Kirim Order</button>
</div>
</div>
</div>
</body>
</html>
Terimakasih
Assalaamualaikum.
