373 lines
18 KiB
HTML
373 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="id"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"secondary-container": "#cfe2f9",
|
|
"on-primary-container": "#92d5df",
|
|
"on-secondary-fixed-variant": "#36485b",
|
|
"on-secondary-fixed": "#091d2e",
|
|
"on-background": "#191c1d",
|
|
"outline": "#6f797a",
|
|
"on-primary": "#ffffff",
|
|
"inverse-on-surface": "#eff1f1",
|
|
"on-secondary": "#ffffff",
|
|
"error-container": "#ffdad6",
|
|
"secondary": "#4e6073",
|
|
"primary": "#00454c",
|
|
"on-tertiary-container": "#ffbb91",
|
|
"inverse-primary": "#8ed1db",
|
|
"on-primary-fixed": "#001f23",
|
|
"secondary-fixed-dim": "#b5c8df",
|
|
"on-surface": "#191c1d",
|
|
"tertiary-container": "#7c4824",
|
|
"on-tertiary-fixed": "#311300",
|
|
"surface-variant": "#e1e3e3",
|
|
"surface-bright": "#f8fafa",
|
|
"on-surface-variant": "#3f484a",
|
|
"surface": "#f8fafa",
|
|
"surface-container": "#eceeee",
|
|
"surface-container-low": "#f2f4f4",
|
|
"tertiary-fixed": "#ffdbc7",
|
|
"surface-container-high": "#e6e8e9",
|
|
"primary-fixed-dim": "#8ed1db",
|
|
"secondary-fixed": "#d1e4fb",
|
|
"on-error": "#ffffff",
|
|
"background": "#f8fafa",
|
|
"surface-dim": "#d8dadb",
|
|
"surface-tint": "#1d6871",
|
|
"outline-variant": "#bfc8ca",
|
|
"on-error-container": "#93000a",
|
|
"surface-container-highest": "#e1e3e3",
|
|
"on-primary-fixed-variant": "#004f57",
|
|
"error": "#ba1a1a",
|
|
"primary-fixed": "#aaeef8",
|
|
"on-tertiary": "#ffffff",
|
|
"inverse-surface": "#2e3131",
|
|
"tertiary": "#60320f",
|
|
"on-tertiary-fixed-variant": "#6b3a17",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-secondary-container": "#526478",
|
|
"tertiary-fixed-dim": "#feb78a",
|
|
"primary-container": "#0d5e67"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"container-margin": "24px",
|
|
"row-height-sm": "32px",
|
|
"compact-padding": "8px",
|
|
"gutter": "16px",
|
|
"row-height-md": "48px"
|
|
},
|
|
"fontFamily": {
|
|
"body-sm": ["Inter"],
|
|
"body-base": ["Inter"],
|
|
"h1": ["Inter"],
|
|
"display-lot": ["Inter"],
|
|
"table-data": ["Inter"],
|
|
"label-caps": ["Inter"],
|
|
"h2": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"h1": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"display-lot": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "500"}],
|
|
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
|
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
body { font-family: 'Inter', sans-serif; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background min-h-screen">
|
|
<aside class="fixed left-0 top-0 h-full w-64 border-r border-slate-200 bg-slate-50 flex flex-col py-4 z-50">
|
|
<div class="px-6 mb-8">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 bg-primary rounded flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-white text-sm">inventory_2</span>
|
|
</div>
|
|
<div>
|
|
<h1 class="text-teal-900 font-black text-body-base leading-none">Sarang Ops</h1>
|
|
<p class="text-[10px] text-slate-500 uppercase tracking-widest mt-1">Processing Plant A</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<nav class="flex-1 px-3 space-y-1">
|
|
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 transition-all rounded" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">dashboard</span>
|
|
<span class="font-inter text-[13px] font-medium">Dashboard</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 transition-all rounded" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">content_cut</span>
|
|
<span class="font-inter text-[13px] font-medium">Sortasi</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 bg-white text-[#0D5E67] border-r-4 border-[#0D5E67] shadow-sm transition-all rounded" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">sell</span>
|
|
<span class="font-inter text-[13px] font-medium">Penjualan</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 transition-all rounded" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">assignment_turned_in</span>
|
|
<span class="font-inter text-[13px] font-medium">Alokasi Lot</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 transition-all rounded" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">inventory</span>
|
|
<span class="font-inter text-[13px] font-medium">Picking</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 transition-all rounded" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">inventory_2</span>
|
|
<span class="font-inter text-[13px] font-medium">Inventory</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 transition-all rounded" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">monitoring</span>
|
|
<span class="font-inter text-[13px] font-medium">Analytics</span>
|
|
</a>
|
|
</nav>
|
|
<div class="px-3 pt-4 border-t border-slate-200">
|
|
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#0D5E67] transition-all" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">settings</span>
|
|
<span class="font-inter text-[13px] font-medium">Settings</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#0D5E67] transition-all" href="#">
|
|
<span class="material-symbols-outlined text-[20px]">contact_support</span>
|
|
<span class="font-inter text-[13px] font-medium">Support</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<header class="fixed top-0 left-64 right-0 h-14 bg-white border-b border-slate-200 flex justify-between items-center px-6 z-40">
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-inter text-sm font-semibold text-[#0D5E67]">Form Penjualan Baru</span>
|
|
<div class="h-4 w-[1px] bg-slate-300"></div>
|
|
<span class="text-slate-400 font-body-sm italic">Draft #SL-20231105</span>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<span class="material-symbols-outlined text-slate-600 cursor-pointer hover:bg-slate-50 p-2 rounded transition-colors">notifications</span>
|
|
<span class="material-symbols-outlined text-slate-600 cursor-pointer hover:bg-slate-50 p-2 rounded transition-colors">help_outline</span>
|
|
<div class="w-8 h-8 rounded-full overflow-hidden border border-slate-200">
|
|
<img alt="User profile" data-alt="professional male corporate executive headshot in business attire with neutral background and soft studio lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzS2dKpWO9dpDoJCYL6E9lkDRztAO0vPsRVKXH_VvEZH5pfUjwGmSevP2kKqCW3IupdvxgWnvoQcrxdEJQaqPSvVfYe5xGXibhfeRaU3VZUHRzt8QmxjA1c3dqqpdf-Fb3ZUwN59zMSK5pzLTaJEj7xfgDzhxu0_CctZ53Y42rkd2eZQEUmOmglVhzUZRYVW9vLBwPqHQyhZgpRrWNx67G-556PphdHCE6OrKBHeu8wp2SxfF3aZYg6cxEPsV-UI6VKz1YfJlcvg"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main class="ml-64 mt-14 p-container-margin">
|
|
<div class="max-w-6xl mx-auto">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h2 class="font-h1 text-h1 text-primary">Informasi Penjualan</h2>
|
|
<p class="font-body-sm text-body-sm text-slate-500">Lengkapi detail pesanan sebelum melakukan alokasi stok.</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<button class="px-4 py-2 border border-primary text-primary rounded-lg font-body-base hover:bg-slate-50 transition-colors">Simpan Draft</button>
|
|
<button class="px-4 py-2 bg-primary text-white rounded-lg font-body-base shadow-sm flex items-center gap-2 hover:opacity-90 transition-opacity">
|
|
<span>Lanjut ke Alokasi Lot</span>
|
|
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-12 gap-gutter">
|
|
<div class="col-span-8 space-y-gutter">
|
|
<section class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
|
|
<div class="p-4 border-b border-slate-100 bg-slate-50/50">
|
|
<h3 class="font-h2 text-h2 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary">person</span>
|
|
Pilih Pelanggan
|
|
</h3>
|
|
</div>
|
|
<div class="p-6 grid grid-cols-2 gap-6">
|
|
<div class="space-y-2">
|
|
<label class="font-label-caps text-label-caps text-on-surface-variant uppercase">NAMA PELANGGAN</label>
|
|
<select class="w-full h-10 border border-slate-200 rounded px-3 font-body-base focus:ring-2 focus:ring-primary focus:border-primary outline-none appearance-none bg-white">
|
|
<option>PT. Global Export Indo</option>
|
|
<option>BirdNest Co. Guangzhou</option>
|
|
<option>Sejahtera Trading Singapore</option>
|
|
</select>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="font-label-caps text-label-caps text-on-surface-variant uppercase">TANGGAL PENJUALAN</label>
|
|
<input class="w-full h-10 border border-slate-200 rounded px-3 font-body-base focus:ring-2 focus:ring-primary outline-none" type="date" value="2023-11-25"/>
|
|
</div>
|
|
<div class="col-span-2 space-y-2">
|
|
<label class="font-label-caps text-label-caps text-on-surface-variant uppercase">CATATAN PENJUALAN</label>
|
|
<textarea class="w-full h-24 border border-slate-200 rounded p-3 font-body-base focus:ring-2 focus:ring-primary outline-none resize-none" placeholder="Masukkan instruksi khusus atau catatan pengiriman..."></textarea>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
|
|
<div class="p-4 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center">
|
|
<h3 class="font-h2 text-h2 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-primary">list_alt</span>
|
|
Tabel Detail Barang
|
|
</h3>
|
|
<button class="text-primary font-body-sm font-semibold flex items-center gap-1 hover:underline">
|
|
<span class="material-symbols-outlined text-[18px]">add_circle</span>
|
|
Tambah Item
|
|
</button>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead class="bg-slate-50 border-b border-slate-200">
|
|
<tr>
|
|
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant uppercase">JENIS ITEM</th>
|
|
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant uppercase">GRADE</th>
|
|
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant uppercase text-right">QTY DIBUTUHKAN</th>
|
|
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant uppercase">SATUAN</th>
|
|
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant uppercase text-right">HARGA JUAL (IDR)</th>
|
|
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant uppercase text-right">SUBTOTAL</th>
|
|
<th class="px-4 py-3 w-10"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
<tr class="hover:bg-slate-50 transition-colors">
|
|
<td class="px-4 py-3">
|
|
<select class="w-full bg-transparent border-none p-0 font-table-data focus:ring-0">
|
|
<option>Sarang Putih Mangkok</option>
|
|
<option>Sarang Sudut</option>
|
|
</select>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<select class="w-full bg-transparent border-none p-0 font-table-data focus:ring-0">
|
|
<option>Grade AAA</option>
|
|
<option>Grade AA</option>
|
|
<option>Grade A</option>
|
|
</select>
|
|
</td>
|
|
<td class="px-4 py-3 text-right">
|
|
<input class="w-20 text-right bg-transparent border-none p-0 font-table-data focus:ring-0" type="number" value="50.00"/>
|
|
</td>
|
|
<td class="px-4 py-3 font-table-data text-slate-500">kg</td>
|
|
<td class="px-4 py-3 text-right">
|
|
<input class="w-28 text-right bg-transparent border-none p-0 font-table-data focus:ring-0" type="text" value="15.500.000"/>
|
|
</td>
|
|
<td class="px-4 py-3 text-right font-table-data text-primary">775.000.000</td>
|
|
<td class="px-4 py-3 text-right">
|
|
<span class="material-symbols-outlined text-slate-300 hover:text-error cursor-pointer">delete</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-slate-50 transition-colors">
|
|
<td class="px-4 py-3">
|
|
<select class="w-full bg-transparent border-none p-0 font-table-data focus:ring-0">
|
|
<option>Sarang Sudut</option>
|
|
<option>Sarang Putih Mangkok</option>
|
|
</select>
|
|
</td>
|
|
<td class="px-4 py-3">
|
|
<select class="w-full bg-transparent border-none p-0 font-table-data focus:ring-0">
|
|
<option>Grade Super</option>
|
|
<option>Grade A</option>
|
|
</select>
|
|
</td>
|
|
<td class="px-4 py-3 text-right">
|
|
<input class="w-20 text-right bg-transparent border-none p-0 font-table-data focus:ring-0" type="number" value="25.00"/>
|
|
</td>
|
|
<td class="px-4 py-3 font-table-data text-slate-500">kg</td>
|
|
<td class="px-4 py-3 text-right">
|
|
<input class="w-28 text-right bg-transparent border-none p-0 font-table-data focus:ring-0" type="text" value="12.000.000"/>
|
|
</td>
|
|
<td class="px-4 py-3 text-right font-table-data text-primary">300.000.000</td>
|
|
<td class="px-4 py-3 text-right">
|
|
<span class="material-symbols-outlined text-slate-300 hover:text-error cursor-pointer">delete</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot class="bg-slate-50/80">
|
|
<tr>
|
|
<td class="px-4 py-4 text-right font-h2 text-slate-600" colspan="5">Grand Total</td>
|
|
<td class="px-4 py-4 text-right font-display-lot text-primary">1.075.000.000</td>
|
|
<td></td>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<div class="col-span-4 space-y-gutter">
|
|
<section class="bg-primary rounded-xl border border-primary-container shadow-lg text-white overflow-hidden relative">
|
|
<div class="absolute top-0 right-0 p-4 opacity-10">
|
|
<span class="material-symbols-outlined text-[80px]">account_balance</span>
|
|
</div>
|
|
<div class="p-4 border-b border-white/10">
|
|
<h3 class="font-h2 text-h2 flex items-center gap-2">
|
|
<span class="material-symbols-outlined">payments</span>
|
|
Info Bank Pelanggan
|
|
</h3>
|
|
</div>
|
|
<div class="p-6 space-y-4">
|
|
<div>
|
|
<label class="text-[10px] font-bold opacity-60 uppercase tracking-widest">BANK TUJUAN</label>
|
|
<p class="font-body-base font-semibold">Bank Central Asia (BCA)</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-[10px] font-bold opacity-60 uppercase tracking-widest">NOMOR REKENING</label>
|
|
<p class="text-h1 font-display-lot tracking-wide">8830 1928 440</p>
|
|
</div>
|
|
<div>
|
|
<label class="text-[10px] font-bold opacity-60 uppercase tracking-widest">ATAS NAMA</label>
|
|
<p class="font-body-base">PT GLOBAL EXPORT INDO</p>
|
|
</div>
|
|
<div class="pt-4 flex items-center gap-2 text-xs opacity-80">
|
|
<span class="material-symbols-outlined text-[16px]">verified</span>
|
|
<span>Verified Payment Channel</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="bg-white rounded-xl border border-slate-200 shadow-sm p-6">
|
|
<h3 class="font-h2 text-h2 mb-4 flex items-center gap-2 text-on-surface">
|
|
<span class="material-symbols-outlined text-primary">history</span>
|
|
Ringkasan Lot
|
|
</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex justify-between items-center text-body-sm">
|
|
<span class="text-slate-500">Total Berat (Netto)</span>
|
|
<span class="font-semibold text-on-surface">75.00 kg</span>
|
|
</div>
|
|
<div class="flex justify-between items-center text-body-sm">
|
|
<span class="text-slate-500">Estimasi Jumlah Lot</span>
|
|
<span class="font-semibold text-on-surface">~12 Lots</span>
|
|
</div>
|
|
<div class="h-[1px] bg-slate-100"></div>
|
|
<div class="flex justify-between items-center text-body-sm">
|
|
<span class="text-slate-500">PPN (11%)</span>
|
|
<span class="font-semibold text-on-surface">118.250.000</span>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="font-body-base font-bold text-on-surface">Total Tagihan</span>
|
|
<span class="font-h2 text-h1 text-[#0D5E67]">1.193.250.000</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<div class="bg-secondary-container/30 border border-secondary-container p-4 rounded-xl">
|
|
<div class="flex gap-3">
|
|
<span class="material-symbols-outlined text-secondary">info</span>
|
|
<p class="text-body-sm text-secondary leading-relaxed">
|
|
Pastikan stok fisik tersedia di warehouse sebelum melanjutkan ke tahap <strong>Alokasi Lot</strong>. Draft ini akan tersimpan secara otomatis.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</body></html> |