wirabasalamah/AbelBirdNest-Stock
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
76b37cd4c8d5a79429315fe687c93473da15deb5
AbelBirdNest-Stock/design-assets/stitch_abel_stock/receipt_form/code.html

417 lines
22 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html class="light" lang="id"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Formulir Penerimaan - SwiftLot Walet</title>
<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&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.compact-scrollbar::-webkit-scrollbar {
width: 4px;
height: 4px;
}
.compact-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.compact-scrollbar::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}
</style>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-error-container": "#93000a",
"surface-bright": "#f8fafa",
"tertiary": "#60320f",
"inverse-primary": "#8ed1db",
"error-container": "#ffdad6",
"error": "#ba1a1a",
"surface-container-low": "#f2f4f4",
"secondary-container": "#cfe2f9",
"primary": "#00454c",
"outline-variant": "#bfc8ca",
"on-secondary-fixed-variant": "#36485b",
"on-surface-variant": "#3f484a",
"surface-container-lowest": "#ffffff",
"surface-container-high": "#e6e8e9",
"surface-variant": "#e1e3e3",
"surface-dim": "#d8dadb",
"outline": "#6f797a",
"on-secondary-container": "#526478",
"on-secondary-fixed": "#091d2e",
"tertiary-container": "#7c4824",
"inverse-surface": "#2e3131",
"background": "#f8fafa",
"on-tertiary": "#ffffff",
"on-surface": "#191c1d",
"secondary": "#4e6073",
"primary-container": "#0d5e67",
"on-primary-fixed-variant": "#004f57",
"surface-container": "#eceeee",
"on-primary-container": "#92d5df",
"primary-fixed-dim": "#8ed1db",
"tertiary-fixed-dim": "#feb78a",
"on-tertiary-fixed": "#311300",
"secondary-fixed": "#d1e4fb",
"inverse-on-surface": "#eff1f1",
"on-primary-fixed": "#001f23",
"on-secondary": "#ffffff",
"surface-tint": "#1d6871",
"on-tertiary-container": "#ffbb91",
"primary-fixed": "#aaeef8",
"secondary-fixed-dim": "#b5c8df",
"on-primary": "#ffffff",
"surface": "#f8fafa",
"surface-container-highest": "#e1e3e3",
"on-error": "#ffffff",
"on-tertiary-fixed-variant": "#6b3a17",
"tertiary-fixed": "#ffdbc7",
"on-background": "#191c1d"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"row-height-md": "48px",
"container-margin": "24px",
"compact-padding": "8px",
"gutter": "16px",
"row-height-sm": "32px"
},
"fontFamily": {
"display-lot": ["Inter"],
"table-data": ["Inter"],
"body-sm": ["Inter"],
"label-caps": ["Inter"],
"body-base": ["Inter"],
"h2": ["Inter"],
"h1": ["Inter"]
},
"fontSize": {
"display-lot": ["24px", { "lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
"table-data": ["13px", { "lineHeight": "16px", "fontWeight": "500" }],
"body-sm": ["13px", { "lineHeight": "18px", "fontWeight": "400" }],
"label-caps": ["11px", { "lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700" }],
"body-base": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
"h2": ["16px", { "lineHeight": "24px", "fontWeight": "600" }],
"h1": ["20px", { "lineHeight": "28px", "fontWeight": "600" }]
}
},
},
}
</script>
</head>
<body class="bg-background font-body-base text-on-surface min-h-screen">
<!-- TopNavBar -->
<header class="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 shadow-sm fixed top-0 z-40 w-full flex justify-between items-center h-14 px-6">
<div class="flex items-center gap-4">
<span class="text-lg font-bold text-[#0D5E67] dark:text-white tracking-tight">SwiftLot Walet</span>
<div class="h-6 w-[1px] bg-slate-200 mx-2"></div>
<h2 class="font-h1 text-h1 text-on-surface">Formulir Penerimaan Barang</h2>
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2 px-3 py-1.5 bg-slate-50 border border-slate-200 rounded">
<span class="material-symbols-outlined text-slate-400 text-sm">notifications</span>
<span class="material-symbols-outlined text-slate-400 text-sm">help_outline</span>
</div>
<div class="w-8 h-8 rounded-full overflow-hidden border border-slate-200">
<img alt="User profile" class="w-full h-full object-cover" data-alt="Professional headshot of a corporate inventory manager for a high-end logistics company" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBYUHb23_FlhaKb0YLS1pNIC3A7L07VmAYYc3PC6s3oKRPwxHcKGnwgQso2ITf528my0JYawpiuOy1SVr52zXRjfqGr0fFxPhEkd2KZUDbYt1LF_QlRot7wZXLaaRX4VU4zp4-prh0xpoBOdh3Zg4dUJ0ldPlW4Yj-dJIO6I976nfoLW6y170S1CBwwvC7p1MgzMSaJNcq4T6dJtHeAFi35GFV68iVmTVgHpeQB4hrFbDpq6bQN1kXuuo9Xzijqi35u6zmlIriWkA"/>
</div>
</div>
</header>
<!-- SideNavBar -->
<aside class="fixed left-0 top-14 h-[calc(100vh-3.5rem)] w-64 bg-slate-50 dark:bg-slate-950 border-r border-slate-200 dark:border-slate-800 flex flex-col py-4 font-inter text-[13px] font-medium">
<nav class="flex-1 space-y-1 px-3">
<a class="flex items-center gap-3 px-4 py-2.5 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 active:scale-[0.98]" href="#">
<span class="material-symbols-outlined">dashboard</span>
<span>Dasbor</span>
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 active:scale-[0.98]" href="#">
<span class="material-symbols-outlined">shopping_cart</span>
<span>Pembelian</span>
</a>
<a class="flex items-center gap-3 px-4 py-2.5 bg-white dark:bg-slate-900 text-[#0D5E67] border-r-4 border-[#0D5E67] shadow-sm transition-all duration-150 active:scale-[0.98]" href="#">
<span class="material-symbols-outlined">receipt_long</span>
<span>Penerimaan</span>
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 active:scale-[0.98]" href="#">
<span class="material-symbols-outlined">inventory_2</span>
<span>Inventaris</span>
</a>
<a class="flex items-center gap-3 px-4 py-2.5 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 active:scale-[0.98]" href="#">
<span class="material-symbols-outlined">monitoring</span>
<span>Analitik</span>
</a>
</nav>
<div class="px-3 mb-6">
<button class="w-full py-2 bg-primary-container text-white rounded font-bold shadow-sm hover:opacity-90 active:scale-[0.98] transition-all flex items-center justify-center gap-2">
<span class="material-symbols-outlined text-[18px]">add_circle</span>
<span>Scan Lot Baru</span>
</button>
</div>
<div class="px-3 border-t border-slate-200 pt-4 space-y-1">
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 hover:bg-slate-100 rounded" href="#">
<span class="material-symbols-outlined text-[20px]">settings</span>
<span>Pengaturan</span>
</a>
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 hover:bg-slate-100 rounded" href="#">
<span class="material-symbols-outlined text-[20px]">contact_support</span>
<span>Bantuan</span>
</a>
</div>
</aside>
<!-- Main Content -->
<main class="ml-64 mt-14 p-6 overflow-x-hidden">
<div class="max-w-7xl mx-auto space-y-6">
<!-- Header Section: Form Fields -->
<div class="grid grid-cols-12 gap-6">
<!-- Receipt Metadata -->
<div class="col-span-8 bg-white border border-outline-variant p-5 shadow-sm rounded">
<div class="flex items-center justify-between mb-6">
<h3 class="font-h2 text-h2 text-primary flex items-center gap-2">
<span class="material-symbols-outlined">edit_document</span>
Informasi Dasar
</h3>
<span class="text-label-caps font-label-caps px-2 py-0.5 bg-slate-100 text-slate-600 rounded">DRAFT</span>
</div>
<div class="grid grid-cols-2 gap-x-6 gap-y-4">
<div>
<label class="block font-label-caps text-label-caps text-outline mb-1">NO. PENERIMAAN (AUTO)</label>
<input class="w-full bg-surface-container-low border-none font-table-data text-table-data py-2 px-3 rounded text-on-surface-variant cursor-not-allowed" readonly="" type="text" value="GRN/2023/10/0421"/>
</div>
<div>
<label class="block font-label-caps text-label-caps text-outline mb-1">REFERENSI PEMBELIAN</label>
<div class="relative">
<select class="w-full border-outline border focus:ring-2 focus:ring-primary-container font-table-data text-table-data py-2 px-3 rounded appearance-none cursor-pointer">
<option>PO-2023-WB-098 (Premium Walet Group)</option>
<option>PO-2023-WB-102 (Sumatra Nest Co)</option>
<option>PO-2023-WB-105 (Kalimantan Swiftlet Assoc)</option>
</select>
<span class="material-symbols-outlined absolute right-2 top-2 text-slate-400 pointer-events-none">search</span>
</div>
</div>
<div>
<label class="block font-label-caps text-label-caps text-outline mb-1">PEMASOK</label>
<input class="w-full bg-surface-container-low border-none font-table-data text-table-data py-2 px-3 rounded text-on-surface-variant cursor-not-allowed" readonly="" type="text" value="Premium Walet Group Ltd"/>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block font-label-caps text-label-caps text-outline mb-1">TANGGAL TERIMA</label>
<input class="w-full border-outline border focus:ring-2 focus:ring-primary-container font-table-data text-table-data py-2 px-3 rounded" type="date" value="2023-10-27"/>
</div>
<div>
<label class="block font-label-caps text-label-caps text-outline mb-1">NAMA PENERIMA</label>
<input class="w-full border-outline border focus:ring-2 focus:ring-primary-container font-table-data text-table-data py-2 px-3 rounded" placeholder="Masukkan nama..." type="text"/>
</div>
</div>
</div>
</div>
<!-- Supplier Bank Info -->
<div class="col-span-4 bg-white border border-outline-variant p-5 shadow-sm rounded flex flex-col">
<h3 class="font-h2 text-h2 text-primary flex items-center gap-2 mb-4">
<span class="material-symbols-outlined">account_balance</span>
Info Pembayaran Pemasok
</h3>
<div class="space-y-3 flex-1">
<div class="p-3 bg-secondary-container rounded-sm border border-blue-100">
<label class="block font-label-caps text-label-caps text-on-secondary-fixed-variant mb-0.5">NAMA BANK</label>
<div class="font-table-data text-table-data text-on-secondary-container">BCA International - Central Branch</div>
</div>
<div class="p-3 bg-secondary-container rounded-sm border border-blue-100">
<label class="block font-label-caps text-label-caps text-on-secondary-fixed-variant mb-0.5">NOMOR REKENING</label>
<div class="font-table-data text-table-data text-on-secondary-container">8830-441-2291</div>
</div>
<div class="p-3 bg-secondary-container rounded-sm border border-blue-100">
<label class="block font-label-caps text-label-caps text-on-secondary-fixed-variant mb-0.5">PEMILIK REKENING</label>
<div class="font-table-data text-table-data text-on-secondary-container">PREMIUM WALET GROUP LTD</div>
</div>
</div>
</div>
</div>
<!-- Lines Table -->
<div class="bg-white border border-outline-variant shadow-sm rounded overflow-hidden">
<div class="px-5 py-4 border-b border-outline-variant flex justify-between items-center bg-surface-container-lowest">
<h3 class="font-h2 text-h2 text-on-surface flex items-center gap-2">
<span class="material-symbols-outlined text-primary">list_alt</span>
Item Baris Inventaris
</h3>
<div class="flex gap-4">
<div class="flex items-center gap-2 px-3 py-1 bg-surface-container-high rounded-full">
<span class="text-label-caps font-label-caps text-outline">DIPESAN:</span>
<span class="font-display-lot text-[14px] text-on-surface">1,250.00 kg</span>
</div>
<div class="flex items-center gap-2 px-3 py-1 bg-green-50 rounded-full border border-green-200">
<span class="text-label-caps font-label-caps text-green-700">DISETUJUI:</span>
<span class="font-display-lot text-[14px] text-green-800">1,180.00 kg</span>
</div>
</div>
</div>
<div class="overflow-x-auto compact-scrollbar">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-surface-container-low border-b border-outline-variant">
<th class="px-4 py-3 font-label-caps text-label-caps text-outline">DESKRIPSI ITEM</th>
<th class="px-4 py-3 font-label-caps text-label-caps text-outline text-right">DIPESAN</th>
<th class="px-4 py-3 font-label-caps text-label-caps text-outline w-24">DITERIMA</th>
<th class="px-4 py-3 font-label-caps text-label-caps text-outline w-24">DISETUJUI</th>
<th class="px-4 py-3 font-label-caps text-label-caps text-outline w-24">DITOLAK</th>
<th class="px-4 py-3 font-label-caps text-label-caps text-outline text-right">BIAYA SATUAN</th>
<th class="px-4 py-3 font-label-caps text-label-caps text-outline">GUDANG</th>
<th class="px-4 py-3 font-label-caps text-label-caps text-outline">LOKASI</th>
</tr>
</thead>
<tbody class="divide-y divide-outline-variant">
<!-- Row 1 -->
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-4 py-2">
<div class="font-table-data text-table-data">Grade 3A - Super White</div>
<div class="text-[11px] text-slate-400">LOT-REF: SW-001</div>
</td>
<td class="px-4 py-2 text-right font-table-data text-table-data">500.00 kg</td>
<td class="px-4 py-2">
<input class="w-full text-right border-outline border focus:ring-1 focus:ring-primary-container font-table-data text-table-data py-1 px-2 rounded" type="number" value="500.00"/>
</td>
<td class="px-4 py-2">
<input class="w-full text-right border-green-300 border focus:ring-1 focus:ring-green-500 font-table-data text-table-data py-1 px-2 rounded bg-green-50" type="number" value="480.00"/>
</td>
<td class="px-4 py-2">
<input class="w-full text-right border-error border focus:ring-1 focus:ring-error font-table-data text-table-data py-1 px-2 rounded bg-error-container text-on-error-container" type="number" value="20.00"/>
</td>
<td class="px-4 py-2 text-right font-table-data text-table-data">$1,200.00</td>
<td class="px-4 py-2">
<select class="w-full border-outline border text-[12px] py-1 px-2 rounded">
<option>Main WH - Zone A</option>
<option>Cold Storage 1</option>
</select>
</td>
<td class="px-4 py-2">
<select class="w-full border-outline border text-[12px] py-1 px-2 rounded">
<option>Rack A-01</option>
<option>Rack A-02</option>
</select>
</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-slate-50 transition-colors">
<td class="px-4 py-2">
<div class="font-table-data text-table-data">Grade 2B - Light Yellow</div>
<div class="text-[11px] text-slate-400">LOT-REF: LY-004</div>
</td>
<td class="px-4 py-2 text-right font-table-data text-table-data">750.00 kg</td>
<td class="px-4 py-2">
<input class="w-full text-right border-outline border focus:ring-1 focus:ring-primary-container font-table-data text-table-data py-1 px-2 rounded" type="number" value="750.00"/>
</td>
<td class="px-4 py-2">
<input class="w-full text-right border-green-300 border focus:ring-1 focus:ring-green-500 font-table-data text-table-data py-1 px-2 rounded bg-green-50" type="number" value="700.00"/>
</td>
<td class="px-4 py-2">
<input class="w-full text-right border-error border focus:ring-1 focus:ring-error font-table-data text-table-data py-1 px-2 rounded bg-error-container text-on-error-container" type="number" value="50.00"/>
</td>
<td class="px-4 py-2 text-right font-table-data text-table-data">$850.00</td>
<td class="px-4 py-2">
<select class="w-full border-outline border text-[12px] py-1 px-2 rounded">
<option>Main WH - Zone B</option>
<option>Cold Storage 2</option>
</select>
</td>
<td class="px-4 py-2">
<select class="w-full border-outline border text-[12px] py-1 px-2 rounded">
<option>Rack B-14</option>
<option>Rack B-15</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Validation Summary Bar -->
<div class="bg-surface-container-low px-5 py-3 border-t border-outline-variant flex items-center justify-between">
<div class="flex items-center gap-2 text-on-error-container font-body-sm text-body-sm">
<span class="material-symbols-outlined text-[18px]">warning</span>
<span>Validasi: Item Ditolak + Disetujui Baris 1 (500) sama dengan Diterima (500). Sistem OK.</span>
</div>
<div class="text-right">
<span class="text-label-caps font-label-caps text-outline mr-2">TOTAL ITEM:</span>
<span class="font-h2 text-h2 text-primary">2 Item</span>
</div>
</div>
</div>
<!-- Footer Actions -->
<div class="flex justify-between items-center bg-white p-4 border border-outline-variant rounded shadow-sm">
<div class="flex items-center gap-4">
<button class="px-4 py-2 text-slate-600 font-semibold hover:bg-slate-50 transition-colors flex items-center gap-2">
<span class="material-symbols-outlined">delete_outline</span>
Hapus
</button>
<button class="px-4 py-2 border border-primary text-primary font-semibold hover:bg-teal-50 transition-colors flex items-center gap-2 rounded">
<span class="material-symbols-outlined">save</span>
Simpan Draft
</button>
</div>
<div class="flex items-center gap-4">
<div class="text-right mr-4">
<div class="text-label-caps font-label-caps text-outline">ESTIMASI LOT</div>
<div class="font-h1 text-h1 text-primary">12 Lot Baru</div>
</div>
<button class="bg-primary-container text-white px-8 py-2.5 rounded font-bold shadow-lg hover:brightness-110 active:scale-[0.98] transition-all flex items-center gap-3">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">inventory_2</span>
Selesaikan &amp; Buat Lot
</button>
</div>
</div>
</div>
</main>
<!-- Contextual Info Cards (Bento Style) -->
<section class="ml-64 px-6 pb-12">
<div class="max-w-7xl mx-auto grid grid-cols-3 gap-6">
<div class="bg-white p-4 border border-outline-variant rounded shadow-sm">
<div class="flex items-start justify-between">
<div>
<div class="text-label-caps font-label-caps text-outline mb-1">TREN KUALITAS</div>
<div class="font-h1 text-h1">94.4% Hasil</div>
</div>
<div class="p-2 bg-green-50 text-green-600 rounded">
<span class="material-symbols-outlined">trending_up</span>
</div>
</div>
<div class="mt-4 h-1 w-full bg-slate-100 rounded-full overflow-hidden">
<div class="h-full bg-green-500" style="width: 94%"></div>
</div>
<div class="mt-2 text-[11px] text-slate-500">Rata-rata tingkat penerimaan dari pemasok ini kuartal ini.</div>
</div>
<div class="bg-white p-4 border border-outline-variant rounded shadow-sm flex items-center gap-4">
<div class="w-16 h-16 bg-slate-100 rounded flex items-center justify-center">
<span class="material-symbols-outlined text-3xl text-slate-400">qr_code_2</span>
</div>
<div>
<div class="text-label-caps font-label-caps text-outline mb-0.5">PELABELAN OTOMATIS</div>
<div class="font-h2 text-h2">12 Label Siap</div>
<div class="text-[11px] text-primary-container font-semibold mt-1 flex items-center gap-1">
<span class="material-symbols-outlined text-[14px]">print</span>
Antrian cetak terhubung
</div>
</div>
</div>
<div class="relative overflow-hidden bg-primary-container rounded shadow-sm flex flex-col justify-end p-4 group">
<img class="absolute inset-0 w-full h-full object-cover opacity-20 transition-transform duration-700 group-hover:scale-110" data-alt="Close up of high quality edible bird nests in a clean warehouse environment with industrial lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCyVXCingJDg1yF9nwNVeOKPutQEpxFvnJolhNKNMHvPBeAduiLchlPZgI4l_hmj9SKmEwm0cxM83I3lY2YK9bu1ewPJkV9AIMZRCRgpJaGSO0dIXAKFZrGDk3a2VP8MHkBBJF2aWBOB7ptBHRJFmt9PxFvLxqjZO82TmxoaGuuNFPRuBzTVMKy_75RfNtqJvCrr5aAbD58uB-ZzLDy0lNPD9X0mlMP0Xu8lwMLjKSruKg9E-6X9cWsosENbgRZA3jQt27EABcC9w"/>
<div class="relative z-10">
<div class="text-white/70 text-label-caps font-label-caps mb-1">TIP OPERASIONAL</div>
<div class="text-white font-h2 text-h2">Verifikasi Tingkat Kelembaban</div>
<p class="text-white/80 text-[11px] mt-1 leading-relaxed">Pastikan semua grade Super White berada dalam rentang kelembaban 12-14% sebelum finalisasi rak penyimpanan.</p>
</div>
</div>
</div>
</section>
</body></html>
Reference in New Issue View Git Blame Copy Permalink