260 lines
13 KiB
HTML
260 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="id"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Sarang Ops - Layar Picking</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": {
|
|
"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;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
body { font-family: 'Inter', sans-serif; }
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background min-h-screen flex flex-col">
|
|
<!-- Top Navigation Bar (Shared Component) -->
|
|
<header class="flex justify-between items-center h-14 px-6 w-full bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 shadow-sm fixed top-0 z-40">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-[#0D5E67] cursor-pointer" data-icon="arrow_back">arrow_back</span>
|
|
<div class="flex flex-col">
|
|
<span class="text-lg font-bold text-[#0D5E67] dark:text-white tracking-tight">SO-2023-0892</span>
|
|
<span class="font-label-caps text-[10px] text-slate-500 uppercase">Sales Order</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<span class="material-symbols-outlined text-slate-600 dark:text-slate-400 cursor-pointer" data-icon="help_outline">help_outline</span>
|
|
<div class="w-8 h-8 rounded-full overflow-hidden border border-slate-200">
|
|
<img alt="User profile" data-alt="Professional warehouse supervisor portrait, clean lighting, corporate style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCCkepvjR3I1p1wdJoIsFS8IwnyZQxlMnyYHJqw49QRUHHDhreZhQW37jb1v8LskeLDEXCYCRIYH2bHl96R0-FR7o3F-iM-S7yIcMfVUhf5_TZQ5-9fonMWY8RuDfQhE-si_sbADGtaDFdtxNwDDoON5Pv_2_D4-P1O5CuG6c6ya8-hq7mHSpXrQ8MAwXvl_uEl0fIBWq9ttAK1oL2HeksnxrWsEAcvmyZTunSun7dgqQxh5JAEDi0l72wB9XXpb7NgkMK8pUvcBQ"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Canvas -->
|
|
<main class="flex-grow pt-20 pb-24 px-4 max-w-md mx-auto w-full">
|
|
<!-- Progress Summary Card -->
|
|
<section class="bg-white rounded-xl border border-outline-variant p-4 mb-6 shadow-sm">
|
|
<div class="flex justify-between items-center mb-3">
|
|
<h2 class="font-h2 text-on-surface">Progres Pengambilan</h2>
|
|
<span class="font-display-lot text-primary">2/5 <span class="text-body-sm font-normal text-slate-500">Item</span></span>
|
|
</div>
|
|
<div class="w-full bg-surface-container-high rounded-full h-2.5">
|
|
<div class="bg-primary h-2.5 rounded-full" style="width: 40%"></div>
|
|
</div>
|
|
<div class="flex justify-between mt-2">
|
|
<span class="text-body-sm text-slate-500">40% Selesai</span>
|
|
<span class="text-body-sm text-slate-500">3 Tersisa</span>
|
|
</div>
|
|
</section>
|
|
<!-- QR Scanner Area -->
|
|
<section class="mb-6">
|
|
<div class="relative rounded-xl overflow-hidden aspect-square bg-black flex items-center justify-center border-4 border-primary/20">
|
|
<div class="absolute inset-0 opacity-40">
|
|
<img class="w-full h-full object-cover" data-alt="Close up of a person using a mobile phone to scan a QR code on a package in a warehouse" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCijmxb9rtn-wW11U0C9Equb_H6JTRcUEKWd38nCFMJGCHFHVRpCNtclbCqcihhPopzqj-QPGjV5bhf7nJfvQ91sFUB_ikXaYKtYRArdGihBpEM-GA1R9_XJAJhhrURDw7Hu6UxlBlsAqc9xa2NNWAT_VaMaOR0hTD9-KWkrBLzXHk0vBr8F_XcMdf5RvAVmYpg0IjOemal9IyBq0LPqI9q7NvYNFToyeOrdV3KPUd-XTx-DzYC88FVzDuvee2VAgF4MpAByF76_Q"/>
|
|
</div>
|
|
<!-- Scanner Overlay -->
|
|
<div class="relative z-10 w-48 h-48 border-2 border-white/80 rounded-lg">
|
|
<div class="absolute -top-1 -left-1 w-6 h-6 border-t-4 border-l-4 border-primary-fixed-dim"></div>
|
|
<div class="absolute -top-1 -right-1 w-6 h-6 border-t-4 border-r-4 border-primary-fixed-dim"></div>
|
|
<div class="absolute -bottom-1 -left-1 w-6 h-6 border-b-4 border-l-4 border-primary-fixed-dim"></div>
|
|
<div class="absolute -bottom-1 -right-1 w-6 h-6 border-b-4 border-r-4 border-primary-fixed-dim"></div>
|
|
<!-- Scanning Line -->
|
|
<div class="w-full h-0.5 bg-primary-fixed-dim shadow-[0_0_15px_#8ed1db] absolute top-1/2 -translate-y-1/2"></div>
|
|
</div>
|
|
<div class="absolute bottom-4 left-0 right-0 text-center">
|
|
<span class="bg-black/60 text-white px-3 py-1 rounded-full text-body-sm backdrop-blur-sm">Scan QR Code pada Lot</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Item List / Picking Queue -->
|
|
<div class="space-y-4">
|
|
<h3 class="font-label-caps text-slate-500 mb-2">DAFTAR ITEM TERJADWAL</h3>
|
|
<!-- Item Card: Active/Next -->
|
|
<div class="bg-white border-2 border-primary rounded-xl p-4 shadow-sm relative overflow-hidden">
|
|
<div class="absolute top-0 right-0 bg-primary text-white px-3 py-1 text-[10px] font-bold rounded-bl-lg">AKTIF</div>
|
|
<div class="flex justify-between items-start mb-2">
|
|
<div>
|
|
<span class="font-display-lot text-lg block">LOT-SW-23110</span>
|
|
<span class="font-label-caps text-primary">GRADE AAA+</span>
|
|
</div>
|
|
<div class="text-right">
|
|
<span class="font-label-caps text-slate-500 block">LOKASI RAK</span>
|
|
<span class="font-h2 text-primary">A1-22-B</span>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 py-3 border-y border-slate-100 my-3">
|
|
<div class="flex flex-col">
|
|
<span class="text-body-sm text-slate-500">Target Qty</span>
|
|
<span class="font-table-data text-base">5.00 kg</span>
|
|
</div>
|
|
<div class="flex flex-col border-l border-slate-100 pl-4">
|
|
<span class="text-body-sm text-slate-500">Diambil</span>
|
|
<div class="flex items-center gap-2">
|
|
<input class="w-20 h-8 border-slate-200 rounded text-table-data text-primary focus:ring-primary focus:border-primary" type="number" value="5.00"/>
|
|
<span class="text-body-sm font-bold">kg</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="w-full bg-primary text-white font-h2 py-3 rounded-lg flex justify-center items-center gap-2 active:scale-95 transition-transform">
|
|
<span class="material-symbols-outlined" data-icon="check_circle">check_circle</span>
|
|
Konfirmasi Pengambilan
|
|
</button>
|
|
</div>
|
|
<!-- Item Card: Pending -->
|
|
<div class="bg-slate-50 border border-outline-variant rounded-xl p-4 opacity-75">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<span class="font-h2 block text-slate-700">LOT-SW-23111</span>
|
|
<span class="font-label-caps text-slate-500">GRADE AA</span>
|
|
</div>
|
|
<div class="text-right">
|
|
<span class="font-label-caps text-slate-400 block">LOKASI RAK</span>
|
|
<span class="font-h2 text-slate-600">B2-04-A</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-between mt-3 text-body-sm">
|
|
<span class="text-slate-500">Target: 2.50 kg</span>
|
|
<span class="text-slate-400 italic">Antre</span>
|
|
</div>
|
|
</div>
|
|
<!-- Item Card: Completed -->
|
|
<div class="bg-secondary-container/20 border border-secondary-container rounded-xl p-4">
|
|
<div class="flex justify-between items-center">
|
|
<div class="flex items-center gap-3">
|
|
<div class="bg-green-100 text-green-700 p-1 rounded-full">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="done">done</span>
|
|
</div>
|
|
<div>
|
|
<span class="font-h2 block text-slate-400 line-through">LOT-SW-23098</span>
|
|
<span class="font-label-caps text-slate-400">SELESAI (1.20 kg)</span>
|
|
</div>
|
|
</div>
|
|
<span class="text-[10px] bg-white border border-slate-200 text-slate-400 px-2 py-1 rounded">08:45 WIB</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Bottom Navigation Bar (Shared Component - Mobile Only View) -->
|
|
<nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-slate-200 h-16 flex items-center justify-around z-40 md:hidden">
|
|
<div class="flex flex-col items-center justify-center text-slate-500 hover:text-primary transition-colors cursor-pointer">
|
|
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
|
<span class="text-[10px] font-medium mt-0.5">Dashboard</span>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center text-primary transition-colors cursor-pointer border-t-2 border-primary pt-1">
|
|
<span class="material-symbols-outlined" data-icon="inventory">inventory</span>
|
|
<span class="text-[10px] font-bold mt-0.5">Picking</span>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center text-slate-500 hover:text-primary transition-colors cursor-pointer">
|
|
<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
|
|
<span class="text-[10px] font-medium mt-0.5">Inventory</span>
|
|
</div>
|
|
<div class="flex flex-col items-center justify-center text-slate-500 hover:text-primary transition-colors cursor-pointer">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
<span class="text-[10px] font-medium mt-0.5">Settings</span>
|
|
</div>
|
|
</nav>
|
|
<!-- Floating Action Button - Only for main screens -->
|
|
<div class="fixed bottom-20 right-6 z-30">
|
|
<button class="w-14 h-14 bg-primary text-white rounded-full shadow-lg flex items-center justify-center active:scale-90 transition-transform">
|
|
<span class="material-symbols-outlined text-[28px]" data-icon="add_a_photo">add_a_photo</span>
|
|
</button>
|
|
</div>
|
|
</body></html> |