Initial import of AbelBirdNest Stock
This commit is contained in:
454
design-assets/stitch_abel_stock/daftar_gudang_lokasi/code.html
Normal file
454
design-assets/stitch_abel_stock/daftar_gudang_lokasi/code.html
Normal file
@ -0,0 +1,454 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Daftar Gudang & Lokasi - Sarang Inventory Pro</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": {
|
||||
"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; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background">
|
||||
<!-- SideNavBar -->
|
||||
<aside class="fixed left-0 top-0 h-screen w-64 bg-slate-50 dark:bg-slate-950 border-r border-slate-200 dark:border-slate-800 flex flex-col h-full py-4 space-y-1 z-50">
|
||||
<div class="px-6 mb-8 flex items-center gap-3">
|
||||
<img alt="Sarang Inventory Pro Logo" class="w-8 h-8 rounded" data-alt="minimalist professional logo for bird nest warehouse management company, teal and white colors" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBZpimSd6SglfA8eLn5Ag28LiPg-Ze7peiyRhi4IzVXYuf0TbR2hZEICbWkpl_zw2dZCe9QdTNslrqsLxmSGEIzeyY4WgG-9itfeC5IyN6QKWpjUfI48lkLXovhHJ2iho5mHQMS7-vQgH2ZY5TGX5jj2mUDQ1aBBbdnNBy4RJwaUIcFgJkcDdLQ3ZxT6zUsag8EZ556HpPZBFlPvo0bQgNdvdxYeGkY5qeVBLnLz8xSl9n0CTK-wVP0ir8mFTOnAyA-x77HUsKf_w"/>
|
||||
<div>
|
||||
<h1 class="text-teal-800 dark:text-teal-100 font-black tracking-tighter text-sm uppercase">SarangWMS</h1>
|
||||
<p class="text-[10px] text-slate-500 font-medium">Operational Hub</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 px-3 space-y-1 overflow-y-auto">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-700 hover:bg-slate-100 dark:hover:bg-slate-900/50 transition-all duration-200 ease-in-out font-medium text-sm rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">dashboard</span>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 bg-teal-50 dark:bg-teal-900/30 text-teal-800 dark:text-teal-200 border-r-4 border-teal-600 font-medium text-sm rounded transition-all duration-200 ease-in-out" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">database</span>
|
||||
<span>Master Data</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-700 hover:bg-slate-100 dark:hover:bg-slate-900/50 transition-all duration-200 ease-in-out font-medium text-sm rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">inventory_2</span>
|
||||
<span>Inventory Logs</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-700 hover:bg-slate-100 dark:hover:bg-slate-900/50 transition-all duration-200 ease-in-out font-medium text-sm rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">edit_note</span>
|
||||
<span>Stock Adjust</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-700 hover:bg-slate-100 dark:hover:bg-slate-900/50 transition-all duration-200 ease-in-out font-medium text-sm rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">swap_horiz</span>
|
||||
<span>Transfers</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-700 hover:bg-slate-100 dark:hover:bg-slate-900/50 transition-all duration-200 ease-in-out font-medium text-sm rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">verified</span>
|
||||
<span>QC Reports</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-6 py-4">
|
||||
<button class="w-full bg-primary text-white py-2.5 font-bold text-xs uppercase tracking-wider hover:opacity-90 transition-opacity">
|
||||
Create New Lot
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-3 border-t border-slate-200 pt-4 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-700 hover:bg-slate-100 transition-all text-sm rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">support_agent</span>
|
||||
<span>Support</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-700 hover:bg-slate-100 transition-all text-sm rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">logout</span>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="ml-64 min-h-screen">
|
||||
<!-- TopNavBar -->
|
||||
<header class="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 flex justify-between items-center h-14 px-6 w-full sticky top-0 z-40">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-lg">search</span>
|
||||
<input class="pl-10 pr-4 py-1.5 bg-slate-100 border-none text-sm w-80 focus:ring-2 focus:ring-primary rounded" placeholder="Cari gudang atau kode..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="p-1 text-slate-500 hover:bg-slate-50 rounded transition-colors"><span class="material-symbols-outlined">notifications</span></button>
|
||||
<button class="p-1 text-slate-500 hover:bg-slate-50 rounded transition-colors"><span class="material-symbols-outlined">settings</span></button>
|
||||
<button class="p-1 text-slate-500 hover:bg-slate-50 rounded transition-colors"><span class="material-symbols-outlined">help_outline</span></button>
|
||||
</div>
|
||||
<div class="h-8 w-px bg-slate-200"></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="text-right">
|
||||
<p class="text-xs font-bold text-slate-800">Admin Manager</p>
|
||||
<p class="text-[10px] text-teal-600 font-medium">Warehouse Lead</p>
|
||||
</div>
|
||||
<img alt="Manager Avatar" class="w-8 h-8 rounded-full object-cover" data-alt="professional headshot of a middle-aged asian manager in a modern office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBz0-G4kgbuTv-QqXIarkK1Ti148HBCJNJTW250VEs0YLcJaT-XOBTm0S9JlRkTxMyTYiwFq4KyHWkE549ctygaVsOQIYir2kHmRLq_ArCEjhzmYkY2Nq21ac06M7alISMVI7hKkjdIE8B-e4Sq7oFkpdI2eVUEAW3CYpbzwrbF1PH_83q9P8kQEfMw5HpqJE6u0pdXAjg0XQJrByNW6Vrvn_O15QkhUHWSO0ZpQ_DuozrWHjLSGeT9CjPs2n1cJulg1DKT3nSUYw"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Canvas -->
|
||||
<div class="p-gutter">
|
||||
<!-- Header Section -->
|
||||
<div class="flex justify-between items-end mb-8">
|
||||
<div>
|
||||
<h2 class="font-h1 text-h1 text-on-background mb-1">Manajemen Gudang</h2>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Kelola infrastruktur penyimpanan dan hierarki lokasi rak produksi.</p>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 bg-primary text-white px-5 py-2.5 rounded shadow-sm hover:brightness-110 transition-all font-h2 text-h2">
|
||||
<span class="material-symbols-outlined text-[18px]">add</span>
|
||||
Tambah Gudang
|
||||
</button>
|
||||
</div>
|
||||
<!-- Dashboard Summary Widgets -->
|
||||
<div class="grid grid-cols-4 gap-4 mb-8">
|
||||
<div class="bg-surface-container-lowest p-5 border border-outline-variant shadow-sm flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-primary/10 flex items-center justify-center text-primary rounded">
|
||||
<span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1;">warehouse</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-label-caps font-label-caps text-on-surface-variant uppercase">Total Gudang</p>
|
||||
<p class="text-display-lot font-display-lot text-on-surface">12</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-5 border border-outline-variant shadow-sm flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-secondary-container/30 flex items-center justify-center text-secondary">
|
||||
<span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1;">view_quilt</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-label-caps font-label-caps text-on-surface-variant uppercase">Total Rak/Lokasi</p>
|
||||
<p class="text-display-lot font-display-lot text-on-surface">482</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-5 border border-outline-variant shadow-sm flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-tertiary-fixed-dim/20 flex items-center justify-center text-tertiary">
|
||||
<span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1;">inventory</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-label-caps font-label-caps text-on-surface-variant uppercase">Kapasitas Terpakai</p>
|
||||
<p class="text-display-lot font-display-lot text-on-surface">68%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-5 border border-outline-variant shadow-sm flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-error-container/30 flex items-center justify-center text-error">
|
||||
<span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1;">report_problem</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-label-caps font-label-caps text-on-surface-variant uppercase">Gudang Hampir Penuh</p>
|
||||
<p class="text-display-lot font-display-lot text-on-surface">2</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Table Section -->
|
||||
<div class="bg-surface-container-lowest border border-outline-variant shadow-sm">
|
||||
<div class="px-6 py-4 border-b border-outline-variant flex justify-between items-center bg-surface-container-low">
|
||||
<h3 class="font-h2 text-h2 text-on-surface">Daftar Gudang Operasional</h3>
|
||||
<div class="flex gap-2">
|
||||
<button class="p-1.5 border border-outline text-on-surface-variant hover:bg-surface-container transition-colors rounded">
|
||||
<span class="material-symbols-outlined text-[20px]">filter_list</span>
|
||||
</button>
|
||||
<button class="p-1.5 border border-outline text-on-surface-variant hover:bg-surface-container transition-colors rounded">
|
||||
<span class="material-symbols-outlined text-[20px]">download</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead class="bg-surface-container-high border-b border-outline-variant">
|
||||
<tr>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Nama Gudang</th>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Kode</th>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Alamat / Lokasi</th>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Kapasitas (Terisi/Total)</th>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Jumlah Rak</th>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider text-right">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-outline-variant">
|
||||
<!-- Row 1 -->
|
||||
<tr class="hover:bg-surface-container-low transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-primary/5 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined text-[18px]">home_storage</span>
|
||||
</div>
|
||||
<span class="font-table-data text-table-data text-on-surface">Gudang Utama Raw Material</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-on-surface">GDG-RM-01</td>
|
||||
<td class="px-6 py-4 font-body-sm text-body-sm text-on-surface-variant">Kawasan Industri Jababeka, Blok C14</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="w-full max-w-[140px]">
|
||||
<div class="flex justify-between text-[11px] mb-1 font-bold">
|
||||
<span class="text-primary">1,250 kg</span>
|
||||
<span class="text-on-surface-variant">/ 1,500 kg</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-surface-container-high rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary" style="width: 83%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2.5 py-1 bg-secondary-container/40 text-on-secondary-container text-xs font-bold rounded">124 Rak</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-primary font-h2 text-[13px] hover:underline underline-offset-4 flex items-center justify-end gap-1 ml-auto">
|
||||
Lihat Detail Lokasi
|
||||
<span class="material-symbols-outlined text-[16px]">arrow_forward</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="hover:bg-surface-container-low transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-primary/5 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined text-[18px]">home_storage</span>
|
||||
</div>
|
||||
<span class="font-table-data text-table-data text-on-surface">Gudang Pengeringan A</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-on-surface">GDG-DRY-A</td>
|
||||
<td class="px-6 py-4 font-body-sm text-body-sm text-on-surface-variant">Area Produksi Lt. 2, Sayap Barat</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="w-full max-w-[140px]">
|
||||
<div class="flex justify-between text-[11px] mb-1 font-bold">
|
||||
<span class="text-primary">420 kg</span>
|
||||
<span class="text-on-surface-variant">/ 800 kg</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-surface-container-high rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary" style="width: 52%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2.5 py-1 bg-secondary-container/40 text-on-secondary-container text-xs font-bold rounded">86 Rak</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-primary font-h2 text-[13px] hover:underline underline-offset-4 flex items-center justify-end gap-1 ml-auto">
|
||||
Lihat Detail Lokasi
|
||||
<span class="material-symbols-outlined text-[16px]">arrow_forward</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="hover:bg-surface-container-low transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-primary/5 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined text-[18px]">home_storage</span>
|
||||
</div>
|
||||
<span class="font-table-data text-table-data text-on-surface">Gudang Finishing & QC</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-on-surface">GDG-FIN-03</td>
|
||||
<td class="px-6 py-4 font-body-sm text-body-sm text-on-surface-variant">Kawasan Industri Jababeka, Blok C15</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="w-full max-w-[140px]">
|
||||
<div class="flex justify-between text-[11px] mb-1 font-bold">
|
||||
<span class="text-error">980 kg</span>
|
||||
<span class="text-on-surface-variant">/ 1,000 kg</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-surface-container-high rounded-full overflow-hidden">
|
||||
<div class="h-full bg-error" style="width: 98%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2.5 py-1 bg-secondary-container/40 text-on-secondary-container text-xs font-bold rounded">210 Rak</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-primary font-h2 text-[13px] hover:underline underline-offset-4 flex items-center justify-end gap-1 ml-auto">
|
||||
Lihat Detail Lokasi
|
||||
<span class="material-symbols-outlined text-[16px]">arrow_forward</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr class="hover:bg-surface-container-low transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-primary/5 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined text-[18px]">home_storage</span>
|
||||
</div>
|
||||
<span class="font-table-data text-table-data text-on-surface">Cold Storage Export</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-on-surface">GDG-COLD-01</td>
|
||||
<td class="px-6 py-4 font-body-sm text-body-sm text-on-surface-variant">Gedung Kargo Bandara Soekarno-Hatta</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="w-full max-w-[140px]">
|
||||
<div class="flex justify-between text-[11px] mb-1 font-bold">
|
||||
<span class="text-primary">150 kg</span>
|
||||
<span class="text-on-surface-variant">/ 500 kg</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-surface-container-high rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary" style="width: 30%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2.5 py-1 bg-secondary-container/40 text-on-secondary-container text-xs font-bold rounded">32 Lokasi</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-primary font-h2 text-[13px] hover:underline underline-offset-4 flex items-center justify-end gap-1 ml-auto">
|
||||
Lihat Detail Lokasi
|
||||
<span class="material-symbols-outlined text-[16px]">arrow_forward</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-6 py-4 border-t border-outline-variant bg-surface-container-low flex justify-between items-center">
|
||||
<p class="text-body-sm text-on-surface-variant">Menampilkan 4 dari 12 gudang terdaftar</p>
|
||||
<div class="flex gap-1">
|
||||
<button class="p-2 border border-outline-variant rounded bg-white text-on-surface-variant disabled:opacity-50" disabled="">
|
||||
<span class="material-symbols-outlined text-[18px]">chevron_left</span>
|
||||
</button>
|
||||
<button class="p-2 border border-outline-variant rounded bg-primary text-white font-bold text-xs px-4">1</button>
|
||||
<button class="p-2 border border-outline-variant rounded bg-white text-on-surface-variant font-bold text-xs px-4">2</button>
|
||||
<button class="p-2 border border-outline-variant rounded bg-white text-on-surface-variant font-bold text-xs px-4">3</button>
|
||||
<button class="p-2 border border-outline-variant rounded bg-white text-on-surface-variant">
|
||||
<span class="material-symbols-outlined text-[18px]">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Additional Context: Map or Geographic View Placeholder -->
|
||||
<div class="mt-8 grid grid-cols-3 gap-6">
|
||||
<div class="col-span-2 bg-surface-container-lowest border border-outline-variant p-gutter shadow-sm h-64 relative overflow-hidden flex flex-col">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="font-h2 text-h2">Visualisasi Lokasi Geografis</h3>
|
||||
<span class="text-[11px] font-bold text-primary uppercase tracking-widest">Live Integration</span>
|
||||
</div>
|
||||
<div class="flex-1 bg-surface-container-high rounded flex items-center justify-center relative">
|
||||
<img alt="World map with location pins" class="absolute inset-0 w-full h-full object-cover opacity-60 grayscale" data-alt="simplified stylistic map of jakarta industrial area with warehouse icons and digital grid overlay" data-location="Jakarta" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCjlWTlCqAG6Y-switmw1vUJJ-jPjctPaMjRk-ofnmufPT304oDY2hiiGm5sWmQXVtCzf6xAwvrpcd5XS8IdA4G_hJB8u3Ac0aQaexvkfVJpz8othc_OQp0X35xEcxiMoGPIkQ_kM-QozKtOxEpz9E1PGLrLX_oT2sHEt2Lgq8tBOO8Vhk_A1ys_v8xdonJNUq33bAIY1vazomT_6X1LY0eJDpFBz2547jdcL-yWm5244lSNmKAdhfCGpPHJB3Q9aAqFVJ5a0-kMA"/>
|
||||
<div class="z-10 bg-white/90 backdrop-blur-sm p-4 border border-outline-variant flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary">location_on</span>
|
||||
<span class="text-sm font-bold text-on-surface">Pusat Operasional: Jababeka, Cikarang</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest border border-outline-variant p-gutter shadow-sm h-64 flex flex-col">
|
||||
<h3 class="font-h2 text-h2 mb-4">Aktivitas Terkini</h3>
|
||||
<div class="flex-1 space-y-4 overflow-y-auto pr-2">
|
||||
<div class="flex gap-3 items-start border-l-2 border-primary/20 pl-4 py-1">
|
||||
<div class="text-[10px] font-bold text-on-surface-variant min-w-[45px]">14:20</div>
|
||||
<div class="text-[12px]">
|
||||
<span class="font-bold text-on-surface">Input Barang:</span> 45kg Material Mentah tiba di <span class="font-bold text-primary">GDG-RM-01</span>.
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3 items-start border-l-2 border-primary/20 pl-4 py-1">
|
||||
<div class="text-[10px] font-bold text-on-surface-variant min-w-[45px]">11:05</div>
|
||||
<div class="text-[12px]">
|
||||
<span class="font-bold text-on-surface">Pemindahan:</span> Lot #B203 dipindah dari <span class="font-bold text-primary">Rak A2</span> ke <span class="font-bold text-primary">GDG-DRY-A</span>.
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3 items-start border-l-2 border-primary/20 pl-4 py-1">
|
||||
<div class="text-[10px] font-bold text-on-surface-variant min-w-[45px]">Kemarin</div>
|
||||
<div class="text-[12px]">
|
||||
<span class="font-bold text-on-surface">QC Selesai:</span> 12 Rak di <span class="font-bold text-primary">GDG-FIN-03</span> dinyatakan layak ekspor.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/daftar_gudang_lokasi/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/daftar_gudang_lokasi/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 451 KiB |
Reference in New Issue
Block a user