Initial import of AbelBirdNest Stock
This commit is contained in:
420
design-assets/stitch_abel_stock/laporan_penelusuran_1/code.html
Normal file
420
design-assets/stitch_abel_stock/laporan_penelusuran_1/code.html
Normal file
@ -0,0 +1,420 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Laporan Penelusuran - Sistem Inventaris 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&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": {
|
||||
"on-primary-container": "#92d5df",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-tint": "#1d6871",
|
||||
"primary": "#00454c",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"on-background": "#191c1d",
|
||||
"tertiary": "#60320f",
|
||||
"surface": "#f8fafa",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-surface": "#191c1d",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"error": "#ba1a1a",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"error-container": "#ffdad6",
|
||||
"on-error": "#ffffff",
|
||||
"surface-variant": "#e1e3e3",
|
||||
"outline": "#6f797a",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"on-secondary-container": "#526478",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"tertiary-container": "#7c4824",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"surface-bright": "#f8fafa",
|
||||
"secondary": "#4e6073",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"primary-container": "#0d5e67",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"surface-dim": "#d8dadb",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"background": "#f8fafa",
|
||||
"surface-container": "#eceeee",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"inverse-surface": "#2e3131"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter": "16px",
|
||||
"row-height-sm": "32px",
|
||||
"row-height-md": "48px",
|
||||
"container-margin": "24px",
|
||||
"compact-padding": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display-lot": ["Inter"],
|
||||
"h2": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"label-caps": ["Inter"],
|
||||
"body-base": ["Inter"],
|
||||
"table-data": ["Inter"],
|
||||
"h1": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"display-lot": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "500"}],
|
||||
"h1": ["20px", {"lineHeight": "28px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
::-webkit-scrollbar { width: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
|
||||
.trace-line { background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 8px 8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body-base antialiased">
|
||||
<!-- TopNavBar -->
|
||||
<header class="fixed top-0 left-0 w-full z-40 flex justify-between items-center px-6 h-16 bg-white border-b border-slate-200 shadow-sm">
|
||||
<div class="flex items-center gap-4">
|
||||
<img alt="Logo" class="h-10 w-auto" data-alt="Official logo of Sistem Inventaris Walet featuring a minimalist bird icon in teal colors" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD7e9zkXtnDKN_UYutEd5nXQHLSoXwzKxupORW49B9rs31gq2B93kEXiXEzyPhNfAtOgOYx2H1f4xyK_y_yBNbs8TQOvBLmrRI1VsS6ZpDt_uUNo8jP6Mt2fr2sPZOu6PsO9tqhwQ_SbzgI-yBUPh1i-gi7b3tYyxs49LfLMJbmPxXHI0EfPJeFFfb6Xc7MT23tB5Vl3QkODKsDUYPstNY8JP3Mk0H-r8FSz1rn46hfzPT4kCC1LoBgqtRvufB56_0MUZG-CcCE0w"/>
|
||||
<span class="text-xl font-bold text-teal-700 font-inter">Sistem Inventaris Walet</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="relative hidden md:block">
|
||||
<input class="pl-10 pr-4 py-2 border border-outline-variant rounded-lg text-body-sm focus:ring-2 focus:ring-primary-container outline-none w-64 bg-surface-container-lowest" placeholder="Cari Lot ID..." type="text"/>
|
||||
<span class="material-symbols-outlined absolute left-3 top-2.5 text-slate-400">search</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 hover:bg-slate-50 rounded-full transition-colors relative">
|
||||
<span class="material-symbols-outlined text-slate-600">notifications</span>
|
||||
<span class="absolute top-2 right-2 w-2 h-2 bg-error rounded-full"></span>
|
||||
</button>
|
||||
<button class="p-2 hover:bg-slate-50 rounded-full transition-colors">
|
||||
<span class="material-symbols-outlined text-slate-600">help_outline</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-2 bg-primary text-on-primary px-4 py-2 rounded-lg font-h2 active:opacity-80 transition-all">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">qr_code_scanner</span>
|
||||
<span>Scan Barcode</span>
|
||||
</button>
|
||||
<img alt="Profil Pengguna" class="w-10 h-10 rounded-full border border-slate-200" data-alt="Close up professional portrait of a warehouse manager in a clean white uniform" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCAY6P18auIsPE9Jy0cxz2Ufiu06_5HcFhvb_BvOfdNBpu8HjX3nlXuW3UbS58-jV-3ZMbZHyEEccyX7riV5zkXBfV6tO2RrCSSKvZv8_iU-_perAI0eBzXcsA0EK099Si3yH4NgZs46aUOE9dh9WrQYO-lvJlor0LS5YhNBq95e5M2l2Bk-C8YjhS6s191h-OQ1jGUgEqvvzZEgOj53QVCVuGd9jvAexfCeNyxDlYq35dL9m24o-qq-fwMKQ7tAhOkIwOKEoDKLA"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- SideNavBar -->
|
||||
<aside class="fixed left-0 top-0 h-full w-64 flex flex-col py-6 bg-slate-50 border-r border-slate-200 z-30 pt-20">
|
||||
<div class="px-6 mb-8">
|
||||
<h2 class="text-lg font-black text-teal-800 font-inter">Inventory Walet</h2>
|
||||
<p class="text-[10px] font-medium uppercase tracking-widest text-slate-500">Sistem Traceability</p>
|
||||
</div>
|
||||
<nav class="flex-1 px-4 space-y-1">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-all duration-200 rounded-r-lg" href="#">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span class="font-label-caps uppercase">Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-all duration-200 rounded-r-lg" href="#">
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
<span class="font-label-caps uppercase">Laporan Stok</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-all duration-200 rounded-r-lg" href="#">
|
||||
<span class="material-symbols-outlined">database</span>
|
||||
<span class="font-label-caps uppercase">Data Master</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 bg-teal-50 text-teal-700 rounded-r-lg border-l-4 border-teal-700 font-bold" href="#">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">qr_code_scanner</span>
|
||||
<span class="font-label-caps uppercase">Pelacakan</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-all duration-200 rounded-r-lg" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="font-label-caps uppercase">Pengaturan</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-4 mt-auto space-y-1">
|
||||
<button class="w-full mb-4 bg-teal-700 text-white py-3 rounded-lg font-h2 hover:bg-teal-800 transition-colors">
|
||||
Tambah Lot Baru
|
||||
</button>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
<span class="font-label-caps uppercase">Bantuan</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-error hover:bg-red-50 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">logout</span>
|
||||
<span class="font-label-caps uppercase">Log Keluar</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content -->
|
||||
<main class="ml-64 pt-20 p-container-margin">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<!-- Header Section -->
|
||||
<div class="flex justify-between items-end mb-8">
|
||||
<div>
|
||||
<h1 class="font-h1 text-on-surface mb-1">Laporan Penelusuran (Traceability)</h1>
|
||||
<p class="text-body-sm text-on-surface-variant">Lacak riwayat material dari asal pemasok hingga tujuan pengiriman.</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="flex items-center gap-2 border border-outline px-4 py-2 rounded-lg font-h2 text-primary hover:bg-primary-fixed-dim transition-colors">
|
||||
<span class="material-symbols-outlined">download</span>
|
||||
Ekspor PDF
|
||||
</button>
|
||||
<button class="flex items-center gap-2 border border-outline px-4 py-2 rounded-lg font-h2 text-primary hover:bg-primary-fixed-dim transition-colors">
|
||||
<span class="material-symbols-outlined">share</span>
|
||||
Bagikan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Search & Quick Filters -->
|
||||
<div class="grid grid-cols-12 gap-gutter mb-8">
|
||||
<div class="col-span-12 lg:col-span-8 bg-white p-4 rounded-xl shadow-sm border border-outline-variant flex gap-4">
|
||||
<div class="flex-1 relative">
|
||||
<label class="block text-label-caps text-slate-500 mb-1">LOT ID / KODE PRODUKSI</label>
|
||||
<input class="w-full border-none bg-surface-container px-4 py-3 rounded text-display-lot font-display-lot focus:ring-2 focus:ring-teal-700 outline-none" type="text" value="LOT-2023-WB0042"/>
|
||||
<button class="absolute right-3 top-[34px] text-teal-700 hover:text-teal-900">
|
||||
<span class="material-symbols-outlined">search</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="w-px bg-slate-200"></div>
|
||||
<div class="flex flex-col justify-center">
|
||||
<label class="block text-label-caps text-slate-500 mb-1">STATUS SAAT INI</label>
|
||||
<span class="inline-flex items-center gap-1.5 bg-green-100 text-green-800 px-3 py-1 rounded-full text-table-data">
|
||||
<span class="w-2 h-2 bg-green-600 rounded-full"></span>
|
||||
Export Ready
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 lg:col-span-4 bg-primary-container text-white p-4 rounded-xl shadow-sm border border-teal-800 flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-label-caps opacity-80">TOTAL BERAT BERSIH</p>
|
||||
<h2 class="text-3xl font-black">24.50 <span class="text-sm font-normal">kg</span></h2>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-label-caps opacity-80">KADAR AIR</p>
|
||||
<h2 class="text-3xl font-black">8.2 <span class="text-sm font-normal">%</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Traceability Diagram -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-outline-variant p-6 mb-8 overflow-hidden relative">
|
||||
<div class="flex items-center gap-2 mb-8">
|
||||
<span class="material-symbols-outlined text-teal-700">account_tree</span>
|
||||
<h2 class="font-h1 text-slate-800">Diagram Alur Penelusuran</h2>
|
||||
</div>
|
||||
<div class="relative flex justify-between items-start pt-8 pb-12 overflow-x-auto min-w-[800px]">
|
||||
<!-- Horizontal Line -->
|
||||
<div class="absolute top-1/2 left-0 w-full h-[2px] bg-slate-200 -translate-y-12 z-0"></div>
|
||||
<!-- Supplier Node -->
|
||||
<div class="relative z-10 flex flex-col items-center w-1/4">
|
||||
<div class="w-12 h-12 bg-white border-2 border-teal-600 rounded-full flex items-center justify-center mb-4 shadow-md">
|
||||
<span class="material-symbols-outlined text-teal-600">agriculture</span>
|
||||
</div>
|
||||
<div class="bg-white p-3 rounded-lg border border-slate-200 shadow-sm w-48 text-center">
|
||||
<p class="text-label-caps text-teal-700 mb-1">SUMBER ASAL</p>
|
||||
<p class="font-bold text-slate-800">PT. Walet Sejahtera</p>
|
||||
<p class="text-body-sm text-slate-500">Kab. Kotawaringin</p>
|
||||
<div class="mt-2 text-[10px] bg-slate-100 py-1 rounded">ID: SUP-KAL-01</div>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<p class="text-body-sm font-bold text-slate-400 italic">Diterima: 12 Okt 2023</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Warehouse Node -->
|
||||
<div class="relative z-10 flex flex-col items-center w-1/4">
|
||||
<div class="w-12 h-12 bg-white border-2 border-teal-600 rounded-full flex items-center justify-center mb-4 shadow-md">
|
||||
<span class="material-symbols-outlined text-teal-600">warehouse</span>
|
||||
</div>
|
||||
<div class="bg-white p-3 rounded-lg border border-teal-600 shadow-md ring-2 ring-teal-100 w-48 text-center scale-110">
|
||||
<p class="text-label-caps text-teal-700 mb-1">PROSES BERJALAN</p>
|
||||
<p class="font-bold text-slate-800">Gudang Utama (Pusat)</p>
|
||||
<p class="text-body-sm text-slate-500">Sortir & Grading</p>
|
||||
<div class="mt-2 text-[10px] bg-teal-600 text-white py-1 rounded">LOT: 2023-WB0042</div>
|
||||
</div>
|
||||
<div class="mt-6 text-center">
|
||||
<p class="text-body-sm font-bold text-slate-400 italic">Diproses: 14 Okt 2023</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- QC Node -->
|
||||
<div class="relative z-10 flex flex-col items-center w-1/4">
|
||||
<div class="w-12 h-12 bg-white border-2 border-teal-600 rounded-full flex items-center justify-center mb-4 shadow-md">
|
||||
<span class="material-symbols-outlined text-teal-600">verified_user</span>
|
||||
</div>
|
||||
<div class="bg-white p-3 rounded-lg border border-slate-200 shadow-sm w-48 text-center">
|
||||
<p class="text-label-caps text-teal-700 mb-1">PENGECEKAN MUTU</p>
|
||||
<p class="font-bold text-slate-800">Grade AAA - Putih</p>
|
||||
<p class="text-body-sm text-slate-500">Lolos Uji Lab</p>
|
||||
<div class="mt-2 text-[10px] bg-green-100 text-green-800 py-1 rounded">Sertifikat: QC-8821</div>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<p class="text-body-sm font-bold text-slate-400 italic">Disetujui: 16 Okt 2023</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Customer Node -->
|
||||
<div class="relative z-10 flex flex-col items-center w-1/4">
|
||||
<div class="w-12 h-12 bg-slate-100 border-2 border-dashed border-slate-400 rounded-full flex items-center justify-center mb-4">
|
||||
<span class="material-symbols-outlined text-slate-400">local_shipping</span>
|
||||
</div>
|
||||
<div class="bg-slate-50 p-3 rounded-lg border border-dashed border-slate-300 w-48 text-center">
|
||||
<p class="text-label-caps text-slate-400 mb-1">TUJUAN EKSPOR</p>
|
||||
<p class="font-bold text-slate-400">Global Trade Corp</p>
|
||||
<p class="text-body-sm text-slate-400">Hong Kong SAR</p>
|
||||
<div class="mt-2 text-[10px] bg-slate-200 text-slate-500 py-1 rounded">Rencana: 25 Okt 2023</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Detailed History & Specs -->
|
||||
<div class="grid grid-cols-12 gap-gutter">
|
||||
<!-- Log Pergerakan -->
|
||||
<div class="col-span-12 lg:col-span-7 bg-white rounded-xl shadow-sm border border-outline-variant overflow-hidden">
|
||||
<div class="p-4 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
|
||||
<h3 class="font-h2 text-slate-800">Log Aktivitas Detail</h3>
|
||||
<span class="text-body-sm text-slate-500">4 Riwayat Ditemukan</span>
|
||||
</div>
|
||||
<div class="divide-y divide-slate-100">
|
||||
<div class="p-4 hover:bg-slate-50 transition-colors flex gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined text-sm">edit_document</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h4 class="font-bold text-slate-800">Dokumen Ekspor Disiapkan</h4>
|
||||
<span class="text-[11px] text-slate-400">Hari ini, 09:12</span>
|
||||
</div>
|
||||
<p class="text-body-sm text-slate-600">Penerbitan Phytosanitary Certificate dan Packing List untuk Lot 2023-WB0042.</p>
|
||||
<p class="text-[11px] text-slate-400 mt-1 uppercase tracking-tighter">Oleh: Budi Santoso (Admin)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 hover:bg-slate-50 transition-colors flex gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-green-50 text-green-600 flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined text-sm">fact_check</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h4 class="font-bold text-slate-800">Lolos Quality Control</h4>
|
||||
<span class="text-[11px] text-slate-400">16 Okt 2023, 14:30</span>
|
||||
</div>
|
||||
<p class="text-body-sm text-slate-600">Hasil uji nitrit < 30ppm. Warna putih alami, tekstur mangkok sempurna.</p>
|
||||
<p class="text-[11px] text-slate-400 mt-1 uppercase tracking-tighter">Oleh: Dr. Siti Aminah (Lab)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 hover:bg-slate-50 transition-colors flex gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-teal-50 text-teal-600 flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined text-sm">cleaning_services</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h4 class="font-bold text-slate-800">Tahap Pencucian & Pembersihan</h4>
|
||||
<span class="text-[11px] text-slate-400">14 Okt 2023, 08:00</span>
|
||||
</div>
|
||||
<p class="text-body-sm text-slate-600">Pencucian manual menggunakan air RO. Pengeringan pada suhu 40°C.</p>
|
||||
<p class="text-[11px] text-slate-400 mt-1 uppercase tracking-tighter">Oleh: Tim Produksi A</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 hover:bg-slate-50 transition-colors flex gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-orange-50 text-orange-600 flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined text-sm">download_done</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h4 class="font-bold text-slate-800">Penerimaan Bahan Baku</h4>
|
||||
<span class="text-[11px] text-slate-400">12 Okt 2023, 11:20</span>
|
||||
</div>
|
||||
<p class="text-body-sm text-slate-600">Diterima dari PT Walet Sejahtera. Berat kotor: 26.12 kg.</p>
|
||||
<p class="text-[11px] text-slate-400 mt-1 uppercase tracking-tighter">Oleh: Ahmad Fauzi (Logistik)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Informasi Spesifikasi Card -->
|
||||
<div class="col-span-12 lg:col-span-5 space-y-gutter">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-outline-variant p-6">
|
||||
<h3 class="font-h2 text-slate-800 mb-4 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">info</span>
|
||||
Spesifikasi Teknis Lot
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center pb-2 border-b border-slate-50">
|
||||
<span class="text-body-sm text-slate-500">Grade Produk</span>
|
||||
<span class="font-bold text-slate-800">Super AAA - Mangkok</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center pb-2 border-b border-slate-50">
|
||||
<span class="text-body-sm text-slate-500">Metode Pengeringan</span>
|
||||
<span class="font-bold text-slate-800">Heat-Pump Dryers</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center pb-2 border-b border-slate-50">
|
||||
<span class="text-body-sm text-slate-500">Kandungan Nitrit</span>
|
||||
<span class="font-bold text-green-600">22 ppm (Aman)</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center pb-2 border-b border-slate-50">
|
||||
<span class="text-body-sm text-slate-500">Lokasi Penyimpanan</span>
|
||||
<span class="font-bold text-slate-800">Cold Storage - Ruang 02</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-body-sm text-slate-500">ID Sertifikasi</span>
|
||||
<span class="font-bold text-slate-800">GACC-ID-2023-01</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Photo Documentation -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-outline-variant p-6">
|
||||
<h3 class="font-h2 text-slate-800 mb-4 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">image</span>
|
||||
Dokumentasi Visual
|
||||
</h3>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="aspect-square bg-slate-100 rounded-lg overflow-hidden relative group">
|
||||
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300" data-alt="High quality close up of raw edible bird's nest in a wooden crate with sharp details and natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCubNVztzYK7_tACXNrRCF5KdeY5Vx5bdijUUhEk7B6CVxcBLVbnM-dhMjxNpleb5nUXX_N79zm2J5ZeIscxEiC3irKmxavNlJC-j_Mdv545NyEt3HPoKkg9o_WvMZw5us4MgK6DWxIBLPEpj8HgxX5LPM27WlgGttUvuphrTXwWIsITDsUn3ZRfIwH9OzFxoOp9fvdx3wpXaUJUhaspE4c-08UmnJoi5LFjq41B94G3WCiDtjnk5g9J5cMkFsMFBBFq-OfcdeeCQ"/>
|
||||
<div class="absolute bottom-0 left-0 w-full p-2 bg-gradient-to-t from-black/60 to-transparent">
|
||||
<p class="text-[10px] text-white">Bahan Baku</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aspect-square bg-slate-100 rounded-lg overflow-hidden relative group">
|
||||
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300" data-alt="Bird nest cups being processed in a clean, clinical laboratory environment with sterile equipment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCRGHYbwk2awqUrOjo9522Yy4wD9trXbSaQIGZJ8L0Y6U-DB3aEG-fYFXR4rf3s_01GiKC68hyJ5UtlAxHIoj6K7-QhnLoZafp4aiV5tqSqbFE_41DQI4-da616DCWOv_HM63WWfV_6KWKR3yqswECZ_jmWkOTIHJR7EoPIv383z7_x_0aPM15MROhUfZ8ZErRBgyJSMz3YokEd1TDstw8oMATjwJb3-EELOCU1zqZsZMMi_Ehhftud4dFs3fNFGGcgjLkN52K23A"/>
|
||||
<div class="absolute bottom-0 left-0 w-full p-2 bg-gradient-to-t from-black/60 to-transparent">
|
||||
<p class="text-[10px] text-white">Proses QC</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- FAB for quick actions (only on relevant top-level) -->
|
||||
<button class="fixed bottom-8 right-8 w-14 h-14 bg-teal-700 text-white rounded-full shadow-lg flex items-center justify-center hover:bg-teal-800 active:scale-95 transition-all z-50">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'opsz' 40;">add</span>
|
||||
</button>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user