372 lines
21 KiB
HTML
372 lines
21 KiB
HTML
<!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": {
|
|
"surface-variant": "#e1e3e3",
|
|
"tertiary-container": "#7c4824",
|
|
"surface-container-high": "#e6e8e9",
|
|
"on-tertiary-fixed-variant": "#6b3a17",
|
|
"primary": "#00454c",
|
|
"secondary-container": "#cfe2f9",
|
|
"error": "#ba1a1a",
|
|
"outline": "#6f797a",
|
|
"secondary-fixed": "#d1e4fb",
|
|
"tertiary": "#60320f",
|
|
"inverse-on-surface": "#eff1f1",
|
|
"surface-bright": "#f8fafa",
|
|
"on-secondary": "#ffffff",
|
|
"on-primary-fixed": "#001f23",
|
|
"on-primary-container": "#92d5df",
|
|
"on-surface-variant": "#3f484a",
|
|
"on-surface": "#191c1d",
|
|
"tertiary-fixed-dim": "#feb78a",
|
|
"surface-container-highest": "#e1e3e3",
|
|
"primary-fixed": "#aaeef8",
|
|
"surface-dim": "#d8dadb",
|
|
"on-primary-fixed-variant": "#004f57",
|
|
"on-tertiary-fixed": "#311300",
|
|
"surface-container": "#eceeee",
|
|
"primary-fixed-dim": "#8ed1db",
|
|
"inverse-primary": "#8ed1db",
|
|
"on-error-container": "#93000a",
|
|
"secondary": "#4e6073",
|
|
"on-secondary-fixed": "#091d2e",
|
|
"error-container": "#ffdad6",
|
|
"on-secondary-fixed-variant": "#36485b",
|
|
"outline-variant": "#bfc8ca",
|
|
"on-background": "#191c1d",
|
|
"inverse-surface": "#2e3131",
|
|
"on-error": "#ffffff",
|
|
"on-tertiary-container": "#ffbb91",
|
|
"secondary-fixed-dim": "#b5c8df",
|
|
"primary-container": "#0d5e67",
|
|
"background": "#f8fafa",
|
|
"tertiary-fixed": "#ffdbc7",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-tertiary": "#ffffff",
|
|
"on-primary": "#ffffff",
|
|
"surface-tint": "#1d6871",
|
|
"surface-container-low": "#f2f4f4",
|
|
"surface": "#f8fafa",
|
|
"on-secondary-container": "#526478"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.125rem",
|
|
"lg": "0.25rem",
|
|
"xl": "0.5rem",
|
|
"full": "0.75rem"
|
|
},
|
|
"spacing": {
|
|
"gutter": "16px",
|
|
"container-margin": "24px",
|
|
"row-height-sm": "32px",
|
|
"row-height-md": "48px",
|
|
"compact-padding": "8px"
|
|
},
|
|
"fontFamily": {
|
|
"display-lot": ["Inter"],
|
|
"body-base": ["Inter"],
|
|
"label-caps": ["Inter"],
|
|
"h2": ["Inter"],
|
|
"h1": ["Inter"],
|
|
"body-sm": ["Inter"],
|
|
"table-data": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"display-lot": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
|
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
|
"h1": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
|
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "500"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
body { font-family: 'Inter', sans-serif; }
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background antialiased flex">
|
|
<!-- SideNavBar -->
|
|
<aside class="fixed left-0 top-0 h-screen w-64 border-r border-slate-200 bg-slate-50 flex flex-col h-full py-4 space-y-1 z-50">
|
|
<div class="px-6 mb-8">
|
|
<div class="flex items-center gap-3">
|
|
<img alt="Warehouse Logo" class="w-10 h-10 rounded" data-alt="minimalist professional corporate logo for a logistics company using teal and white color palette" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDzHht_N2ne3a1nwn1MaPtt55wbWMs8YhSGQ9U30D_-BPIkFsitrfhdFFpcwJyQi13PpaJBWPp8ikNCKwsRBemweY8uuBgaZC4c_Ldj0U4RkcJz43n76GHOHNrJOzEPPetIj2IeJfLWXWk92nuDEigft-TG1_ozbYYjAk_-jzrH0JjJqGJlNKpgisHWLjNd8zFoYKPAEfghpzux6rZcJIIKeVwAHBllgoncJXo7dN2TA5PMlYmcM63_QeuXY7XYXZszoujQFnP5VQ"/>
|
|
<div>
|
|
<h1 class="text-teal-800 font-black tracking-tighter text-lg leading-tight">SarangWMS</h1>
|
|
<p class="text-[10px] text-slate-500 font-medium tracking-widest uppercase">Operational Hub</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<nav class="flex-1 px-3 space-y-1">
|
|
<a class="flex items-center px-3 py-2 text-slate-600 hover:text-teal-700 hover:bg-slate-100 rounded-lg transition-all duration-200" href="#">
|
|
<span class="material-symbols-outlined mr-3" data-icon="dashboard">dashboard</span>
|
|
<span class="font-medium text-sm">Dashboard</span>
|
|
</a>
|
|
<a class="flex items-center px-3 py-2 text-slate-600 hover:text-teal-700 hover:bg-slate-100 rounded-lg transition-all duration-200" href="#">
|
|
<span class="material-symbols-outlined mr-3" data-icon="database">database</span>
|
|
<span class="font-medium text-sm">Master Data</span>
|
|
</a>
|
|
<a class="flex items-center px-3 py-2 text-slate-600 hover:text-teal-700 hover:bg-slate-100 rounded-lg transition-all duration-200" href="#">
|
|
<span class="material-symbols-outlined mr-3" data-icon="inventory_2">inventory_2</span>
|
|
<span class="font-medium text-sm">Inventory Logs</span>
|
|
</a>
|
|
<a class="flex items-center px-3 py-2 text-slate-600 hover:text-teal-700 hover:bg-slate-100 rounded-lg transition-all duration-200" href="#">
|
|
<span class="material-symbols-outlined mr-3" data-icon="edit_note">edit_note</span>
|
|
<span class="font-medium text-sm">Stock Adjust</span>
|
|
</a>
|
|
<a class="flex items-center px-3 py-2 bg-teal-50 text-teal-800 border-r-4 border-teal-600 rounded-sm transition-all duration-200" href="#">
|
|
<span class="material-symbols-outlined mr-3" data-icon="swap_horiz">swap_horiz</span>
|
|
<span class="font-medium text-sm">Transfers</span>
|
|
</a>
|
|
<a class="flex items-center px-3 py-2 text-slate-600 hover:text-teal-700 hover:bg-slate-100 rounded-lg transition-all duration-200" href="#">
|
|
<span class="material-symbols-outlined mr-3" data-icon="verified">verified</span>
|
|
<span class="font-medium text-sm">QC Reports</span>
|
|
</a>
|
|
</nav>
|
|
<div class="px-3 mt-auto space-y-1">
|
|
<a class="flex items-center px-3 py-2 text-slate-600 hover:bg-slate-100 rounded-lg transition-all" href="#">
|
|
<span class="material-symbols-outlined mr-3" data-icon="support_agent">support_agent</span>
|
|
<span class="font-medium text-sm">Support</span>
|
|
</a>
|
|
<a class="flex items-center px-3 py-2 text-slate-600 hover:bg-slate-100 rounded-lg transition-all" href="#">
|
|
<span class="material-symbols-outlined mr-3" data-icon="logout">logout</span>
|
|
<span class="font-medium text-sm">Logout</span>
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content -->
|
|
<main class="ml-64 flex-1 min-h-screen flex flex-col">
|
|
<!-- TopNavBar -->
|
|
<header class="bg-white sticky top-0 z-40 border-b border-slate-200 flex justify-between items-center h-14 px-6 w-full">
|
|
<div class="flex items-center flex-1">
|
|
<div class="relative w-64">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm">search</span>
|
|
<input class="w-full bg-slate-50 border-none rounded-md py-1.5 pl-9 pr-4 text-xs focus:ring-2 focus:ring-teal-600/20" placeholder="Cari lot atau lokasi..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="text-slate-500 hover:bg-slate-50 p-2 rounded-full transition-colors relative">
|
|
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
|
<span class="absolute top-2 right-2 w-2 h-2 bg-error rounded-full border-2 border-white"></span>
|
|
</button>
|
|
<button class="text-slate-500 hover:bg-slate-50 p-2 rounded-full transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
</button>
|
|
<button class="text-slate-500 hover:bg-slate-50 p-2 rounded-full transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
|
</button>
|
|
<div class="h-8 w-[1px] bg-slate-200 mx-1"></div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="text-right">
|
|
<p class="text-xs font-bold text-slate-700">Ahmad Manager</p>
|
|
<p class="text-[10px] text-teal-600 font-medium">Warehouse Head</p>
|
|
</div>
|
|
<img alt="Manager Avatar" class="w-8 h-8 rounded-full border border-slate-200" data-alt="professional portrait of a warehouse manager in a clean warehouse office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBAeDICWVEbtZxsjdraD21POyPjMTZOSBH8UIYN_ex3N52iGvDxbfBlGk7NmA2itgerUL4ZEjcX5w-aRhpg1_SWpAzCq3_HHarCN09zQpcyY-xyBT-XW-j9xeGrwbJJvVyp-kYlyDEzp6mANJDS6B0kh__8sPRThpjsNa8hDQ-yqVopvoQgepsYoWuPcQcGLHHBGQEFZ2uNtzo7xVXotzjGCgT4GCIR8AkFLe67HshdWuaZRlogsizyezW79UyUq5hoeTh5rtE-wA"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Canvas -->
|
|
<div class="p-container-margin">
|
|
<!-- Header Section -->
|
|
<div class="mb-8 flex justify-between items-end">
|
|
<div>
|
|
<nav class="flex items-center gap-2 text-xs text-slate-500 mb-2 font-medium">
|
|
<span>Inventory</span>
|
|
<span class="material-symbols-outlined text-[10px]">chevron_right</span>
|
|
<span class="text-teal-700 font-bold">Transfer Antar Gudang</span>
|
|
</nav>
|
|
<h2 class="font-h1 text-h1 text-on-surface">Transfer Lot Internal</h2>
|
|
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">Lakukan pemindahan stok antar gedung atau rak penyimpanan di dalam area operasional.</p>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<button class="px-4 py-2 text-teal-700 border border-teal-600 rounded-lg text-sm font-semibold hover:bg-teal-50 transition-colors">Batal</button>
|
|
<button class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-semibold hover:bg-teal-900 transition-shadow shadow-sm">Simpan Transfer</button>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-12 gap-6">
|
|
<!-- Main Form Column -->
|
|
<div class="col-span-12 lg:col-span-8 space-y-6">
|
|
<!-- Step 1: Lot Information -->
|
|
<div class="bg-white border border-outline-variant rounded-xl overflow-hidden shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
|
<div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-6 h-6 rounded-full bg-primary text-white flex items-center justify-center text-[10px] font-bold">1</span>
|
|
<h3 class="font-h2 text-h2 text-on-surface">Pilih Lot Inventaris</h3>
|
|
</div>
|
|
<span class="px-2 py-1 bg-secondary-container text-on-secondary-container text-[10px] font-bold rounded uppercase tracking-wider">Wajib Diisi</span>
|
|
</div>
|
|
<div class="p-6 grid grid-cols-2 gap-4">
|
|
<div class="col-span-2">
|
|
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1.5 uppercase">LOT ID / BARCODE</label>
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">qr_code_scanner</span>
|
|
<select class="w-full bg-surface border-outline focus:ring-2 focus:ring-primary rounded-lg py-2.5 pl-10 text-body-base font-body-base appearance-none cursor-pointer">
|
|
<option value="">Pilih Lot yang akan dipindah...</option>
|
|
<option value="LOT-SBW-2023-001">LOT-SBW-2023-001 (Super Grade A - 15.5 kg)</option>
|
|
<option value="LOT-SBW-2023-042">LOT-SBW-2023-042 (Premium Bowl - 8.2 kg)</option>
|
|
<option value="LOT-SBW-2023-115">LOT-SBW-2023-115 (Triangular Grade - 22.0 kg)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1.5 uppercase">GUDANG ASAL</label>
|
|
<input class="w-full bg-surface-container-low border-outline-variant text-slate-500 rounded-lg py-2.5 text-body-base font-body-base" readonly="" type="text" value="Gudang Utama (Main Hub)"/>
|
|
</div>
|
|
<div>
|
|
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1.5 uppercase">LOKASI ASAL</label>
|
|
<input class="w-full bg-surface-container-low border-outline-variant text-slate-500 rounded-lg py-2.5 text-body-base font-body-base" readonly="" type="text" value="RAK-A-04-12"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Step 2: Destination -->
|
|
<div class="bg-white border border-outline-variant rounded-xl overflow-hidden shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
|
<div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-6 h-6 rounded-full bg-primary text-white flex items-center justify-center text-[10px] font-bold">2</span>
|
|
<h3 class="font-h2 text-h2 text-on-surface">Detail Tujuan Transfer</h3>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1.5 uppercase">PILIH GUDANG TUJUAN</label>
|
|
<select class="w-full bg-surface border-outline focus:ring-2 focus:ring-primary rounded-lg py-2.5 text-body-base font-body-base">
|
|
<option value="">Pilih Gudang...</option>
|
|
<option value="WH2">Gudang Karantina (WH-02)</option>
|
|
<option value="WH3">Gudang Ekspor (WH-03)</option>
|
|
<option value="WH4">Area Pembersihan (Processing)</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1.5 uppercase">PILIH LOKASI TUJUAN</label>
|
|
<select class="w-full bg-surface border-outline focus:ring-2 focus:ring-primary rounded-lg py-2.5 text-body-base font-body-base">
|
|
<option value="">Pilih Rak/Slot...</option>
|
|
<option value="R1">RAK-EX-01</option>
|
|
<option value="R2">RAK-EX-02</option>
|
|
<option value="R3">RAK-EX-03</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-span-2">
|
|
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1.5 uppercase">QTY TRANSFER</label>
|
|
<div class="relative">
|
|
<input class="w-full bg-surface border-outline focus:ring-2 focus:ring-primary rounded-lg py-2.5 pr-16 text-body-base font-bold text-primary" placeholder="0.00" type="number"/>
|
|
<span class="absolute right-4 top-1/2 -translate-y-1/2 text-xs font-bold text-on-surface-variant">KILOGRAM</span>
|
|
</div>
|
|
<p class="text-[11px] text-slate-500 mt-1 font-medium italic">*Maksimal transfer: 15.5 kg (stok tersedia)</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Step 3: Administration -->
|
|
<div class="bg-white border border-outline-variant rounded-xl overflow-hidden shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
|
<div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-6 h-6 rounded-full bg-primary text-white flex items-center justify-center text-[10px] font-bold">3</span>
|
|
<h3 class="font-h2 text-h2 text-on-surface">Administrasi & Tanggal</h3>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1.5 uppercase">PETUGAS PELAKSANA</label>
|
|
<div class="flex items-center gap-3 bg-surface-container-low p-2 rounded-lg border border-outline-variant">
|
|
<img alt="Staff" class="w-6 h-6 rounded-full" data-alt="close up headshot of a logistics worker wearing a safety vest" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAS1LIfEoBfZoDvVw5vLWT-JZ-G_9vAeN9V6PAHShd9LYYkkpf6gEUUogLVpO_h7t2zk5GIIl2OpXVHBoAGqynNaUmUL0YNMOYMtmSmDHi0zOwvLQW508dz6xp1fyY1ykib1FpkPjruXUSIU5faVKzZbXsw25MshZwX13U1rXls1RElvfNpcYxW3OwSyg_cIv5SJ10aicLqLh9eoH-fZiStom7UmNHlGvhf2wu4sytS4ZDCvGn77A-qCnKPtRLZhaDD514X7zFWIQ"/>
|
|
<span class="text-body-sm font-medium text-slate-700">Budi Pratama (W-Staff)</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1.5 uppercase">TANGGAL TRANSFER</label>
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">calendar_today</span>
|
|
<input class="w-full bg-surface border-outline focus:ring-2 focus:ring-primary rounded-lg py-2.5 pl-10 text-body-base font-body-base" type="date" value="2023-11-24"/>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-2">
|
|
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1.5 uppercase">CATATAN TRANSFER (OPSIONAL)</label>
|
|
<textarea class="w-full bg-surface border-outline focus:ring-2 focus:ring-primary rounded-lg p-3 text-body-base font-body-base" placeholder="Alasan pemindahan atau detail tambahan..." rows="2"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Sidebar Information Column -->
|
|
<div class="col-span-12 lg:col-span-4 space-y-6">
|
|
<!-- Real-time Summary Card -->
|
|
<div class="bg-primary text-white rounded-xl p-6 shadow-xl relative overflow-hidden">
|
|
<div class="relative z-10">
|
|
<h4 class="font-label-caps text-label-caps text-on-primary-container mb-4 uppercase">Ringkasan Transfer</h4>
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex justify-between items-center pb-3 border-b border-teal-800">
|
|
<span class="text-sm opacity-80">Lot Terpilih</span>
|
|
<span class="text-sm font-bold">---</span>
|
|
</div>
|
|
<div class="flex justify-between items-center pb-3 border-b border-teal-800">
|
|
<span class="text-sm opacity-80">Dari</span>
|
|
<span class="text-sm font-bold">Main Hub</span>
|
|
</div>
|
|
<div class="flex justify-between items-center pb-3 border-b border-teal-800">
|
|
<span class="text-sm opacity-80">Ke</span>
|
|
<span class="text-sm font-bold">---</span>
|
|
</div>
|
|
<div class="pt-2">
|
|
<p class="text-xs opacity-70 mb-1">Estimasi Berat Transfer</p>
|
|
<p class="text-3xl font-black">0.00 <span class="text-sm font-normal">kg</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="material-symbols-outlined absolute -bottom-4 -right-4 text-9xl opacity-10 rotate-12" data-icon="swap_horiz">swap_horiz</span>
|
|
</div>
|
|
<!-- Safety Checklist -->
|
|
<div class="bg-white border border-outline-variant rounded-xl p-6 shadow-sm">
|
|
<h4 class="font-h2 text-h2 text-on-surface mb-4">Panduan Keamanan</h4>
|
|
<ul class="space-y-4">
|
|
<li class="flex gap-3">
|
|
<span class="material-symbols-outlined text-teal-600 text-lg">check_circle</span>
|
|
<p class="text-body-sm text-on-surface-variant">Pastikan timbangan telah dikalibrasi sebelum melakukan transfer fisik.</p>
|
|
</li>
|
|
<li class="flex gap-3">
|
|
<span class="material-symbols-outlined text-teal-600 text-lg">check_circle</span>
|
|
<p class="text-body-sm text-on-surface-variant">Gunakan sarung tangan steril saat menangani kotak lot sarang burung.</p>
|
|
</li>
|
|
<li class="flex gap-3">
|
|
<span class="material-symbols-outlined text-teal-600 text-lg">check_circle</span>
|
|
<p class="text-body-sm text-on-surface-variant">Update label fisik pada kotak setelah dipindahkan ke rak baru.</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Image Section -->
|
|
<div class="rounded-xl overflow-hidden border border-outline-variant shadow-sm aspect-video relative group">
|
|
<img alt="Warehouse Map" class="w-full h-full object-cover" data-alt="architectural clean blueprint layout of a modern warehouse showing zones A B and C with color coded shelving" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAebgB5qWnPcAHLKIn0NVXSgEXH2bcxgoHCdpG0jvGvpM2iDaopbrgZPGXuFfh3zOF4188JeObOqnpyt5Wwg7uEDOuOHkJJ3Lxy_UGxbU3Lc6EnU_ist4PnZfH8P5JGnPRF_OT8h8CeR0ggeyQ-DbKWJkHoOZJWu4fqKDZQ8DfTTnb9LM7h7bzDSJUJUiI4HlSSJc81r85XqsNv6qCeKKLqG1MoQmihOFYS3lV9T3o4bqRPhnkwWB9QL-ilhLsjhGcA8GgKrABEEw"/>
|
|
<div class="absolute inset-0 bg-primary/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<span class="px-4 py-2 bg-white text-primary text-xs font-bold rounded-full shadow-lg cursor-pointer">Lihat Peta Lokasi</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Footer -->
|
|
<footer class="mt-auto p-6 bg-slate-50 border-t border-slate-200">
|
|
<div class="flex justify-between items-center opacity-60">
|
|
<p class="text-[10px] font-medium text-slate-500 uppercase tracking-widest">Sarang Inventory Pro v2.4.0</p>
|
|
<p class="text-[10px] font-medium text-slate-500 uppercase tracking-widest">© 2023 SarangWMS Logistics System</p>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
<!-- Contextual FAB (Hidden on this specific task page as per rules, but showing for UI completeness if needed by layout) -->
|
|
<!-- Suppressed on Form/Details pages per "Contextual FAB Suppression" rule -->
|
|
</body></html> |