Initial import of AbelBirdNest Stock
This commit is contained in:
449
design-assets/stitch_abel_stock/alokasi_lot_penjualan/code.html
Normal file
449
design-assets/stitch_abel_stock/alokasi_lot_penjualan/code.html
Normal file
@ -0,0 +1,449 @@
|
||||
<!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"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"secondary-container": "#cfe2f9",
|
||||
"on-primary-container": "#92d5df",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"on-background": "#191c1d",
|
||||
"outline": "#6f797a",
|
||||
"on-primary": "#ffffff",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"on-secondary": "#ffffff",
|
||||
"error-container": "#ffdad6",
|
||||
"secondary": "#4e6073",
|
||||
"primary": "#00454c",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"on-surface": "#191c1d",
|
||||
"tertiary-container": "#7c4824",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"surface-variant": "#e1e3e3",
|
||||
"surface-bright": "#f8fafa",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"surface": "#f8fafa",
|
||||
"surface-container": "#eceeee",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"on-error": "#ffffff",
|
||||
"background": "#f8fafa",
|
||||
"surface-dim": "#d8dadb",
|
||||
"surface-tint": "#1d6871",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"error": "#ba1a1a",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"on-tertiary": "#ffffff",
|
||||
"inverse-surface": "#2e3131",
|
||||
"tertiary": "#60320f",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-secondary-container": "#526478",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"primary-container": "#0d5e67"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"container-margin": "24px",
|
||||
"row-height-sm": "32px",
|
||||
"compact-padding": "8px",
|
||||
"gutter": "16px",
|
||||
"row-height-md": "48px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-sm": ["Inter"],
|
||||
"body-base": ["Inter"],
|
||||
"h1": ["Inter"],
|
||||
"display-lot": ["Inter"],
|
||||
"table-data": ["Inter"],
|
||||
"label-caps": ["Inter"],
|
||||
"h2": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"h1": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"display-lot": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "500"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body-base text-on-background antialiased">
|
||||
<!-- TopNavBar -->
|
||||
<header class="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 shadow-sm fixed top-0 z-40 w-full flex justify-between items-center h-14 px-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-lg font-bold text-[#0D5E67] dark:text-white tracking-tight">SwiftLot Walet</span>
|
||||
<div class="h-6 w-px bg-slate-200 mx-2"></div>
|
||||
<h1 class="font-h1 text-h1 text-on-surface">Alokasi Lot</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative group">
|
||||
<span class="material-symbols-outlined text-slate-600 dark:text-slate-400 cursor-pointer p-2 hover:bg-slate-50 rounded-full transition-colors">notifications</span>
|
||||
<span class="absolute top-2 right-2 w-2 h-2 bg-error rounded-full border-2 border-white"></span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-slate-600 dark:text-slate-400 cursor-pointer p-2 hover:bg-slate-50 rounded-full transition-colors">help_outline</span>
|
||||
<div class="flex items-center gap-2 cursor-pointer ml-2">
|
||||
<img alt="User profile" class="w-8 h-8 rounded-full border border-slate-200" data-alt="professional portrait of an operations manager in a clean corporate attire with a soft office background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuArdkfUoSLAXGu3UVcBI2k59l0wFN9WaoP-MWYe8WO9uheFCh9x1XNpekXkBlg-aPvdsxbIQ9WQi2heodPtLAifVEV03YacrQGeDLsFlMuE_O4Crt1s3g93WVnMdIqgS6A9bZe2xJB5HAIeCibmnzMI06Ps5MjpgvzaM8lyW4cEj1xVdF-KOFeRcRd20PH0KzbkThhnqjSIzy95wBfQmRwQoXNsRXsp6InhiNTQQ_W2TavhceNG8v9VTRf7WElZCebdHnvhnCriog"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- SideNavBar -->
|
||||
<aside class="bg-slate-50 dark:bg-slate-950 fixed left-0 top-0 h-full w-64 border-r border-slate-200 dark:border-slate-800 flex flex-col h-screen py-4 z-30">
|
||||
<div class="px-6 mb-8 flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-[#0D5E67] rounded flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-white" style="font-variation-settings: 'FILL' 1;">nest_multi_room</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-teal-900 dark:text-teal-100 font-black text-sm">Sarang Ops</div>
|
||||
<div class="text-[10px] text-slate-500 uppercase tracking-wider font-bold">Processing Plant A</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1 px-3">
|
||||
<div class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 cursor-pointer rounded">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span class="font-body-sm text-body-sm">Dashboard</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 cursor-pointer rounded">
|
||||
<span class="material-symbols-outlined">content_cut</span>
|
||||
<span class="font-body-sm text-body-sm">Sortasi</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 cursor-pointer rounded">
|
||||
<span class="material-symbols-outlined">sell</span>
|
||||
<span class="font-body-sm text-body-sm">Penjualan</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 px-3 py-2 bg-white dark:bg-slate-900 text-[#0D5E67] border-r-4 border-[#0D5E67] shadow-sm font-semibold cursor-pointer rounded-l">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">assignment_turned_in</span>
|
||||
<span class="font-body-sm text-body-sm">Alokasi Lot</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 cursor-pointer rounded">
|
||||
<span class="material-symbols-outlined">inventory</span>
|
||||
<span class="font-body-sm text-body-sm">Picking</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 cursor-pointer rounded">
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
<span class="font-body-sm text-body-sm">Inventory</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 cursor-pointer rounded">
|
||||
<span class="material-symbols-outlined">monitoring</span>
|
||||
<span class="font-body-sm text-body-sm">Analytics</span>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="px-4 mt-auto space-y-1 border-t border-slate-200 pt-4">
|
||||
<button class="w-full bg-primary text-white py-2 rounded font-body-sm flex items-center justify-center gap-2 active:scale-[0.98] transition-transform">
|
||||
<span class="material-symbols-outlined text-[18px]">add</span>
|
||||
New Lot Scan
|
||||
</button>
|
||||
<div class="flex items-center gap-3 px-3 py-2 mt-2 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] transition-all cursor-pointer rounded">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="font-body-sm text-body-sm">Settings</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="pl-64 pt-14 h-screen overflow-hidden">
|
||||
<div class="p-container-margin h-full flex flex-col gap-gutter">
|
||||
<!-- Context Header & Actions -->
|
||||
<div class="flex justify-between items-end shrink-0">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-label-caps font-label-caps text-slate-500 uppercase">Sales Order</span>
|
||||
<span class="text-label-caps font-label-caps bg-primary-container text-white px-2 py-0.5 rounded">SO-2023-1082</span>
|
||||
</div>
|
||||
<h2 class="font-display-lot text-display-lot text-on-surface">Alokasi Lot Produksi</h2>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="flex items-center gap-2 px-4 py-2 bg-white border border-primary text-primary rounded font-body-sm hover:bg-slate-50 active:scale-95 transition-all">
|
||||
<span class="material-symbols-outlined text-[20px]">auto_awesome</span>
|
||||
Auto-Allocate FIFO
|
||||
</button>
|
||||
<button class="flex items-center gap-2 px-6 py-2 bg-primary text-white rounded font-body-sm shadow-sm hover:brightness-110 active:scale-95 transition-all">
|
||||
<span class="material-symbols-outlined text-[20px]">save</span>
|
||||
Simpan Alokasi
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dashboard Body -->
|
||||
<div class="flex-1 flex gap-gutter min-h-0">
|
||||
<!-- Left Panel: Summary -->
|
||||
<div class="w-80 flex flex-col gap-gutter shrink-0">
|
||||
<div class="bg-white rounded border border-outline-variant p-4 shadow-sm flex flex-col gap-4 overflow-y-auto">
|
||||
<h3 class="font-h2 text-h2 text-primary flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[20px]">list_alt</span>
|
||||
Ringkasan Pesanan
|
||||
</h3>
|
||||
<!-- Order Items -->
|
||||
<div class="space-y-4">
|
||||
<div class="p-3 bg-slate-50 rounded border border-slate-100">
|
||||
<div class="text-label-caps font-label-caps text-slate-500 mb-1">MANGKUK GRADE AAA</div>
|
||||
<div class="flex justify-between items-end mb-2">
|
||||
<span class="text-h1 font-h1 text-[#0D5E67]">12.50 <span class="text-body-sm font-body-sm text-slate-400 italic">kg</span></span>
|
||||
<span class="text-body-sm font-body-sm text-slate-600">Dibutuhkan</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-200 h-1.5 rounded-full overflow-hidden mb-2">
|
||||
<div class="bg-[#0D5E67] h-full" style="width: 65%;"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center text-table-data font-table-data">
|
||||
<span class="text-primary">Teralokasi: 8.12 kg</span>
|
||||
<span class="text-error">Sisa: 4.38 kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 bg-slate-50 rounded border border-slate-100">
|
||||
<div class="text-label-caps font-label-caps text-slate-500 mb-1">SUDUT GRADE A</div>
|
||||
<div class="flex justify-between items-end mb-2">
|
||||
<span class="text-h1 font-h1 text-[#0D5E67]">5.00 <span class="text-body-sm font-body-sm text-slate-400 italic">kg</span></span>
|
||||
<span class="text-body-sm font-body-sm text-slate-600">Dibutuhkan</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-200 h-1.5 rounded-full overflow-hidden mb-2">
|
||||
<div class="bg-[#0D5E67] h-full" style="width: 0%;"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center text-table-data font-table-data">
|
||||
<span class="text-slate-400">Teralokasi: 0.00 kg</span>
|
||||
<span class="text-slate-600">Sisa: 5.00 kg</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Statistics -->
|
||||
<div class="mt-auto pt-4 border-t border-slate-100 space-y-3">
|
||||
<div class="flex justify-between text-body-sm">
|
||||
<span class="text-slate-500">Total Lot Terpilih</span>
|
||||
<span class="font-bold">14 Lot</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-body-sm">
|
||||
<span class="text-slate-500">Estimasi Value</span>
|
||||
<span class="font-bold">Rp 124.500k</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Filter Card -->
|
||||
<div class="bg-[#0D5E67] text-white rounded p-4 shadow-sm">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="material-symbols-outlined text-[18px]">filter_list</span>
|
||||
<span class="font-h2 text-h2 text-white">Filter Kriteria</span>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label class="text-[10px] uppercase font-bold text-teal-200 opacity-80">Grade Item</label>
|
||||
<select class="w-full bg-[#094e55] border-teal-800 text-white text-body-sm rounded p-2 focus:ring-2 focus:ring-teal-400">
|
||||
<option>Mangkuk Grade AAA</option>
|
||||
<option>Sudut Grade A</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input checked="" class="rounded text-primary focus:ring-teal-400" id="match-exact" type="checkbox"/>
|
||||
<label class="text-body-sm" for="match-exact">Hanya Lot Siap Export</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Panel: Data Table -->
|
||||
<div class="flex-1 bg-white rounded border border-outline-variant shadow-sm flex flex-col min-w-0">
|
||||
<div class="p-4 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
|
||||
<div class="relative w-72">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[20px]">search</span>
|
||||
<input class="w-full pl-10 pr-4 py-2 border border-outline-variant rounded text-body-sm focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Cari Lot Code atau Supplier..." type="text"/>
|
||||
</div>
|
||||
<div class="text-body-sm text-slate-500">
|
||||
Menampilkan <span class="font-bold text-on-surface">32 Lot</span> tersedia
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 overflow-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead class="sticky top-0 bg-white z-10">
|
||||
<tr class="border-b border-slate-200">
|
||||
<th class="px-4 py-3 text-label-caps font-label-caps text-slate-500 uppercase tracking-wider">Lot Code</th>
|
||||
<th class="px-4 py-3 text-label-caps font-label-caps text-slate-500 uppercase tracking-wider">Supplier</th>
|
||||
<th class="px-4 py-3 text-label-caps font-label-caps text-slate-500 uppercase tracking-wider">Qty Tersedia</th>
|
||||
<th class="px-4 py-3 text-label-caps font-label-caps text-slate-500 uppercase tracking-wider text-right">Unit Cost</th>
|
||||
<th class="px-4 py-3 text-label-caps font-label-caps text-slate-500 uppercase tracking-wider text-center">FIFO Badge</th>
|
||||
<th class="px-4 py-3 text-label-caps font-label-caps text-primary uppercase tracking-wider text-right w-40">Alokasi (kg)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
<!-- Row 1 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-4 py-compact-padding">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-table-data text-on-surface">LOT-BRG-2309-001</span>
|
||||
<span class="text-[10px] text-slate-400">Harvest: 12 Sep 2023</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-slate-600">Sari Alam House</td>
|
||||
<td class="px-4 py-compact-padding">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-table-data text-table-data text-on-surface">2.45 kg</span>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-green-50 text-green-700 rounded border border-green-200">MC 12%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding text-table-data font-table-data text-slate-600 text-right">14.500.000</td>
|
||||
<td class="px-4 py-compact-padding text-center">
|
||||
<span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-orange-100 text-orange-700 font-bold text-[10px] border border-orange-200" title="First In First Out Priority">1</span>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding text-right">
|
||||
<div class="relative inline-block w-32">
|
||||
<input class="w-full text-right font-bold text-primary border-slate-200 focus:border-primary focus:ring-1 focus:ring-primary rounded p-1 text-table-data" step="0.01" type="number" value="2.45"/>
|
||||
<span class="absolute right-8 top-1/2 -translate-y-1/2 text-[10px] text-slate-300">kg</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-compact-padding">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-table-data text-on-surface">LOT-BRG-2309-004</span>
|
||||
<span class="text-[10px] text-slate-400">Harvest: 14 Sep 2023</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-slate-600">Bukit Hijau</td>
|
||||
<td class="px-4 py-compact-padding">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-table-data text-table-data text-on-surface">1.80 kg</span>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-green-50 text-green-700 rounded border border-green-200">MC 11%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding text-table-data font-table-data text-slate-600 text-right">14.200.000</td>
|
||||
<td class="px-4 py-compact-padding text-center">
|
||||
<span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-orange-100 text-orange-700 font-bold text-[10px] border border-orange-200">2</span>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding text-right">
|
||||
<div class="relative inline-block w-32">
|
||||
<input class="w-full text-right font-bold text-primary border-slate-200 focus:border-primary focus:ring-1 focus:ring-primary rounded p-1 text-table-data" step="0.01" type="number" value="1.80"/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-compact-padding">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-table-data text-on-surface">LOT-CST-2310-012</span>
|
||||
<span class="text-[10px] text-slate-400">Harvest: 02 Oct 2023</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-slate-600">Mitra Mandiri</td>
|
||||
<td class="px-4 py-compact-padding">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-table-data text-table-data text-on-surface">5.10 kg</span>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-yellow-50 text-yellow-700 rounded border border-yellow-200">MC 14%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding text-table-data font-table-data text-slate-600 text-right">13.800.000</td>
|
||||
<td class="px-4 py-compact-padding text-center">
|
||||
<span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-slate-100 text-slate-400 font-bold text-[10px] border border-slate-200">3</span>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding text-right">
|
||||
<div class="relative inline-block w-32">
|
||||
<input class="w-full text-right font-bold text-primary border-slate-200 focus:border-primary focus:ring-1 focus:ring-primary rounded p-1 text-table-data" step="0.01" type="number" value="3.87"/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-compact-padding">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-table-data text-on-surface">LOT-PRM-2310-045</span>
|
||||
<span class="text-[10px] text-slate-400">Harvest: 10 Oct 2023</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-slate-600">Prima Walet</td>
|
||||
<td class="px-4 py-compact-padding">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-table-data text-table-data text-on-surface">3.20 kg</span>
|
||||
<span class="text-[10px] px-1.5 py-0.5 bg-green-50 text-green-700 rounded border border-green-200">MC 12%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding text-table-data font-table-data text-slate-600 text-right">14.100.000</td>
|
||||
<td class="px-4 py-compact-padding text-center">
|
||||
<span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-slate-100 text-slate-400 font-bold text-[10px] border border-slate-200">4</span>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding text-right">
|
||||
<div class="relative inline-block w-32">
|
||||
<input class="w-full text-right font-medium text-slate-400 border-slate-200 focus:border-primary focus:ring-1 focus:ring-primary rounded p-1 text-table-data" placeholder="0.00" step="0.01" type="number"/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- More placeholder rows -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-compact-padding">
|
||||
<div class="flex flex-col opacity-50">
|
||||
<span class="font-table-data text-table-data text-on-surface">LOT-PRM-2310-048</span>
|
||||
<span class="text-[10px] text-slate-400">Harvest: 11 Oct 2023</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-slate-600 opacity-50">Prima Walet</td>
|
||||
<td class="px-4 py-compact-padding opacity-50">
|
||||
<span class="font-table-data text-table-data text-on-surface">1.40 kg</span>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding text-table-data font-table-data text-slate-600 text-right opacity-50">14.050.000</td>
|
||||
<td class="px-4 py-compact-padding text-center">
|
||||
<span class="inline-flex items-center justify-center w-6 h-6 rounded-full bg-slate-100 text-slate-400 font-bold text-[10px] border border-slate-200 opacity-50">5</span>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding text-right">
|
||||
<div class="relative inline-block w-32">
|
||||
<input class="w-full text-right font-medium text-slate-400 border-slate-200 focus:border-primary focus:ring-1 focus:ring-primary rounded p-1 text-table-data" placeholder="0.00" step="0.01" type="number"/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Footer Info -->
|
||||
<div class="p-4 border-t border-slate-100 bg-slate-50 flex justify-between items-center text-body-sm">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-3 h-3 bg-orange-100 border border-orange-200 rounded-full"></span>
|
||||
<span class="text-slate-600">Prioritas FIFO</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<span class="w-3 h-3 bg-primary border border-primary rounded-full"></span>
|
||||
<span class="text-slate-600">Terisi (Penuh)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-slate-500">Subtotal Alokasi: <span class="font-bold text-on-surface text-h2">8.12 kg</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- FAB (Suppressed on this specific task page per instructions but layout provided for context) -->
|
||||
<!-- <button class="fixed bottom-6 right-6 w-14 h-14 bg-primary text-white rounded-full shadow-lg flex items-center justify-center active:scale-90 transition-transform">
|
||||
<span class="material-symbols-outlined">qr_code_scanner</span>
|
||||
</button> -->
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user