Initial import of AbelBirdNest Stock
This commit is contained in:
452
design-assets/stitch_abel_stock/laporan_penelusuran_2/code.html
Normal file
452
design-assets/stitch_abel_stock/laporan_penelusuran_2/code.html
Normal file
@ -0,0 +1,452 @@
|
||||
<!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": "#4e6073",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"outline": "#6f797a",
|
||||
"background": "#f8fafa",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"error-container": "#ffdad6",
|
||||
"tertiary": "#60320f",
|
||||
"on-secondary-container": "#526478",
|
||||
"surface-container": "#eceeee",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"on-error-container": "#93000a",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"surface-tint": "#1d6871",
|
||||
"on-primary-container": "#92d5df",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"inverse-surface": "#2e3131",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"on-surface": "#191c1d",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"surface": "#f8fafa",
|
||||
"primary-container": "#0d5e67",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"error": "#ba1a1a",
|
||||
"surface-bright": "#f8fafa",
|
||||
"primary": "#00454c",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"on-error": "#ffffff",
|
||||
"surface-variant": "#e1e3e3",
|
||||
"on-background": "#191c1d",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-dim": "#d8dadb",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-container": "#7c4824"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"compact-padding": "8px",
|
||||
"row-height-sm": "32px",
|
||||
"row-height-md": "48px",
|
||||
"container-margin": "24px",
|
||||
"gutter": "16px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-base": ["Inter"],
|
||||
"h1": ["Inter"],
|
||||
"display-lot": ["Inter"],
|
||||
"table-data": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"h2": ["Inter"],
|
||||
"label-caps": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"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"}],
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
font-size: 20px;
|
||||
}
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body-base text-on-surface antialiased overflow-hidden">
|
||||
<!-- Sidebar Navigation -->
|
||||
<aside class="fixed left-0 top-0 h-full w-64 border-r border-slate-200 bg-slate-50 flex flex-col h-screen py-4 z-50">
|
||||
<div class="px-6 mb-8">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="h-8 w-8 bg-primary flex items-center justify-center rounded-lg">
|
||||
<span class="material-symbols-outlined text-white" data-icon="bird">flight</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-teal-900 font-black text-sm tracking-tight leading-tight">Walet Operations</h2>
|
||||
<p class="text-[10px] text-slate-500 font-medium">V1.0.4-Operational</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 px-3 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 text-slate-600 hover:bg-slate-100 hover:text-teal-600 duration-150 ease-in-out font-inter text-[13px] font-medium rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 text-slate-600 hover:bg-slate-100 hover:text-teal-600 duration-150 ease-in-out font-inter text-[13px] font-medium rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
|
||||
<span>Inventory Stock</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 bg-teal-50 text-teal-700 border-r-4 border-teal-600 duration-150 ease-in-out font-inter text-[13px] font-semibold rounded-l-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="account_tree">account_tree</span>
|
||||
<span>Traceability Logs</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 text-slate-600 hover:bg-slate-100 hover:text-teal-600 duration-150 ease-in-out font-inter text-[13px] font-medium rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="database">database</span>
|
||||
<span>Master Data</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 text-slate-600 hover:bg-slate-100 hover:text-teal-600 duration-150 ease-in-out font-inter text-[13px] font-medium rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="qr_code_scanner">qr_code_scanner</span>
|
||||
<span>Barcode Scanner</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-3 pt-4 mt-4 border-t border-slate-200">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 text-slate-600 hover:bg-slate-100 duration-150 ease-in-out font-inter text-[13px] font-medium rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
<span>Support</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 text-slate-600 hover:bg-slate-100 duration-150 ease-in-out font-inter text-[13px] font-medium rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="logout">logout</span>
|
||||
<span>Sign Out</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="ml-64 flex-1 flex flex-col h-screen">
|
||||
<!-- Top Navigation Bar -->
|
||||
<header class="bg-white border-b border-slate-200 shadow-sm flex items-center justify-between px-6 h-14 w-full z-40 sticky top-0">
|
||||
<div class="flex items-center gap-4">
|
||||
<h1 class="font-inter text-lg font-bold tracking-tight text-teal-800">SarangTrace ERP</h1>
|
||||
<div class="h-6 w-px bg-slate-200"></div>
|
||||
<div class="flex items-center bg-slate-100 rounded-md px-3 py-1.5 w-64">
|
||||
<span class="material-symbols-outlined text-slate-400 mr-2" data-icon="search">search</span>
|
||||
<input class="bg-transparent border-none text-body-sm focus:ring-0 p-0 w-full placeholder:text-slate-400" placeholder="Cari Lot Code..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="relative p-2 text-slate-500 hover:bg-slate-50 transition-colors rounded-full active:opacity-80">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
<span class="absolute top-1.5 right-1.5 w-2 h-2 bg-error rounded-full border-2 border-white"></span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-50 transition-colors rounded-full active:opacity-80">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
</button>
|
||||
<div class="h-8 w-8 rounded-full overflow-hidden border border-slate-200">
|
||||
<img alt="User Profile" class="w-full h-full object-cover" data-alt="professional portrait of a warehouse manager in a bright office setting with corporate attire" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBC4Ua3ZmuYLDZnlhk4RiDUhyjHFQAb84KXK1xMZ3urEylTDVFoGkAOJgv-de-jBgPMEyUH82FUrJXeobkimYYx9G2fFJ6wzG_F1NaUpnFFzHhoR9MPBI0S-g_e_gx6qmmny7mx9w1umGeFKJe-uy_NoOOAL3GYt10FySNtjNWFewWWbXYYBsQJDE-38NmglGc5aRsD0jfuL1rDAyO7oFkAqUe-zBopLf8lDKA0_HcmWE1z_WRBmi9CE2xK-sYGnqV-xLTDUAXCPg"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Page Canvas -->
|
||||
<div class="flex-1 overflow-y-auto p-container-margin">
|
||||
<!-- Page Header & Filters -->
|
||||
<div class="flex flex-col gap-6 mb-8">
|
||||
<div class="flex justify-between items-end">
|
||||
<div>
|
||||
<p class="text-label-caps text-secondary uppercase font-bold tracking-wider mb-1">AUDIT & TRACEABILITY</p>
|
||||
<h2 class="font-h1 text-h1 text-on-surface">Laporan Penelusuran (Traceability)</h2>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="flex items-center gap-2 px-4 py-2 border border-primary text-primary font-medium text-body-sm rounded-lg hover:bg-primary-fixed/20 transition-all">
|
||||
<span class="material-symbols-outlined" data-icon="download">download</span>
|
||||
Export PDF
|
||||
</button>
|
||||
<button class="flex items-center gap-2 px-4 py-2 bg-primary text-white font-medium text-body-sm rounded-lg hover:opacity-90 active:opacity-80 shadow-sm transition-all">
|
||||
<span class="material-symbols-outlined" data-icon="print">print</span>
|
||||
Cetak Laporan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Filter Panel -->
|
||||
<div class="bg-white border border-slate-200 rounded-xl p-4 shadow-sm grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-label-caps text-slate-500">LOT CODE</label>
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" data-icon="qr_code">qr_code</span>
|
||||
<input class="w-full pl-10 pr-3 py-2 border border-slate-200 rounded-lg text-body-sm focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all" placeholder="Contoh: LOT-W-2023-089" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-label-caps text-slate-500">SUPPLIER / SUMBER</label>
|
||||
<select class="w-full px-3 py-2 border border-slate-200 rounded-lg text-body-sm focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all">
|
||||
<option>Semua Supplier</option>
|
||||
<option>Farm Mandiri - Sukabumi</option>
|
||||
<option>UD. Walet Lestari</option>
|
||||
<option>Peternak Rakyat Jatim</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-label-caps text-slate-500">CUSTOMER</label>
|
||||
<select class="w-full px-3 py-2 border border-slate-200 rounded-lg text-body-sm focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all">
|
||||
<option>Semua Customer</option>
|
||||
<option>Global Bird's Nest Ltd</option>
|
||||
<option>China Export Trading</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-label-caps text-slate-500">RENTANG TANGGAL</label>
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" data-icon="calendar_today">calendar_today</span>
|
||||
<input class="w-full pl-10 pr-3 py-2 border border-slate-200 rounded-lg text-body-sm focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all" placeholder="01 Jan 2024 - 31 Jan 2024" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Traceability Timeline / Bento Grid -->
|
||||
<div class="grid grid-cols-12 gap-gutter">
|
||||
<!-- Summary Card -->
|
||||
<div class="col-span-12 lg:col-span-4 space-y-gutter">
|
||||
<div class="bg-primary-container p-6 rounded-xl border border-primary/20 relative overflow-hidden">
|
||||
<div class="relative z-10">
|
||||
<span class="text-white/80 font-label-caps">STATUS SAAT INI</span>
|
||||
<h3 class="text-display-lot text-white mt-1">LOT-2023-AX78</h3>
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-label-caps">SIAP EKSPOR</span>
|
||||
<span class="text-white/60 text-body-sm">| Update 2 Jam yang lalu</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined absolute -bottom-4 -right-4 text-9xl text-white/10 rotate-12" data-icon="inventory">inventory</span>
|
||||
</div>
|
||||
<div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
|
||||
<h3 class="font-h2 text-h2 mb-4">Detail Material</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between pb-2 border-b border-slate-50">
|
||||
<span class="text-body-sm text-slate-500">Jenis</span>
|
||||
<span class="text-body-sm font-bold">Mangkok Putih A</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-2 border-b border-slate-50">
|
||||
<span class="text-body-sm text-slate-500">Total Berat (In)</span>
|
||||
<span class="text-body-sm font-bold">25.40 kg</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-2 border-b border-slate-50">
|
||||
<span class="text-body-sm text-slate-500">Total Berat (Out)</span>
|
||||
<span class="text-body-sm font-bold">22.15 kg</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-2 border-b border-slate-50">
|
||||
<span class="text-body-sm text-slate-500">Kadar Air</span>
|
||||
<span class="text-body-sm font-bold">11% - 13%</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-body-sm text-slate-500">Efisiensi</span>
|
||||
<span class="text-body-sm font-bold text-teal-600">87.2%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Timeline View -->
|
||||
<div class="col-span-12 lg:col-span-8">
|
||||
<div class="bg-white border border-slate-200 rounded-xl p-6 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<h3 class="font-h2 text-h2">Alur Genealogi Lot</h3>
|
||||
<div class="flex gap-2">
|
||||
<span class="flex items-center gap-1.5 text-label-caps text-slate-500">
|
||||
<span class="w-3 h-3 rounded-full bg-blue-500"></span> Supplier
|
||||
</span>
|
||||
<span class="flex items-center gap-1.5 text-label-caps text-slate-500">
|
||||
<span class="w-3 h-3 rounded-full bg-orange-500"></span> Proses
|
||||
</span>
|
||||
<span class="flex items-center gap-1.5 text-label-caps text-slate-500">
|
||||
<span class="w-3 h-3 rounded-full bg-teal-500"></span> Keluar
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Vertical Timeline -->
|
||||
<div class="relative pl-8 space-y-10 before:content-[''] before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-[2px] before:bg-slate-100">
|
||||
<!-- Node: Lot In -->
|
||||
<div class="relative">
|
||||
<div class="absolute -left-[32px] top-0 w-6 h-6 rounded-full bg-blue-500 border-4 border-white shadow-sm flex items-center justify-center z-10"></div>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-table-data font-bold text-blue-700">LOT IN (Penerimaan Material)</h4>
|
||||
<p class="text-body-sm font-semibold mt-1">Farm Mandiri - Sukabumi</p>
|
||||
<p class="text-[12px] text-slate-500">Lot ID: <span class="font-mono">FMS-23-001</span> • 25.40 kg • Grade Raw</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="text-[11px] font-bold text-slate-400 block">12 OKT 2023</span>
|
||||
<span class="text-[11px] text-slate-400 block">08:45 WIB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Node: Transformation 1 -->
|
||||
<div class="relative">
|
||||
<div class="absolute -left-[32px] top-0 w-6 h-6 rounded-full bg-orange-500 border-4 border-white shadow-sm flex items-center justify-center z-10"></div>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-table-data font-bold text-orange-700">PENCUCIAN & PEMBERSIHAN</h4>
|
||||
<p class="text-body-sm font-semibold mt-1">Workstation A-04 (Anto S.)</p>
|
||||
<p class="text-[12px] text-slate-500">Penyusutan: 1.2 kg • Status: Selesai</p>
|
||||
<!-- Sub-component: Transformation Detail -->
|
||||
<div class="mt-3 bg-slate-50 p-3 rounded border border-slate-100 text-[12px] max-w-md">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="material-symbols-outlined text-[14px] text-slate-400" data-icon="info">info</span>
|
||||
<span class="font-bold text-slate-600">Catatan QC:</span>
|
||||
</div>
|
||||
Tingkat kebersihan optimal, bulu ringan minim. Siap proses grading.
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="text-[11px] font-bold text-slate-400 block">14 OKT 2023</span>
|
||||
<span class="text-[11px] text-slate-400 block">13:20 WIB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Node: Transformation 2 (Regrading) -->
|
||||
<div class="relative">
|
||||
<div class="absolute -left-[32px] top-0 w-6 h-6 rounded-full bg-orange-500 border-4 border-white shadow-sm flex items-center justify-center z-10"></div>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-table-data font-bold text-orange-700">REGRADING (Penyortiran Kualitas)</h4>
|
||||
<p class="text-body-sm font-semibold mt-1">Lab Quality Control</p>
|
||||
<div class="mt-2 flex gap-2">
|
||||
<span class="bg-teal-50 text-teal-700 px-2 py-0.5 rounded text-[10px] font-bold">MANGKOK A: 18kg</span>
|
||||
<span class="bg-amber-50 text-amber-700 px-2 py-0.5 rounded text-[10px] font-bold">SUDUT: 4.15kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="text-[11px] font-bold text-slate-400 block">15 OKT 2023</span>
|
||||
<span class="text-[11px] text-slate-400 block">10:00 WIB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Node: Lot Out -->
|
||||
<div class="relative">
|
||||
<div class="absolute -left-[32px] top-0 w-6 h-6 rounded-full bg-teal-500 border-4 border-white shadow-sm flex items-center justify-center z-10"></div>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-table-data font-bold text-teal-700">LOT OUT (Pengiriman/Ekspor)</h4>
|
||||
<p class="text-body-sm font-semibold mt-1">Global Bird's Nest Ltd (Hong Kong)</p>
|
||||
<p class="text-[12px] text-slate-500">Invoice: <span class="font-mono">INV/EXP/10/2023-99</span> • Ship via: Air Cargo</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="text-[11px] font-bold text-slate-400 block">20 OKT 2023</span>
|
||||
<span class="text-[11px] text-slate-400 block">15:45 WIB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Detailed Table View -->
|
||||
<div class="mt-gutter">
|
||||
<div class="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm">
|
||||
<div class="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
|
||||
<h3 class="font-h2 text-h2">Daftar Transformasi Detail</h3>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-body-sm text-slate-400">Tampilan Baris:</span>
|
||||
<select class="text-body-sm border-slate-200 rounded p-1">
|
||||
<option>Compact</option>
|
||||
<option>Standard</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left">
|
||||
<thead class="bg-slate-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-label-caps text-slate-500 border-b border-slate-200">ID Aktivitas</th>
|
||||
<th class="px-6 py-3 text-label-caps text-slate-500 border-b border-slate-200">Operator</th>
|
||||
<th class="px-6 py-3 text-label-caps text-slate-500 border-b border-slate-200">Tahapan</th>
|
||||
<th class="px-6 py-3 text-label-caps text-slate-500 border-b border-slate-200">Input (kg)</th>
|
||||
<th class="px-6 py-3 text-label-caps text-slate-500 border-b border-slate-200">Output (kg)</th>
|
||||
<th class="px-6 py-3 text-label-caps text-slate-500 border-b border-slate-200">Loss (%)</th>
|
||||
<th class="px-6 py-3 text-label-caps text-slate-500 border-b border-slate-200">Status QC</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-compact-padding font-mono text-table-data text-slate-600">ACT-90234</td>
|
||||
<td class="px-6 py-compact-padding text-table-data">Budi Santoso</td>
|
||||
<td class="px-6 py-compact-padding text-table-data">Pembersihan Bulu</td>
|
||||
<td class="px-6 py-compact-padding text-table-data text-right">25.40</td>
|
||||
<td class="px-6 py-compact-padding text-table-data text-right">24.20</td>
|
||||
<td class="px-6 py-compact-padding text-table-data text-right">4.72%</td>
|
||||
<td class="px-6 py-compact-padding">
|
||||
<span class="px-2 py-0.5 rounded-full bg-green-50 text-green-700 text-[11px] font-bold">LULUS</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-compact-padding font-mono text-table-data text-slate-600">ACT-90288</td>
|
||||
<td class="px-6 py-compact-padding text-table-data">Siti Aminah</td>
|
||||
<td class="px-6 py-compact-padding text-table-data">Pengeringan</td>
|
||||
<td class="px-6 py-compact-padding text-table-data text-right">24.20</td>
|
||||
<td class="px-6 py-compact-padding text-table-data text-right">22.85</td>
|
||||
<td class="px-6 py-compact-padding text-table-data text-right">5.58%</td>
|
||||
<td class="px-6 py-compact-padding">
|
||||
<span class="px-2 py-0.5 rounded-full bg-green-50 text-green-700 text-[11px] font-bold">LULUS</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-compact-padding font-mono text-table-data text-slate-600">ACT-90312</td>
|
||||
<td class="px-6 py-compact-padding text-table-data">Rian Pratama</td>
|
||||
<td class="px-6 py-compact-padding text-table-data">Grading Akhir</td>
|
||||
<td class="px-6 py-compact-padding text-table-data text-right">22.85</td>
|
||||
<td class="px-6 py-compact-padding text-table-data text-right">22.15</td>
|
||||
<td class="px-6 py-compact-padding text-table-data text-right">3.06%</td>
|
||||
<td class="px-6 py-compact-padding">
|
||||
<span class="px-2 py-0.5 rounded-full bg-blue-50 text-blue-700 text-[11px] font-bold">DITINJAU</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Floating Tooltip / Alert (Optional Contextual Information) -->
|
||||
<div class="fixed bottom-6 right-6 z-40 bg-white border border-slate-200 rounded-xl shadow-lg p-4 max-w-sm flex gap-4 items-start border-l-4 border-l-teal-600">
|
||||
<div class="p-2 bg-teal-50 rounded-lg text-teal-600">
|
||||
<span class="material-symbols-outlined" data-icon="verified">verified</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-body-sm text-teal-900">Validasi Audit Berhasil</h4>
|
||||
<p class="text-[12px] text-slate-500 leading-normal mt-1">Sertifikasi nomor SNI-8922/WLT-23 telah diverifikasi untuk rantai pasok lot ini.</p>
|
||||
</div>
|
||||
<button class="text-slate-400 hover:text-slate-600">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="close">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user