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

439 lines
22 KiB
HTML
Raw Permalink 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>Detail Lot - 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"/>
<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>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body {
background-color: #f8fafa;
}
.timeline-line::before {
content: '';
position: absolute;
left: 11px;
top: 24px;
bottom: 0;
width: 2px;
background-color: #e6e8e9;
}
.timeline-item:last-child .timeline-line::before {
display: none;
}
</style>
</head>
<body class="font-body-base text-on-surface">
<!-- TopNavBar -->
<header class="fixed top-0 z-40 h-14 w-full bg-white dark:bg-slate-900 flex justify-between items-center px-6 border-b border-slate-200 dark:border-slate-800 shadow-sm font-inter text-sm antialiased">
<div class="flex items-center gap-8">
<span class="text-lg font-bold text-[#0D5E67] dark:text-white tracking-tight">SwiftLot Walet</span>
<div class="hidden md:flex items-center gap-6">
<span class="text-[#0D5E67] font-semibold cursor-pointer active:opacity-80">Inventaris</span>
<span class="text-slate-600 dark:text-slate-400 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors px-2 py-1 rounded">Pengadaan</span>
<span class="text-slate-600 dark:text-slate-400 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors px-2 py-1 rounded">Kontrol Kualitas</span>
</div>
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2 px-3 py-1.5 bg-slate-100 rounded-lg">
<span class="material-symbols-outlined text-slate-500 text-lg">search</span>
<input class="bg-transparent border-none focus:ring-0 text-xs w-48" placeholder="Cari Kode Lot..." type="text"/>
</div>
<span class="material-symbols-outlined text-[#0D5E67] cursor-pointer">notifications</span>
<span class="material-symbols-outlined text-[#0D5E67] cursor-pointer">help_outline</span>
<div class="h-8 w-8 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container font-bold text-xs">
JD
</div>
</div>
</header>
<!-- SideNavBar -->
<aside class="fixed left-0 top-0 h-full w-64 border-r border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 flex flex-col py-4 z-30 pt-16">
<div class="px-6 mb-8 flex items-center gap-3">
<div class="h-10 w-10 bg-teal-900 rounded flex items-center justify-center">
<span class="material-symbols-outlined text-white" data-icon="factory">factory</span>
</div>
<div>
<h2 class="text-teal-900 dark:text-teal-100 font-black text-sm">Ops Sarang</h2>
<p class="text-[11px] text-slate-500 uppercase tracking-widest font-bold">Pabrik A</p>
</div>
</div>
<nav class="flex-1 px-4 space-y-1">
<div class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 rounded cursor-pointer group">
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
<span class="font-medium text-[13px]">Dasbor</span>
</div>
<div class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 rounded cursor-pointer group">
<span class="material-symbols-outlined" data-icon="shopping_cart">shopping_cart</span>
<span class="font-medium text-[13px]">Pembelian</span>
</div>
<div class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 rounded cursor-pointer group">
<span class="material-symbols-outlined" data-icon="receipt_long">receipt_long</span>
<span class="font-medium text-[13px]">Penerimaan</span>
</div>
<div class="flex items-center gap-3 px-3 py-2 bg-white dark:bg-slate-900 text-[#0D5E67] border-r-4 border-[#0D5E67] shadow-sm rounded cursor-pointer group">
<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
<span class="font-medium text-[13px]">Inventaris</span>
</div>
<div class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 rounded cursor-pointer group">
<span class="material-symbols-outlined" data-icon="monitoring">monitoring</span>
<span class="font-medium text-[13px]">Analitik</span>
</div>
</nav>
<div class="px-4 mt-auto space-y-1">
<button class="w-full bg-[#0D5E67] text-white py-2.5 rounded flex items-center justify-center gap-2 mb-4 hover:opacity-90 active:scale-[0.98] transition-transform">
<span class="material-symbols-outlined text-sm" data-icon="add_circle">add_circle</span>
<span class="text-[13px] font-bold">Scan Lot Baru</span>
</button>
<div class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 rounded cursor-pointer transition-all">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
<span class="font-medium text-[13px]">Pengaturan</span>
</div>
<div class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 rounded cursor-pointer transition-all">
<span class="material-symbols-outlined" data-icon="contact_support">contact_support</span>
<span class="font-medium text-[13px]">Bantuan</span>
</div>
</div>
</aside>
<!-- Main Content Canvas -->
<main class="ml-64 pt-14 min-h-screen bg-background">
<div class="p-container-margin">
<!-- Summary Header -->
<div class="bg-surface-container-lowest border border-outline-variant p-6 rounded-lg mb-gutter shadow-sm">
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
<div class="flex items-center gap-4">
<div class="bg-primary-container text-on-primary-container p-3 rounded-lg">
<span class="material-symbols-outlined text-3xl" data-icon="qr_code_2">qr_code_2</span>
</div>
<div>
<div class="flex items-center gap-3">
<h1 class="font-display-lot text-display-lot text-primary">LOT-WAL-2023-0892</h1>
<span class="bg-[#D1E4FB] text-[#091D2E] text-[11px] font-bold px-2 py-0.5 rounded-full uppercase tracking-wider">Aktif</span>
</div>
<p class="text-secondary font-body-sm mt-1">Dibuat pada 14 Okt 2023 oleh Tim Operasional A</p>
</div>
</div>
<div class="grid grid-cols-3 gap-8 pr-4">
<div class="text-center">
<p class="font-label-caps text-outline uppercase">Kualitas</p>
<p class="font-h1 text-on-surface">Super A++</p>
</div>
<div class="text-center">
<p class="font-label-caps text-outline uppercase">Jenis</p>
<p class="font-h1 text-on-surface">Bentuk Mangkok</p>
</div>
<div class="text-center">
<p class="font-label-caps text-outline uppercase">Jumlah Saat Ini</p>
<p class="font-h1 text-primary">12.450 kg</p>
</div>
</div>
</div>
</div>
<!-- Bento Layout Content -->
<div class="grid grid-cols-12 gap-gutter items-start">
<!-- Left Column: Primary Data -->
<div class="col-span-12 lg:col-span-8 space-y-gutter">
<!-- Details Card & Qty Breakdown -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-gutter">
<!-- Details Card -->
<section class="bg-white border border-outline-variant rounded-lg p-5">
<div class="flex items-center gap-2 mb-4 border-b border-surface-container pb-2">
<span class="material-symbols-outlined text-primary" data-icon="info">info</span>
<h2 class="font-h2 text-primary">Detail Administrasi</h2>
</div>
<div class="space-y-4">
<div>
<p class="font-label-caps text-outline uppercase mb-1">Pemasok</p>
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded bg-surface-container flex items-center justify-center">
<span class="material-symbols-outlined text-on-surface-variant text-sm" data-icon="person">person</span>
</div>
<div>
<p class="font-table-data text-on-surface">Borneo Harvest Co.</p>
<p class="text-[11px] text-secondary">Akun BCA: **** 9012</p>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<p class="font-label-caps text-outline uppercase mb-1">Ref. Penerimaan</p>
<a class="text-[#0D5E67] font-table-data flex items-center gap-1 hover:underline" href="#">
<span class="material-symbols-outlined text-xs" data-icon="link">link</span>
RC-88192
</a>
</div>
<div>
<p class="font-label-caps text-outline uppercase mb-1">Gudang</p>
<p class="font-table-data text-on-surface">Zona B-4 / Ruang Dingin</p>
</div>
</div>
</div>
</section>
<!-- Qty Breakdown -->
<section class="bg-white border border-outline-variant rounded-lg p-5">
<div class="flex items-center gap-2 mb-4 border-b border-surface-container pb-2">
<span class="material-symbols-outlined text-primary" data-icon="analytics">analytics</span>
<h2 class="font-h2 text-primary">Audit Jumlah</h2>
</div>
<div class="grid grid-cols-2 gap-y-4">
<div>
<p class="font-label-caps text-outline mb-1">Penerimaan Awal</p>
<p class="font-table-data text-on-surface">15.000 kg</p>
</div>
<div>
<p class="font-label-caps text-outline mb-1">Stok Tersedia</p>
<p class="font-table-data text-primary text-base">12.450 kg</p>
</div>
<div>
<p class="font-label-caps text-outline mb-1">Dipesan (Penjualan)</p>
<p class="font-table-data text-[#7C4824]">2.000 kg</p>
</div>
<div>
<p class="font-label-caps text-outline mb-1">Rusak/Susut</p>
<p class="font-table-data text-error">0.550 kg</p>
</div>
</div>
<div class="mt-4 pt-3 border-t border-dashed border-surface-container">
<div class="flex justify-between items-center text-[11px] text-secondary">
<span>Verifikasi berat terakhir:</span>
<span class="font-medium">Hari ini, 09:45 WIB</span>
</div>
</div>
</section>
</div>
<!-- Movement History Timeline -->
<section class="bg-white border border-outline-variant rounded-lg p-5">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary" data-icon="route">route</span>
<h2 class="font-h2 text-primary">Lini Masa Pergerakan &amp; Pemrosesan</h2>
</div>
<button class="text-xs font-bold text-[#0D5E67] uppercase tracking-wider hover:underline">Lihat Log Lengkap</button>
</div>
<div class="space-y-6 pl-2 relative">
<!-- Timeline items -->
<div class="timeline-item flex gap-4 relative timeline-line pb-6">
<div class="z-10 h-6 w-6 rounded-full bg-primary flex items-center justify-center border-4 border-white">
<span class="material-symbols-outlined text-[12px] text-white" data-icon="check" data-weight="fill">check</span>
</div>
<div class="flex-1 -mt-0.5">
<div class="flex justify-between">
<p class="font-table-data text-on-surface">Alokasi Penjualan (LOT-RES-99)</p>
<span class="text-[11px] text-secondary">21 Okt, 14:20</span>
</div>
<p class="text-body-sm text-secondary mt-1">2.000 kg dialokasikan untuk Pesanan #ORD-552. Dipesan di Zona B-4.</p>
</div>
</div>
<div class="timeline-item flex gap-4 relative timeline-line pb-6">
<div class="z-10 h-6 w-6 rounded-full bg-primary flex items-center justify-center border-4 border-white">
<span class="material-symbols-outlined text-[12px] text-white" data-icon="check" data-weight="fill">check</span>
</div>
<div class="flex-1 -mt-0.5">
<div class="flex justify-between">
<p class="font-table-data text-on-surface">Perpindahan Gudang</p>
<span class="text-[11px] text-secondary">18 Okt, 09:12</span>
</div>
<p class="text-body-sm text-secondary mt-1">Dipindahkan dari Ruang Pengeringan ke Ruang Dingin Zona B-4.</p>
</div>
</div>
<div class="timeline-item flex gap-4 relative timeline-line pb-6">
<div class="z-10 h-6 w-6 rounded-full bg-primary flex items-center justify-center border-4 border-white">
<span class="material-symbols-outlined text-[12px] text-white" data-icon="check" data-weight="fill">check</span>
</div>
<div class="flex-1 -mt-0.5">
<div class="flex justify-between">
<p class="font-table-data text-on-surface">Penyortiran &amp; Penentuan Kualitas Selesai</p>
<span class="text-[11px] text-secondary">15 Okt, 11:30</span>
</div>
<p class="text-body-sm text-secondary mt-1">Lot dipecah dari Induk LOT-RAW-442. Disertifikasi sebagai Kualitas Super A++.</p>
</div>
</div>
<div class="timeline-item flex gap-4 relative timeline-line">
<div class="z-10 h-6 w-6 rounded-full bg-secondary flex items-center justify-center border-4 border-white">
<span class="material-symbols-outlined text-[12px] text-white" data-icon="login">login</span>
</div>
<div class="flex-1 -mt-0.5">
<div class="flex justify-between">
<p class="font-table-data text-on-surface">Penerimaan Awal</p>
<span class="text-[11px] text-secondary">14 Okt, 08:00</span>
</div>
<p class="text-body-sm text-secondary mt-1">Bahan mentah diterima dari Borneo Harvest Co. Berat: 15.000 kg.</p>
</div>
</div>
</div>
</section>
</div>
<!-- Right Column: Sidebar Actions & Traceability -->
<div class="col-span-12 lg:col-span-4 space-y-gutter">
<!-- Actions Panel -->
<section class="bg-[#0D5E67] rounded-lg p-5 text-white shadow-md">
<h2 class="font-h2 text-white mb-4 flex items-center gap-2">
<span class="material-symbols-outlined text-white" data-icon="bolt">bolt</span>
Aksi Cepat
</h2>
<div class="space-y-3">
<button class="w-full bg-white/10 hover:bg-white/20 text-white font-bold py-3 rounded border border-white/20 flex items-center px-4 gap-3 transition-colors text-sm">
<span class="material-symbols-outlined" data-icon="print">print</span>
Cetak Label QR
</button>
<button class="w-full bg-white/10 hover:bg-white/20 text-white font-bold py-3 rounded border border-white/20 flex items-center px-4 gap-3 transition-colors text-sm">
<span class="material-symbols-outlined" data-icon="sync_alt">sync_alt</span>
Pindah Lokasi
</button>
<button class="w-full bg-white/10 hover:bg-white/20 text-white font-bold py-3 rounded border border-white/20 flex items-center px-4 gap-3 transition-colors text-sm">
<span class="material-symbols-outlined" data-icon="edit_square">edit_square</span>
Ubah Kualitas / Sortir
</button>
<button class="w-full bg-[#FFDAD6] hover:bg-[#FFB4AB] text-[#93000A] font-bold py-3 rounded flex items-center px-4 gap-3 transition-colors text-sm">
<span class="material-symbols-outlined" data-icon="pan_tool">pan_tool</span>
Tahan Lot
</button>
</div>
</section>
<!-- Traceability Tree -->
<section class="bg-white border border-outline-variant rounded-lg p-5">
<div class="flex items-center gap-2 mb-5">
<span class="material-symbols-outlined text-primary" data-icon="account_tree">account_tree</span>
<h2 class="font-h2 text-primary">Silsilah</h2>
</div>
<div class="space-y-6">
<!-- Origin -->
<div>
<p class="font-label-caps text-outline uppercase mb-2">Asal (Induk)</p>
<div class="p-3 border border-dashed border-primary/30 rounded bg-primary/5 flex justify-between items-center">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-primary text-sm" data-icon="subdirectory_arrow_right">subdirectory_arrow_right</span>
<span class="font-table-data text-primary">LOT-RAW-442</span>
</div>
<span class="material-symbols-outlined text-outline cursor-pointer" data-icon="visibility">visibility</span>
</div>
</div>
<!-- Children -->
<div>
<p class="font-label-caps text-outline uppercase mb-2">Pecahan (Anak)</p>
<div class="space-y-2">
<div class="p-3 border border-surface-container rounded flex justify-between items-center group hover:bg-surface-container-low transition-colors">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-secondary text-sm" data-icon="chevron_right">chevron_right</span>
<span class="font-table-data text-on-surface">LOT-SAL-8821</span>
</div>
<span class="text-[11px] text-secondary">Siap Ekspor</span>
</div>
<div class="p-3 border border-surface-container rounded flex justify-between items-center group hover:bg-surface-container-low transition-colors">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-secondary text-sm" data-icon="chevron_right">chevron_right</span>
<span class="font-table-data text-on-surface">LOT-SAL-8822</span>
</div>
<span class="text-[11px] text-secondary">Menunggu QC</span>
</div>
<p class="text-[11px] text-center text-secondary py-1 italic">Akhir Silsilah</p>
</div>
</div>
</div>
</section>
<!-- QR Preview Decorative Card -->
<section class="bg-surface-container-high rounded-lg p-5 border border-outline-variant flex flex-col items-center">
<div class="bg-white p-4 rounded shadow-inner mb-4 w-40 h-40 flex items-center justify-center">
<img alt="Kode QR" class="w-full h-full opacity-80" data-alt="crisp black and white qr code centered on a clean white background with technical detail" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBSJS3qNrm63SEXbJ1lYDrJKwBXXyfWSC_UfWLYBEV40xSxNJy5tFptW0O3EXSFG24UB1TGmBWE2yIwztGUP119rFanYrw3iVBwelWbMLPjbbmALs5-mX1lnYM9_Skc18sM1K3uXVky2awroJhwz5xEC6BiwbhfGLqg5tzbup9-Bzhc9vKdTbJoy5Fz24OiwUtyLlRorFTPGvQSa09VkM4pIdiX_UiZcJn9m4UWuJdP4FAQUCOZ2DOAAXES-FbHFKtiYLpq5rfwuQ"/>
</div>
<p class="font-label-caps text-outline text-center">Label Dibuat Sistem</p>
<p class="font-table-data text-on-surface-variant text-center mt-1">ID: LW-23-0892</p>
</section>
</div>
</div>
</div>
</main>
</body></html>
Reference in New Issue View Git Blame Copy Permalink