Initial import of AbelBirdNest Stock
This commit is contained in:
493
design-assets/stitch_abel_stock/stock_lot_list/code.html
Normal file
493
design-assets/stitch_abel_stock/stock_lot_list/code.html
Normal file
@ -0,0 +1,493 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" 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"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-error-container": "#93000a",
|
||||
"surface-bright": "#f8fafa",
|
||||
"tertiary": "#60320f",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"error-container": "#ffdad6",
|
||||
"error": "#ba1a1a",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"primary": "#00454c",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"surface-variant": "#e1e3e3",
|
||||
"surface-dim": "#d8dadb",
|
||||
"outline": "#6f797a",
|
||||
"on-secondary-container": "#526478",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"tertiary-container": "#7c4824",
|
||||
"inverse-surface": "#2e3131",
|
||||
"background": "#f8fafa",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-surface": "#191c1d",
|
||||
"secondary": "#4e6073",
|
||||
"primary-container": "#0d5e67",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"surface-container": "#eceeee",
|
||||
"on-primary-container": "#92d5df",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-tint": "#1d6871",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"on-primary": "#ffffff",
|
||||
"surface": "#f8fafa",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"on-error": "#ffffff",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"on-background": "#191c1d"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"row-height-md": "48px",
|
||||
"container-margin": "24px",
|
||||
"compact-padding": "8px",
|
||||
"gutter": "16px",
|
||||
"row-height-sm": "32px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display-lot": ["Inter"],
|
||||
"table-data": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"label-caps": ["Inter"],
|
||||
"body-base": ["Inter"],
|
||||
"h2": ["Inter"],
|
||||
"h1": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"display-lot": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "500"}],
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"h1": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background antialiased flex overflow-hidden h-screen">
|
||||
<!-- SideNavBar -->
|
||||
<aside class="fixed left-0 top-0 h-full w-64 border-r border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 flex flex-col py-4 z-50">
|
||||
<div class="px-6 mb-8 flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-primary-container rounded flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-white text-sm" data-icon="nest_eco_friendly">nest_eco</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-teal-900 dark:text-teal-100 font-black font-inter text-[13px] leading-tight">Sarang Ops</h1>
|
||||
<p class="text-slate-500 text-[11px]">Pabrik Pengolahan A</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 px-3 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded transition-all duration-150 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 dark:hover:bg-slate-900 font-inter text-[13px] font-medium active:scale-[0.98]" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
Dasbor
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded transition-all duration-150 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 dark:hover:bg-slate-900 font-inter text-[13px] font-medium active:scale-[0.98]" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="shopping_cart">shopping_cart</span>
|
||||
Pembelian
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded transition-all duration-150 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 dark:hover:bg-slate-900 font-inter text-[13px] font-medium active:scale-[0.98]" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="receipt_long">receipt_long</span>
|
||||
Kuitansi
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded transition-all duration-150 bg-white dark:bg-slate-900 text-[#0D5E67] border-r-4 border-[#0D5E67] shadow-sm font-inter text-[13px] font-medium active:scale-[0.98]" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
|
||||
Inventaris
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 rounded transition-all duration-150 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 dark:hover:bg-slate-900 font-inter text-[13px] font-medium active:scale-[0.98]" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="monitoring">monitoring</span>
|
||||
Analitik
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-3 mb-6">
|
||||
<button class="w-full py-2.5 bg-primary-container text-white rounded font-inter text-[13px] font-semibold flex items-center justify-center gap-2 hover:opacity-90 active:scale-[0.98] transition-all shadow-sm">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="add">add</span>
|
||||
Pindai Lot Baru
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-3 border-t border-slate-200 dark:border-slate-800 pt-4 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 rounded transition-all duration-150 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 dark:hover:bg-slate-900 font-inter text-[13px] font-medium active:scale-[0.98]" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
Pengaturan
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 rounded transition-all duration-150 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 dark:hover:bg-slate-900 font-inter text-[13px] font-medium active:scale-[0.98]" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="contact_support">contact_support</span>
|
||||
Bantuan
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Wrapper -->
|
||||
<main class="flex-1 ml-64 flex flex-col overflow-hidden">
|
||||
<!-- TopNavBar -->
|
||||
<header class="h-14 px-6 w-full border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 flex justify-between items-center z-40 shadow-sm sticky top-0">
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
<span class="text-lg font-bold text-[#0D5E67] dark:text-white tracking-tight font-inter">SwiftLot Walet</span>
|
||||
<div class="relative w-64 ml-4">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm" data-icon="search">search</span>
|
||||
<input class="w-full pl-9 pr-3 py-1.5 bg-slate-50 border-none rounded-lg text-sm focus:ring-2 focus:ring-primary-container/20 placeholder-slate-400" placeholder="Cari berdasarkan Kode Lot..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors rounded-lg 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="p-2 text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors rounded-lg">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
</button>
|
||||
<div class="h-8 w-8 rounded-full bg-secondary-container flex items-center justify-center overflow-hidden border border-slate-200">
|
||||
<img class="w-full h-full object-cover" data-alt="professional male profile photo with corporate background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDvaGEZVNKVZwEPoAZgHpTp3tBfad9HqX-tSqZ_SiYs1YTxpNQc0hVQcP8efBtj1nxvoeS5oSQLGQ6MPWio2tDzsESWuViW5G1drrIyXQoZwgYb3yFPcpOH1pFWjDNms3nx53a1U3pKuyEjynRcfeODTfCLwsndnpQwbFQWwsbMjKPuh5zd3tzb9xvJHEQWNSdYUv8ydDOnI62XtNH0pr0XjPgI9o1Iev8C9xP9WjQqinTZkGQGaH7Xl23teXu-hV_cNt4fZFc8eA"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Body Scroll Area -->
|
||||
<div class="flex-1 overflow-auto p-6 bg-background">
|
||||
<!-- Page Title & Quick Stats -->
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<h2 class="font-h1 text-h1 text-on-surface mb-1">Daftar Lot Stok Inventaris</h2>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Manajemen waktu nyata untuk bahan baku sarang burung dan barang jadi.</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<div class="bg-surface-container-lowest border border-outline-variant p-3 rounded-lg flex items-center gap-4 shadow-sm min-w-[140px]">
|
||||
<div class="w-10 h-10 rounded-full bg-secondary-container flex items-center justify-center text-on-secondary-container">
|
||||
<span class="material-symbols-outlined" data-icon="inventory">inventory</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-label-caps font-label-caps text-outline uppercase">Total Stok</p>
|
||||
<p class="text-display-lot font-display-lot text-primary">1,420 kg</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest border border-outline-variant p-3 rounded-lg flex items-center gap-4 shadow-sm min-w-[140px]">
|
||||
<div class="w-10 h-10 rounded-full bg-tertiary-fixed flex items-center justify-center text-tertiary">
|
||||
<span class="material-symbols-outlined" data-icon="timer">timer</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-label-caps font-label-caps text-outline uppercase">Menunggu QC</p>
|
||||
<p class="text-display-lot font-display-lot text-tertiary">85 kg</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Filter Bar Section -->
|
||||
<div class="bg-surface-container-lowest rounded-xl border border-outline-variant p-4 mb-6 shadow-sm">
|
||||
<div class="flex flex-wrap items-center gap-4">
|
||||
<div class="flex-1 min-w-[150px]">
|
||||
<label class="block text-[11px] font-bold text-outline uppercase mb-1.5 px-1">Pemasok</label>
|
||||
<select class="w-full bg-white border border-outline-variant rounded px-3 py-1.5 text-[13px] focus:ring-2 focus:ring-primary-container outline-none appearance-none">
|
||||
<option>Semua Pemasok</option>
|
||||
<option>Kalimantan Source A</option>
|
||||
<option>Sumatra Direct</option>
|
||||
<option>Java Highland</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex-1 min-w-[150px]">
|
||||
<label class="block text-[11px] font-bold text-outline uppercase mb-1.5 px-1">Jenis Item</label>
|
||||
<select class="w-full bg-white border border-outline-variant rounded px-3 py-1.5 text-[13px] focus:ring-2 focus:ring-primary-container outline-none">
|
||||
<option>Semua Jenis</option>
|
||||
<option>Bowl (SGP)</option>
|
||||
<option>Corner (SGP)</option>
|
||||
<option>Fines (SGP)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex-1 min-w-[120px]">
|
||||
<label class="block text-[11px] font-bold text-outline uppercase mb-1.5 px-1">Kualitas</label>
|
||||
<select class="w-full bg-white border border-outline-variant rounded px-3 py-1.5 text-[13px] focus:ring-2 focus:ring-primary-container outline-none">
|
||||
<option>Semua Kualitas</option>
|
||||
<option>AAA</option>
|
||||
<option>AA</option>
|
||||
<option>A</option>
|
||||
<option>B</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex-1 min-w-[150px]">
|
||||
<label class="block text-[11px] font-bold text-outline uppercase mb-1.5 px-1">Gudang</label>
|
||||
<select class="w-full bg-white border border-outline-variant rounded px-3 py-1.5 text-[13px] focus:ring-2 focus:ring-primary-container outline-none">
|
||||
<option>Pengolahan Utama</option>
|
||||
<option>Cold Storage B</option>
|
||||
<option>Outbound Dock</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex-1 min-w-[120px]">
|
||||
<label class="block text-[11px] font-bold text-outline uppercase mb-1.5 px-1">Status</label>
|
||||
<select class="w-full bg-white border border-outline-variant rounded px-3 py-1.5 text-[13px] focus:ring-2 focus:ring-primary-container outline-none">
|
||||
<option>Aktif</option>
|
||||
<option>Ditahan</option>
|
||||
<option>Ditutup</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex-1 min-w-[140px]">
|
||||
<label class="block text-[11px] font-bold text-outline uppercase mb-1.5 px-1">Rentang Umur</label>
|
||||
<select class="w-full bg-white border border-outline-variant rounded px-3 py-1.5 text-[13px] focus:ring-2 focus:ring-primary-container outline-none">
|
||||
<option>Semua Umur</option>
|
||||
<option>0-30 Hari</option>
|
||||
<option>30-90 Hari</option>
|
||||
<option>90+ Hari</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="pt-5">
|
||||
<button class="bg-surface-container-high hover:bg-surface-container-highest text-on-surface font-semibold px-4 py-1.5 rounded transition-colors text-[13px] flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="filter_list">filter_list</span>
|
||||
Atur Ulang
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Data Table Container -->
|
||||
<div class="bg-surface-container-lowest rounded-xl border border-outline-variant shadow-sm overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-surface-container-low border-b border-outline-variant">
|
||||
<th class="px-compact-padding py-3 font-label-caps text-label-caps text-outline uppercase pl-6">Kode Lot</th>
|
||||
<th class="px-compact-padding py-3 font-label-caps text-label-caps text-outline uppercase">Pemasok</th>
|
||||
<th class="px-compact-padding py-3 font-label-caps text-label-caps text-outline uppercase">Jenis Item</th>
|
||||
<th class="px-compact-padding py-3 font-label-caps text-label-caps text-outline uppercase text-center">Kualitas</th>
|
||||
<th class="px-compact-padding py-3 font-label-caps text-label-caps text-outline uppercase text-right">Jumlah Tersedia</th>
|
||||
<th class="px-compact-padding py-3 font-label-caps text-label-caps text-outline uppercase text-right">Biaya Satuan</th>
|
||||
<th class="px-compact-padding py-3 font-label-caps text-label-caps text-outline uppercase">Gudang</th>
|
||||
<th class="px-compact-padding py-3 font-label-caps text-label-caps text-outline uppercase text-center">Umur</th>
|
||||
<th class="px-compact-padding py-3 font-label-caps text-label-caps text-outline uppercase">Status</th>
|
||||
<th class="px-compact-padding py-3 font-label-caps text-label-caps text-outline uppercase pr-6 text-right">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-outline-variant font-table-data text-table-data text-on-surface">
|
||||
<!-- Row 1 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-compact-padding py-3 pl-6 font-bold text-primary tracking-tight">LOT-202311-001</td>
|
||||
<td class="px-compact-padding py-3">Kalimantan Source A</td>
|
||||
<td class="px-compact-padding py-3">Bowl (SGP)</td>
|
||||
<td class="px-compact-padding py-3 text-center">AAA</td>
|
||||
<td class="px-compact-padding py-3 text-right">24.50 kg</td>
|
||||
<td class="px-compact-padding py-3 text-right">$850.00</td>
|
||||
<td class="px-compact-padding py-3">
|
||||
<div class="flex flex-col">
|
||||
<span>Pengolahan Utama</span>
|
||||
<span class="text-[11px] text-outline">Zona A-04</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-compact-padding py-3 text-center">12h</td>
|
||||
<td class="px-compact-padding py-3">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-[#E8F5E9] text-[#2E7D32] text-[11px] font-bold">Aktif</span>
|
||||
</td>
|
||||
<td class="px-compact-padding py-3 pr-6 text-right">
|
||||
<button class="text-primary-container font-semibold hover:underline text-[12px]">Lihat Detail</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-compact-padding py-3 pl-6 font-bold text-primary tracking-tight">LOT-202311-042</td>
|
||||
<td class="px-compact-padding py-3">Sumatra Direct</td>
|
||||
<td class="px-compact-padding py-3">Corner (SGP)</td>
|
||||
<td class="px-compact-padding py-3 text-center">AA</td>
|
||||
<td class="px-compact-padding py-3 text-right">12.15 kg</td>
|
||||
<td class="px-compact-padding py-3 text-right">$720.00</td>
|
||||
<td class="px-compact-padding py-3">
|
||||
<div class="flex flex-col">
|
||||
<span>Pengolahan Utama</span>
|
||||
<span class="text-[11px] text-outline">Zona B-12</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-compact-padding py-3 text-center text-error font-semibold">45h</td>
|
||||
<td class="px-compact-padding py-3">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-[#FFF3E0] text-[#E65100] text-[11px] font-bold">Ditahan</span>
|
||||
</td>
|
||||
<td class="px-compact-padding py-3 pr-6 text-right">
|
||||
<button class="text-primary-container font-semibold hover:underline text-[12px]">Lihat Detail</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-compact-padding py-3 pl-6 font-bold text-primary tracking-tight">LOT-202310-156</td>
|
||||
<td class="px-compact-padding py-3">Java Highland</td>
|
||||
<td class="px-compact-padding py-3">Broken</td>
|
||||
<td class="px-compact-padding py-3 text-center">B</td>
|
||||
<td class="px-compact-padding py-3 text-right">0.00 kg</td>
|
||||
<td class="px-compact-padding py-3 text-right">$450.00</td>
|
||||
<td class="px-compact-padding py-3">
|
||||
<div class="flex flex-col text-outline">
|
||||
<span>Penyimpanan Arsip</span>
|
||||
<span class="text-[11px]">Zona X-01</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-compact-padding py-3 text-center text-outline">98h</td>
|
||||
<td class="px-compact-padding py-3">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-[#F5F5F5] text-[#757575] text-[11px] font-bold">Ditutup</span>
|
||||
</td>
|
||||
<td class="px-compact-padding py-3 pr-6 text-right">
|
||||
<button class="text-primary-container font-semibold hover:underline text-[12px]">Lihat Detail</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-compact-padding py-3 pl-6 font-bold text-primary tracking-tight">LOT-202311-088</td>
|
||||
<td class="px-compact-padding py-3">Sumatra Direct</td>
|
||||
<td class="px-compact-padding py-3">Bowl (SGP)</td>
|
||||
<td class="px-compact-padding py-3 text-center">AAA</td>
|
||||
<td class="px-compact-padding py-3 text-right">45.00 kg</td>
|
||||
<td class="px-compact-padding py-3 text-right">$865.00</td>
|
||||
<td class="px-compact-padding py-3">
|
||||
<div class="flex flex-col">
|
||||
<span>Cold Storage B</span>
|
||||
<span class="text-[11px] text-outline">Rak 02-A</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-compact-padding py-3 text-center">5h</td>
|
||||
<td class="px-compact-padding py-3">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-[#E8F5E9] text-[#2E7D32] text-[11px] font-bold">Aktif</span>
|
||||
</td>
|
||||
<td class="px-compact-padding py-3 pr-6 text-right">
|
||||
<button class="text-primary-container font-semibold hover:underline text-[12px]">Lihat Detail</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 5 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-compact-padding py-3 pl-6 font-bold text-primary tracking-tight">LOT-202311-102</td>
|
||||
<td class="px-compact-padding py-3">Kalimantan Source A</td>
|
||||
<td class="px-compact-padding py-3">Fines</td>
|
||||
<td class="px-compact-padding py-3 text-center">C</td>
|
||||
<td class="px-compact-padding py-3 text-right">8.40 kg</td>
|
||||
<td class="px-compact-padding py-3 text-right">$320.00</td>
|
||||
<td class="px-compact-padding py-3">
|
||||
<div class="flex flex-col">
|
||||
<span>Pengolahan Utama</span>
|
||||
<span class="text-[11px] text-outline">Zona A-10</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-compact-padding py-3 text-center">2h</td>
|
||||
<td class="px-compact-padding py-3">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-[#E8F5E9] text-[#2E7D32] text-[11px] font-bold">Aktif</span>
|
||||
</td>
|
||||
<td class="px-compact-padding py-3 pr-6 text-right">
|
||||
<button class="text-primary-container font-semibold hover:underline text-[12px]">Lihat Detail</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Pagination -->
|
||||
<div class="px-6 py-4 bg-surface-container-low border-t border-outline-variant flex items-center justify-between">
|
||||
<p class="text-body-sm font-body-sm text-outline">Menampilkan <span class="font-bold text-on-surface">1 - 5</span> dari 128 lot</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="w-8 h-8 flex items-center justify-center border border-outline-variant rounded bg-white text-outline hover:bg-slate-50 disabled:opacity-50" disabled="">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="chevron_left">chevron_left</span>
|
||||
</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center border border-primary-container rounded bg-primary-container text-white text-[13px] font-bold">1</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center border border-outline-variant rounded bg-white text-on-surface text-[13px] hover:bg-slate-50">2</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center border border-outline-variant rounded bg-white text-on-surface text-[13px] hover:bg-slate-50">3</button>
|
||||
<span class="text-outline px-1">...</span>
|
||||
<button class="w-8 h-8 flex items-center justify-center border border-outline-variant rounded bg-white text-on-surface text-[13px] hover:bg-slate-50">26</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center border border-outline-variant rounded bg-white text-outline hover:bg-slate-50">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="chevron_right">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dashboard Visual Insights (Bento Style) -->
|
||||
<div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="col-span-1 bg-surface-container-lowest border border-outline-variant rounded-xl p-5 shadow-sm">
|
||||
<h3 class="font-h2 text-h2 mb-4 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="pie_chart">pie_chart</span>
|
||||
Distribusi Berdasarkan Kualitas
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<div class="flex justify-between text-[11px] font-bold text-outline uppercase mb-1">
|
||||
<span>Kualitas AAA</span>
|
||||
<span>65%</span>
|
||||
</div>
|
||||
<div class="w-full h-2 bg-slate-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary-container w-[65%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-[11px] font-bold text-outline uppercase mb-1">
|
||||
<span>Kualitas AA</span>
|
||||
<span>25%</span>
|
||||
</div>
|
||||
<div class="w-full h-2 bg-slate-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-[#14B8A6] w-[25%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-[11px] font-bold text-outline uppercase mb-1">
|
||||
<span>Kualitas A / Di Bawah</span>
|
||||
<span>10%</span>
|
||||
</div>
|
||||
<div class="w-full h-2 bg-slate-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-secondary w-[10%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2 bg-primary text-white rounded-xl p-5 shadow-sm overflow-hidden relative">
|
||||
<div class="relative z-10">
|
||||
<h3 class="font-h2 text-h2 mb-2 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined" data-icon="precision_manufacturing">precision_manufacturing</span>
|
||||
Efisiensi Pemrosesan
|
||||
</h3>
|
||||
<p class="text-[13px] opacity-80 mb-6 max-w-md">Rata-rata waktu penyelesaian dari Bahan Baku ke Grade Ekspor telah meningkat sebesar 12% bulan ini.</p>
|
||||
<div class="flex gap-8">
|
||||
<div>
|
||||
<p class="text-[32px] font-black leading-none">4.2h</p>
|
||||
<p class="text-[11px] font-bold opacity-60 uppercase mt-1">Rata-rata Waktu Tunggu</p>
|
||||
</div>
|
||||
<div class="h-10 w-[1px] bg-white/20 self-center"></div>
|
||||
<div>
|
||||
<p class="text-[32px] font-black leading-none">98.4%</p>
|
||||
<p class="text-[11px] font-bold opacity-60 uppercase mt-1">Tingkat Kelulusan QC</p>
|
||||
</div>
|
||||
<div class="h-10 w-[1px] bg-white/20 self-center"></div>
|
||||
<div>
|
||||
<p class="text-[32px] font-black leading-none">2.8t</p>
|
||||
<p class="text-[11px] font-bold opacity-60 uppercase mt-1">Kapasitas Bulanan</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Decorative Graphic -->
|
||||
<div class="absolute right-0 bottom-0 top-0 w-1/3 opacity-20 pointer-events-none">
|
||||
<img class="w-full h-full object-cover grayscale brightness-200" data-alt="high-tech laboratory interior with modern equipment and surgical precision environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBiom7LbF5epFEnj8Qf-ieq3DaKB0N1iLDR_N7QMlB0qqFxXvAbBlHA-pRnuZfgjOOJjXTGheAXziVsM5eCLgaUlmCVu3-M8Xm4olzj67aDf7IJ63aHQXBftksbtRSfE0-I4zdcD9ZYo4rYBebFBvY8T62dEjwhJ4N09ZBOJci5AdStecoAY8vPHbVPLKfSWZg15UN3k7MESSO1FS1BT1V45_vfayutlRrYbExhmCtzQxQOXeTTWLcAo4RsO3GnP-agQEnVa08sHg"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/stock_lot_list/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/stock_lot_list/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 325 KiB |
Reference in New Issue
Block a user