Initial import of AbelBirdNest Stock
This commit is contained in:
434
design-assets/stitch_abel_stock/sesi_sortasi/code.html
Normal file
434
design-assets/stitch_abel_stock/sesi_sortasi/code.html
Normal file
@ -0,0 +1,434 @@
|
||||
<!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;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background antialiased flex">
|
||||
<!-- SideNavBar -->
|
||||
<aside class="fixed left-0 top-0 h-full w-64 border-r border-slate-200 bg-slate-50 flex flex-col py-4 z-50">
|
||||
<div class="px-6 mb-8">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-primary rounded flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-white text-lg">nest_eco</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-teal-900 font-black text-body-base leading-tight">Sarang Ops</h2>
|
||||
<p class="text-[11px] text-slate-500 font-medium">Processing Plant A</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 px-3 space-y-1">
|
||||
<div class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:bg-slate-100 rounded cursor-pointer transition-all duration-150">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span class="text-[13px] font-medium">Dashboard</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 px-3 py-2 bg-white text-[#0D5E67] border-r-4 border-[#0D5E67] shadow-sm rounded cursor-pointer transition-all duration-150">
|
||||
<span class="material-symbols-outlined">content_cut</span>
|
||||
<span class="text-[13px] font-bold">Sortasi</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:bg-slate-100 rounded cursor-pointer transition-all duration-150">
|
||||
<span class="material-symbols-outlined">sell</span>
|
||||
<span class="text-[13px] font-medium">Penjualan</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:bg-slate-100 rounded cursor-pointer transition-all duration-150">
|
||||
<span class="material-symbols-outlined">assignment_turned_in</span>
|
||||
<span class="text-[13px] font-medium">Alokasi Lot</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:bg-slate-100 rounded cursor-pointer transition-all duration-150">
|
||||
<span class="material-symbols-outlined">inventory</span>
|
||||
<span class="text-[13px] font-medium">Picking</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:bg-slate-100 rounded cursor-pointer transition-all duration-150">
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
<span class="text-[13px] font-medium">Inventory</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:bg-slate-100 rounded cursor-pointer transition-all duration-150">
|
||||
<span class="material-symbols-outlined">monitoring</span>
|
||||
<span class="text-[13px] font-medium">Analytics</span>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="mt-auto px-3 pt-4 border-t border-slate-200">
|
||||
<button class="w-full bg-[#0D5E67] text-white py-2 px-4 rounded font-bold text-[13px] flex items-center justify-center gap-2 mb-4 hover:opacity-90 active:scale-[0.98] transition-all">
|
||||
<span class="material-symbols-outlined text-sm">add_circle</span>
|
||||
New Lot Scan
|
||||
</button>
|
||||
<div class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:bg-slate-100 rounded cursor-pointer transition-all">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="text-[13px] font-medium">Settings</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:bg-slate-100 rounded cursor-pointer transition-all">
|
||||
<span class="material-symbols-outlined">contact_support</span>
|
||||
<span class="text-[13px] font-medium">Support</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="flex-1 ml-64 min-h-screen">
|
||||
<!-- TopNavBar -->
|
||||
<header class="h-14 px-6 w-full flex justify-between items-center bg-white border-b border-slate-200 shadow-sm sticky top-0 z-40">
|
||||
<div class="flex items-center gap-4">
|
||||
<h1 class="text-lg font-bold text-[#0D5E67] tracking-tight">SwiftLot Walet</h1>
|
||||
<div class="h-6 w-px bg-slate-200"></div>
|
||||
<div class="text-slate-600 text-sm font-medium flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-sm">navigate_next</span>
|
||||
Sesi Sortasi Baru
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center bg-slate-100 px-3 py-1.5 rounded-full">
|
||||
<span class="material-symbols-outlined text-slate-400 text-lg mr-2">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-sm w-48 text-slate-600" placeholder="Cari Lot atau Petugas..." type="text"/>
|
||||
</div>
|
||||
<button class="text-slate-600 hover:bg-slate-50 p-2 rounded-full transition-colors cursor-pointer active:opacity-80">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<button class="text-slate-600 hover:bg-slate-50 p-2 rounded-full transition-colors cursor-pointer active:opacity-80">
|
||||
<span class="material-symbols-outlined">help_outline</span>
|
||||
</button>
|
||||
<div class="w-8 h-8 rounded-full bg-slate-200 overflow-hidden border border-slate-300">
|
||||
<img alt="User profile" class="w-full h-full object-cover" data-alt="professional male portrait with corporate background soft lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDdmfrvD8VJX200RHkT2GTGLVeUqP6iY0vV_WxX_0LLnICGQeHTqKlEuGG2VEzxAvSeThOhsTvyLE1_KX3n8LRV2NfKuyM5HxDVl_6H-0Cm5NTVzZoGmoElwcbziGgsDt_ZdlUzusIKnxs86JDY3kmu08lbHKm0XHObdqqUyOh2XfN-CehZmqxX5OeDLlJ-ZxAeWch2rugtFDOmJW_CXQum8LNu7BTE17ImQtIW1QIoVoiEzjK3A3XBsU_bpkWDhNaUra5RMsgOqQ"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Area -->
|
||||
<div class="p-container-margin max-w-7xl mx-auto space-y-6">
|
||||
<!-- Header Section -->
|
||||
<div class="flex justify-between items-end">
|
||||
<div>
|
||||
<h1 class="font-h1 text-h1 text-primary">Sesi Sortasi Baru</h1>
|
||||
<p class="font-body-sm text-body-sm text-secondary">Pisahkan material lot sumber menjadi grade hasil akhir.</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="text-right">
|
||||
<p class="font-label-caps text-label-caps text-secondary uppercase">OPERATOR</p>
|
||||
<p class="font-table-data text-table-data">Budi Santoso</p>
|
||||
</div>
|
||||
<div class="h-8 w-px bg-slate-200"></div>
|
||||
<div class="text-right">
|
||||
<p class="font-label-caps text-label-caps text-secondary uppercase">ID SESI</p>
|
||||
<p class="font-table-data text-table-data">#SORT-20231027-001</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Configuration Grid -->
|
||||
<div class="grid grid-cols-12 gap-gutter">
|
||||
<!-- Source Lot Card (3 Cols) -->
|
||||
<div class="col-span-12 lg:col-span-4 bg-white p-6 border border-slate-200 rounded-xl shadow-sm">
|
||||
<h2 class="font-h2 text-h2 mb-4 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">input</span>
|
||||
Input Material
|
||||
</h2>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="font-label-caps text-label-caps text-secondary mb-1.5 block">LOT SUMBER (SOURCE)</label>
|
||||
<div class="relative">
|
||||
<select class="w-full border-slate-200 rounded focus:ring-2 focus:ring-primary focus:border-primary text-body-base font-body-base appearance-none bg-slate-50">
|
||||
<option>RAW-JKT-102293 (Stock: 12.50 kg)</option>
|
||||
<option>RAW-MDN-882102 (Stock: 5.20 kg)</option>
|
||||
<option>RAW-SBY-330192 (Stock: 22.15 kg)</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-3 top-2.5 text-slate-400 pointer-events-none">unfold_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="font-label-caps text-label-caps text-secondary mb-1.5 block">KUANTITAS INPUT (KG)</label>
|
||||
<div class="relative">
|
||||
<input class="w-full border-slate-200 rounded focus:ring-2 focus:ring-primary focus:border-primary text-display-lot font-display-lot bg-white pr-12" step="0.01" type="number" value="10.00"/>
|
||||
<span class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 font-bold text-sm">KG</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-3 bg-slate-50 border border-slate-100 rounded flex items-start gap-3">
|
||||
<span class="material-symbols-outlined text-teal-600 mt-0.5">info</span>
|
||||
<p class="text-[12px] text-slate-600 leading-relaxed">
|
||||
Pastikan lot sumber sudah melalui tahap QC awal. Berat input akan dikurangi langsung dari stok gudang raw material.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sorting Result Table (9 Cols) -->
|
||||
<div class="col-span-12 lg:col-span-8 bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden flex flex-col">
|
||||
<div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center">
|
||||
<h2 class="font-h2 text-h2 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">splitscreen</span>
|
||||
Hasil Pecahan (Output)
|
||||
</h2>
|
||||
<button class="text-primary font-bold text-[13px] flex items-center gap-1 hover:bg-teal-50 px-3 py-1.5 rounded transition-colors">
|
||||
<span class="material-symbols-outlined text-sm">add</span>
|
||||
Tambah Baris
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 overflow-x-auto">
|
||||
<table class="w-full text-left">
|
||||
<thead class="bg-slate-50 border-b border-slate-100">
|
||||
<tr>
|
||||
<th class="px-6 py-3 font-label-caps text-label-caps text-secondary">JENIS ITEM</th>
|
||||
<th class="px-6 py-3 font-label-caps text-label-caps text-secondary">GRADE HASIL</th>
|
||||
<th class="px-12 py-3 font-label-caps text-label-caps text-secondary text-right">QTY (KG)</th>
|
||||
<th class="px-6 py-3 font-label-caps text-label-caps text-secondary">CATATAN</th>
|
||||
<th class="px-4 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-compact-padding">
|
||||
<select class="w-full border-none focus:ring-0 text-table-data font-table-data bg-transparent">
|
||||
<option>Mangkok (Bowl)</option>
|
||||
<option>Sudut (Corner)</option>
|
||||
<option>Patahan (Broken)</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="px-6 py-compact-padding">
|
||||
<select class="w-full border-none focus:ring-0 text-table-data font-table-data bg-transparent">
|
||||
<option>Super AAA</option>
|
||||
<option>Grade A</option>
|
||||
<option>Grade B</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="px-12 py-compact-padding">
|
||||
<input class="w-full border-none focus:ring-0 text-table-data font-table-data text-right bg-transparent" step="0.01" type="number" value="4.50"/>
|
||||
</td>
|
||||
<td class="px-6 py-compact-padding">
|
||||
<input class="w-full border-none focus:ring-0 text-[12px] bg-transparent" placeholder="Opsional..." type="text"/>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding text-right">
|
||||
<button class="text-slate-300 hover:text-error transition-colors">
|
||||
<span class="material-symbols-outlined text-lg">delete</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-compact-padding">
|
||||
<select class="w-full border-none focus:ring-0 text-table-data font-table-data bg-transparent">
|
||||
<option>Sudut (Corner)</option>
|
||||
<option>Mangkok (Bowl)</option>
|
||||
<option>Patahan (Broken)</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="px-6 py-compact-padding">
|
||||
<select class="w-full border-none focus:ring-0 text-table-data font-table-data bg-transparent">
|
||||
<option>Grade A</option>
|
||||
<option>Super AAA</option>
|
||||
<option>Grade B</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="px-12 py-compact-padding">
|
||||
<input class="w-full border-none focus:ring-0 text-table-data font-table-data text-right bg-transparent" step="0.01" type="number" value="3.25"/>
|
||||
</td>
|
||||
<td class="px-6 py-compact-padding">
|
||||
<input class="w-full border-none focus:ring-0 text-[12px] bg-transparent" placeholder="Opsional..." type="text"/>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding text-right">
|
||||
<button class="text-slate-300 hover:text-error transition-colors">
|
||||
<span class="material-symbols-outlined text-lg">delete</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-compact-padding">
|
||||
<select class="w-full border-none focus:ring-0 text-table-data font-table-data bg-transparent">
|
||||
<option>Patahan (Broken)</option>
|
||||
<option>Mangkok (Bowl)</option>
|
||||
<option>Sudut (Corner)</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="px-6 py-compact-padding">
|
||||
<select class="w-full border-none focus:ring-0 text-table-data font-table-data bg-transparent">
|
||||
<option>Standard</option>
|
||||
<option>Grade A</option>
|
||||
<option>Grade B</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="px-12 py-compact-padding">
|
||||
<input class="w-full border-none focus:ring-0 text-table-data font-table-data text-right bg-transparent" step="0.01" type="number" value="1.15"/>
|
||||
</td>
|
||||
<td class="px-6 py-compact-padding">
|
||||
<input class="w-full border-none focus:ring-0 text-[12px] bg-transparent" placeholder="Opsional..." type="text"/>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding text-right">
|
||||
<button class="text-slate-300 hover:text-error transition-colors">
|
||||
<span class="material-symbols-outlined text-lg">delete</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Losses Section -->
|
||||
<div class="p-6 bg-slate-50 border-t border-slate-100 grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div>
|
||||
<label class="font-label-caps text-label-caps text-secondary mb-1 block">REJECT (KG)</label>
|
||||
<input class="w-full border-slate-200 rounded focus:ring-primary text-table-data font-table-data" step="0.01" type="number" value="0.25"/>
|
||||
<p class="text-[11px] text-slate-500 mt-1">Material tidak layak proses</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="font-label-caps text-label-caps text-secondary mb-1 block">SHRINKAGE / PENYUSUTAN (KG)</label>
|
||||
<input class="w-full border-slate-200 rounded focus:ring-primary text-table-data font-table-data bg-slate-100" readonly="" step="0.01" type="number" value="0.85"/>
|
||||
<p class="text-[11px] text-teal-600 mt-1 font-semibold">Dihitung otomatis (Loss 8.5%)</p>
|
||||
</div>
|
||||
<div class="bg-primary text-white p-4 rounded-lg flex flex-col justify-center items-end">
|
||||
<span class="text-[11px] font-bold opacity-80 uppercase tracking-widest">TOTAL BALANCE</span>
|
||||
<span class="text-2xl font-bold">10.00 <small class="text-sm font-normal">KG</small></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dashboard Summary Widgets -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-gutter">
|
||||
<div class="bg-white p-4 border border-slate-200 rounded-lg flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-teal-50 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined">analytics</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-caps text-label-caps text-secondary uppercase">EFEKTIVITAS</p>
|
||||
<p class="font-display-lot text-lg text-primary">91.5%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 border border-slate-200 rounded-lg flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-amber-50 flex items-center justify-center text-amber-600">
|
||||
<span class="material-symbols-outlined">trending_down</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-caps text-label-caps text-secondary uppercase">SHRINKAGE RATE</p>
|
||||
<p class="font-display-lot text-lg text-amber-600">8.50%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 border border-slate-200 rounded-lg flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-50 flex items-center justify-center text-blue-600">
|
||||
<span class="material-symbols-outlined">category</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-caps text-label-caps text-secondary uppercase">JUMLAH GRADE</p>
|
||||
<p class="font-display-lot text-lg text-blue-600">3 Kelas</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 border border-slate-200 rounded-lg flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-slate-600">
|
||||
<span class="material-symbols-outlined">timer</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-caps text-label-caps text-secondary uppercase">DURASI SESI</p>
|
||||
<p class="font-display-lot text-lg text-slate-600">00:42:15</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Action Footer -->
|
||||
<div class="flex justify-between items-center bg-white p-6 border border-slate-200 rounded-xl shadow-sm">
|
||||
<div class="flex items-center gap-2 text-slate-500">
|
||||
<span class="material-symbols-outlined">history</span>
|
||||
<p class="text-body-sm font-body-sm italic">Draft disimpan otomatis pada 14:20</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="px-6 py-2.5 border border-primary text-primary font-bold rounded-lg hover:bg-teal-50 transition-colors">
|
||||
Simpan Draft
|
||||
</button>
|
||||
<button class="px-8 py-2.5 bg-primary text-white font-bold rounded-lg shadow-md hover:bg-opacity-90 active:scale-[0.98] transition-all flex items-center gap-2">
|
||||
<span class="material-symbols-outlined">check_circle</span>
|
||||
Selesaikan & Buat Lot Baru
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/sesi_sortasi/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/sesi_sortasi/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 249 KiB |
Reference in New Issue
Block a user