Initial import of AbelBirdNest Stock
This commit is contained in:
482
design-assets/stitch_abel_stock/laporan_stok_1/code.html
Normal file
482
design-assets/stitch_abel_stock/laporan_stok_1/code.html
Normal file
@ -0,0 +1,482 @@
|
||||
<!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": {
|
||||
"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>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body-base">
|
||||
<!-- TopNavBar Shell -->
|
||||
<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 font-inter text-sm antialiased">
|
||||
<div class="flex items-center gap-4">
|
||||
<img alt="Logo Perusahaan Walet" class="h-8 w-auto" data-alt="minimalist professional logo of a bird's nest company with abstract bird wings and teal color palette" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAB8QDnSGyROfSVUaI5vXszOWT_OlKqsx41QffWX1c75sv4VfD3-oFqRrA6z7APkD5VxG6SLKQlU0C4b65zaFszfYNzg3od0Wd13LpdpAbQREyHnIJXdsY9di9_Nl96Ngjh9JGtYIONo7IYCCPbBFKb1Ajn2L3mL3kmrHlGtM9rMD0v-sOFtKH45VFoek5dLQOg8ZlubavWEZ6dmDQrNb3qAWY-MMb31nWrM_eSNYmupe51IUHEl_4rsHEx4Vg57QIc4ZN0g0t6jA"/>
|
||||
<span class="text-xl font-bold text-teal-700">Sistem Inventaris Walet</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="relative hidden lg:block">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">search</span>
|
||||
<input class="pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded text-sm focus:ring-2 focus:ring-primary focus:border-transparent outline-none w-64" placeholder="Cari lot atau laporan..." type="text"/>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-50 transition-colors rounded">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-50 transition-colors rounded">
|
||||
<span class="material-symbols-outlined">help_outline</span>
|
||||
</button>
|
||||
<div class="h-8 w-[1px] bg-slate-200 mx-2"></div>
|
||||
<button class="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded font-medium hover:opacity-90 active:scale-95 transition-all">
|
||||
<span class="material-symbols-outlined text-sm">qr_code_scanner</span>
|
||||
<span>Scan Barcode</span>
|
||||
</button>
|
||||
<div class="ml-4 h-8 w-8 rounded-full bg-slate-200 flex items-center justify-center border border-slate-300 overflow-hidden">
|
||||
<img alt="Profil Pengguna" data-alt="professional portrait of a warehouse manager in business casual attire" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC5c_VDQtpbOxidxQ2Q0qdK-Vy10YGZvLhjouM5Qz3R59gCpRch5paNgwUUP6_wpiyfu8rz3Ucvx2IcVlqlMgGqqzzbaeOOaN-2jsbA224_4VZUxqReoL8bxp0HpjVRMs20dSAuXzTBa2U8Q8J2DKZnpsGzfud_8B4bsTICKf9uD6e85FpGGxLAcWMn319R-gBBPrBw18GWeezFJ3gM4EfeFLKs3fxqMXwPc6_zKlQA13ISrdlWvKu_D77-tOu3scXxJg42jN5ATw"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- SideNavBar Shell -->
|
||||
<nav 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">Inventory Walet</h2>
|
||||
<p class="text-[10px] uppercase tracking-widest text-slate-400 font-bold">Sistem Traceability</p>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col gap-1 px-2">
|
||||
<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 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span>Dashboard</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-inter text-xs font-bold uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
<span>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 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">database</span>
|
||||
<span>Data Master</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 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">qr_code_scanner</span>
|
||||
<span>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 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span>Pengaturan</span>
|
||||
</a>
|
||||
<div class="mt-6 px-4">
|
||||
<button class="w-full py-3 bg-white border border-teal-700 text-teal-700 rounded font-bold text-[10px] uppercase tracking-widest hover:bg-teal-50 transition-colors">
|
||||
+ Tambah Lot Baru
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-2 mt-auto border-t border-slate-200 pt-4">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 transition-all font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
<span>Bantuan</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-red-600 hover:bg-red-50 transition-all font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">logout</span>
|
||||
<span>Log Keluar</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-64 pt-16 min-h-screen">
|
||||
<div class="p-container-margin">
|
||||
<!-- Header Section -->
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
|
||||
<div>
|
||||
<h1 class="font-h1 text-h1 text-on-surface">Laporan Stok Terkini</h1>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Data inventaris real-time per <span class="font-bold">24 Mei 2024</span></p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center bg-white border border-outline-variant rounded px-3 py-1.5 shadow-sm">
|
||||
<span class="material-symbols-outlined text-sm mr-2">calendar_today</span>
|
||||
<span class="text-body-sm font-medium">Bulan Ini</span>
|
||||
<span class="material-symbols-outlined text-sm ml-2">expand_more</span>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 px-4 py-2 border border-primary text-primary rounded font-medium hover:bg-teal-50 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm">download</span>
|
||||
<span class="text-body-base">Ekspor Laporan</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bento Grid Stats -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-gutter mb-8">
|
||||
<!-- Main Stat: Total Value -->
|
||||
<div class="md:col-span-2 bg-white p-6 rounded-lg border border-outline-variant shadow-sm relative overflow-hidden group">
|
||||
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||
<span class="material-symbols-outlined text-6xl text-primary">payments</span>
|
||||
</div>
|
||||
<p class="font-label-caps text-label-caps text-on-surface-variant mb-2">TOTAL NILAI INVENTARIS</p>
|
||||
<h2 class="font-display-lot text-display-lot text-primary mb-4">Rp 4.280.550.000</h2>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="flex items-center text-green-600 bg-green-50 px-2 py-0.5 rounded text-xs font-bold">
|
||||
<span class="material-symbols-outlined text-xs mr-1">trending_up</span> +12.4%
|
||||
</span>
|
||||
<span class="text-body-sm text-on-surface-variant">vs bulan lalu</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stock Movement Summary -->
|
||||
<div class="bg-white p-6 rounded-lg border border-outline-variant shadow-sm">
|
||||
<p class="font-label-caps text-label-caps text-on-surface-variant mb-2">TOTAL BERAT (KG)</p>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<h2 class="font-h1 text-h1">1,425.80</h2>
|
||||
<span class="text-body-sm font-medium text-on-surface-variant">kg</span>
|
||||
</div>
|
||||
<div class="mt-4 h-12 w-full bg-slate-50 flex items-end gap-1 px-1">
|
||||
<div class="h-1/2 w-full bg-teal-200 rounded-t-sm"></div>
|
||||
<div class="h-2/3 w-full bg-teal-200 rounded-t-sm"></div>
|
||||
<div class="h-3/4 w-full bg-teal-300 rounded-t-sm"></div>
|
||||
<div class="h-1/2 w-full bg-teal-400 rounded-t-sm"></div>
|
||||
<div class="h-full w-full bg-primary rounded-t-sm"></div>
|
||||
<div class="h-5/6 w-full bg-teal-500 rounded-t-sm"></div>
|
||||
<div class="h-3/4 w-full bg-teal-400 rounded-t-sm"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Average Shrinkage -->
|
||||
<div class="bg-white p-6 rounded-lg border border-outline-variant shadow-sm">
|
||||
<p class="font-label-caps text-label-caps text-on-surface-variant mb-2">TINGKAT SUSUT (AVG)</p>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<h2 class="font-h1 text-h1 text-tertiary">3.12</h2>
|
||||
<span class="text-body-sm font-medium text-on-surface-variant">%</span>
|
||||
</div>
|
||||
<div class="mt-4 flex flex-col gap-2">
|
||||
<div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
|
||||
<div class="bg-tertiary h-full" style="width: 32%"></div>
|
||||
</div>
|
||||
<div class="flex justify-between text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">
|
||||
<span>Target < 3%</span>
|
||||
<span class="text-tertiary">Alert!</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-gutter mb-8">
|
||||
<!-- Shrinkage Analysis per Grade -->
|
||||
<div class="lg:col-span-1 bg-white rounded-lg border border-outline-variant shadow-sm overflow-hidden">
|
||||
<div class="p-4 border-b border-outline-variant bg-surface-container-low flex justify-between items-center">
|
||||
<h3 class="font-h2 text-h2">Analisis Susut per Grade</h3>
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-sm">info</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="space-y-4">
|
||||
<!-- Grade item -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded flex items-center justify-center bg-teal-50 text-primary font-bold text-xs border border-teal-100">AAA</div>
|
||||
<div>
|
||||
<p class="text-body-base font-bold">Super Premium</p>
|
||||
<p class="text-[10px] text-on-surface-variant uppercase">Moisture Content: 12%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-body-base font-bold text-green-600">1.8%</p>
|
||||
<p class="text-[10px] text-on-surface-variant">OPTIMAL</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Grade item -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded flex items-center justify-center bg-teal-50 text-primary font-bold text-xs border border-teal-100">AA</div>
|
||||
<div>
|
||||
<p class="text-body-base font-bold">Premium High</p>
|
||||
<p class="text-[10px] text-on-surface-variant uppercase">Moisture Content: 14%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-body-base font-bold text-secondary">2.5%</p>
|
||||
<p class="text-[10px] text-on-surface-variant">NORMAL</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Grade item -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded flex items-center justify-center bg-teal-50 text-primary font-bold text-xs border border-teal-100">B</div>
|
||||
<div>
|
||||
<p class="text-body-base font-bold">Standard Grade</p>
|
||||
<p class="text-[10px] text-on-surface-variant uppercase">Moisture Content: 18%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-body-base font-bold text-error">4.2%</p>
|
||||
<p class="text-[10px] text-error font-bold uppercase">HIGH RISK</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full mt-6 py-2 text-primary font-medium text-body-sm hover:underline">Lihat Detail Semua Grade →</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stock Movement Trend visualization area -->
|
||||
<div class="lg:col-span-2 bg-white rounded-lg border border-outline-variant shadow-sm overflow-hidden flex flex-col">
|
||||
<div class="p-4 border-b border-outline-variant bg-surface-container-low flex justify-between items-center">
|
||||
<h3 class="font-h2 text-h2">Tren Arus Barang (30 Hari)</h3>
|
||||
<div class="flex items-center gap-4 text-[10px] font-bold tracking-widest text-on-surface-variant uppercase">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="w-2 h-2 rounded-full bg-primary"></div> Masuk
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="w-2 h-2 rounded-full bg-tertiary"></div> Keluar
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-compact-padding flex-1 bg-slate-50/50">
|
||||
<div class="w-full h-full min-h-[250px] relative flex flex-col">
|
||||
<img alt="Stock trend graph visualization" class="w-full h-full object-cover opacity-20 absolute inset-0 mix-blend-multiply" data-alt="clean professional dashboard line chart showing inventory trends with teal and orange lines on a light grid background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCWkZlVV-asCKrQsuVbc8ShE6tBBgmqLlpwLir3IJck1sBTco9RF36pvFjlLIrUsLNGtVveXpbiUIsUtXWLq-__2i1sYEYSAggF3-9lUW5ROFGeAJaeh1FZnpTcgfvCaVncxzUtBlyxKuYwO7a6BbRGOdYsr-C4I5DvfB9w9-mOShUQZE6syMxLBF3ffUMxKiJ0mPYy7_m2nOekcs0NE6PRfwPII07R6xN_QustDLw5bgxrrGessq5qmvBGx9mEYv_T495FNHHKow"/>
|
||||
<div class="mt-auto p-4 flex justify-between items-end relative z-10">
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] font-bold text-on-surface-variant uppercase">Minggu Ini</p>
|
||||
<p class="text-body-base font-bold text-primary">+245 kg masuk</p>
|
||||
<p class="text-body-base font-bold text-tertiary">-112 kg keluar</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-[28px] font-black text-on-surface leading-tight">+133 kg</p>
|
||||
<p class="text-[10px] font-bold text-green-600 uppercase">Net Stock Growth</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Warehouse Inventory Table -->
|
||||
<div class="bg-white rounded-lg border border-outline-variant shadow-sm overflow-hidden">
|
||||
<div class="p-4 border-b border-outline-variant bg-surface-container-low flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">warehouse</span>
|
||||
<h3 class="font-h2 text-h2">Detail Stok per Gudang</h3>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-2 top-1/2 -translate-y-1/2 text-xs text-on-surface-variant">filter_list</span>
|
||||
<select class="pl-8 pr-4 py-1.5 bg-white border border-outline-variant rounded text-xs focus:ring-1 focus:ring-primary outline-none appearance-none">
|
||||
<option>Semua Wilayah</option>
|
||||
<option>Jakarta (Head Office)</option>
|
||||
<option>Surabaya (Plant 1)</option>
|
||||
<option>Medan (Logistics)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-slate-50 text-left border-b border-outline-variant">
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant">NAMA GUDANG</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant">LOKASI</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant">TOTAL LOT</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant">BERAT NETTO</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant">GRADE DOMINAN</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant">STATUS</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant text-right">AKSI</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-outline-variant">
|
||||
<!-- Warehouse Row -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
<span class="font-table-data text-table-data text-on-surface">Gudang Jakarta Utama</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-body-sm text-on-surface-variant">Jakarta Timur, DKI Jakarta</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">412</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">682.45 kg</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="px-2 py-0.5 bg-teal-50 text-primary border border-teal-100 rounded text-[10px] font-bold">AAA (45%)</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="px-2 py-0.5 bg-green-50 text-green-700 rounded-full text-[10px] font-bold">AKTIF</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="text-primary hover:text-teal-900 font-bold text-xs">DETAIL</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Warehouse Row -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
<span class="font-table-data text-table-data text-on-surface">Plant Surabaya - Room A</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-body-sm text-on-surface-variant">Sidoarjo, Jawa Timur</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">288</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">415.10 kg</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="px-2 py-0.5 bg-teal-50 text-primary border border-teal-100 rounded text-[10px] font-bold">AA (32%)</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="px-2 py-0.5 bg-green-50 text-green-700 rounded-full text-[10px] font-bold">AKTIF</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="text-primary hover:text-teal-900 font-bold text-xs">DETAIL</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Warehouse Row -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-orange-500"></div>
|
||||
<span class="font-table-data text-table-data text-on-surface">Logistics Medan</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-body-sm text-on-surface-variant">Belawan, Sumatera Utara</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">156</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">328.25 kg</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="px-2 py-0.5 bg-teal-50 text-primary border border-teal-100 rounded text-[10px] font-bold">B (28%)</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="px-2 py-0.5 bg-orange-50 text-orange-700 rounded-full text-[10px] font-bold">TRANSIT</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="text-primary hover:text-teal-900 font-bold text-xs">DETAIL</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Warehouse Row -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
|
||||
<span class="font-table-data text-table-data text-on-surface">QC Processing Lab</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-body-sm text-on-surface-variant">Tangerang, Banten</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">45</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">0 kg</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="text-body-sm text-on-surface-variant italic">-</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="px-2 py-0.5 bg-blue-50 text-blue-700 rounded-full text-[10px] font-bold">STANDBY</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="text-primary hover:text-teal-900 font-bold text-xs">DETAIL</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="p-4 border-t border-outline-variant bg-slate-50 flex items-center justify-between">
|
||||
<p class="text-body-sm text-on-surface-variant">Menampilkan 4 dari 12 lokasi gudang</p>
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="p-1 rounded hover:bg-slate-200 border border-transparent disabled:opacity-30" disabled="">
|
||||
<span class="material-symbols-outlined">chevron_left</span>
|
||||
</button>
|
||||
<button class="px-2.5 py-1 text-xs font-bold bg-primary text-white rounded">1</button>
|
||||
<button class="px-2.5 py-1 text-xs font-bold hover:bg-slate-200 rounded">2</button>
|
||||
<button class="px-2.5 py-1 text-xs font-bold hover:bg-slate-200 rounded">3</button>
|
||||
<button class="p-1 rounded hover:bg-slate-200 border border-transparent">
|
||||
<span class="material-symbols-outlined">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Contextual FAB -->
|
||||
<div class="fixed bottom-8 right-8 z-50">
|
||||
<button class="group flex items-center gap-2 bg-primary text-white pl-4 pr-5 py-3 rounded-full shadow-lg hover:shadow-xl active:scale-95 transition-all">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
<span class="font-bold text-sm tracking-wide">INPUT STOCK OPNAME</span>
|
||||
</button>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/laporan_stok_1/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/laporan_stok_1/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 399 KiB |
Reference in New Issue
Block a user