Initial import of AbelBirdNest Stock
This commit is contained in:
325
design-assets/stitch_abel_stock/formulir_regrade/code.html
Normal file
325
design-assets/stitch_abel_stock/formulir_regrade/code.html
Normal file
@ -0,0 +1,325 @@
|
||||
<!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;
|
||||
vertical-align: middle;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background">
|
||||
<!-- 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 h-screen py-4 z-50">
|
||||
<div class="px-6 mb-8 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" style="font-variation-settings: 'FILL' 1;">nest_eco</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-teal-900 dark:text-teal-100 font-black text-[15px]">Sarang Ops</h1>
|
||||
<p class="text-[11px] text-slate-500 uppercase tracking-wider font-bold">Processing Plant A</p>
|
||||
</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 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-inter text-[13px] font-medium">Dashboard</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 transition-all duration-150 cursor-pointer rounded">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">content_cut</span>
|
||||
<span class="font-inter text-[13px] font-medium">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-inter text-[13px] font-medium">Penjualan</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">assignment_turned_in</span>
|
||||
<span class="font-inter text-[13px] font-medium">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-inter text-[13px] font-medium">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-inter text-[13px] font-medium">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-inter text-[13px] font-medium">Analytics</span>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="px-3 mt-auto pt-4 border-t border-slate-200 dark:border-slate-800 space-y-1">
|
||||
<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">settings</span>
|
||||
<span class="font-inter text-[13px] font-medium">Settings</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">contact_support</span>
|
||||
<span class="font-inter text-[13px] font-medium">Support</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="ml-64 min-h-screen flex flex-col">
|
||||
<!-- TopNavBar -->
|
||||
<header class="sticky top-0 z-40 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 shadow-sm flex justify-between items-center h-14 px-6 w-full">
|
||||
<div class="flex items-center gap-6">
|
||||
<span class="text-lg font-bold text-[#0D5E67] dark:text-white tracking-tight">SwiftLot Walet</span>
|
||||
<div class="relative flex items-center">
|
||||
<span class="material-symbols-outlined absolute left-3 text-slate-400 text-sm">search</span>
|
||||
<input class="bg-slate-100 dark:bg-slate-800 border-none rounded-full py-1.5 pl-9 pr-4 text-sm w-64 focus:ring-2 focus:ring-primary" placeholder="Cari lot atau grade..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800 p-2 rounded-full cursor-pointer transition-colors">notifications</span>
|
||||
<span class="material-symbols-outlined text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800 p-2 rounded-full cursor-pointer transition-colors">help_outline</span>
|
||||
</div>
|
||||
<div class="h-8 w-8 rounded-full bg-slate-200 overflow-hidden border border-slate-300">
|
||||
<img alt="User profile" class="h-full w-full object-cover" data-alt="Close-up of a professional warehouse manager profile picture with a clean office background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDcwI2A1pYlDgvqlJGfZycIQPrRt_FK8j7xpgQIgxXPOEAodYnPEUE0x3BsEJwiEfWeERGwqCOHCsdEDuAB8vC2RhxIRy4TEwY0MFWtTtVk-xCzrcdSSfSjJ3f6-FGYdyROQdHjJVrrxKpDKjvaxu3wpuwRZCAcHVaXMSDmFhUG7tkzvvKkdX79rVE88CU7M_u-P6pO0_qahgWOIg4HSx0eLaRMkNYy14B0pU-hQmuYWcC8zE-C5rw0qNDioHm-Xcp5nM0LwFghIg"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Page Canvas -->
|
||||
<div class="flex-1 p-container-margin overflow-auto">
|
||||
<!-- Breadcrumbs -->
|
||||
<nav class="flex mb-6 text-body-sm font-body-sm text-on-surface-variant gap-2 items-center">
|
||||
<span class="cursor-pointer hover:text-primary">Sortasi</span>
|
||||
<span class="material-symbols-outlined text-base">chevron_right</span>
|
||||
<span class="cursor-pointer hover:text-primary">Inventory Logs</span>
|
||||
<span class="material-symbols-outlined text-base">chevron_right</span>
|
||||
<span class="text-on-surface font-semibold">Formulir Regrade</span>
|
||||
</nav>
|
||||
<div class="grid grid-cols-12 gap-gutter">
|
||||
<!-- Left: Form Card -->
|
||||
<div class="col-span-12 lg:col-span-7 space-y-gutter">
|
||||
<div class="bg-surface-container-lowest border border-outline-variant p-6 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-h1 font-h1 text-primary">Regrade Lot</h2>
|
||||
<span class="bg-primary-container/10 text-primary-container px-3 py-1 text-label-caps font-label-caps rounded-full">ACTION REQUIRED</span>
|
||||
</div>
|
||||
<form class="space-y-6">
|
||||
<!-- Source Lot & Readonly Grade -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-label-caps font-label-caps text-on-surface-variant">SOURCE LOT ID</label>
|
||||
<div class="relative">
|
||||
<input class="w-full bg-surface-container-low border border-outline-variant px-compact-padding py-2 font-display-lot text-body-base focus:ring-2 focus:ring-primary" readonly="" type="text" value="LOT-2023-X9921"/>
|
||||
<span class="material-symbols-outlined absolute right-3 top-2.5 text-slate-400">lock</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-label-caps font-label-caps text-on-surface-variant">GRADE ASAL (READONLY)</label>
|
||||
<input class="w-full bg-surface-container-low border border-outline-variant px-compact-padding py-2 font-table-data text-body-base text-slate-500" readonly="" type="text" value="Super AAA - Premium"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Target Grade & Qty -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-2">
|
||||
<label class="text-label-caps font-label-caps text-on-surface-variant">GRADE TUJUAN</label>
|
||||
<select class="w-full bg-white border border-outline-variant px-compact-padding py-2 font-table-data text-body-base focus:ring-2 focus:ring-primary">
|
||||
<option value="">Pilih Grade Tujuan...</option>
|
||||
<option value="A1">Super AAA - Regular</option>
|
||||
<option value="A2">Standard Grade A</option>
|
||||
<option value="B1">Broken - Large</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-label-caps font-label-caps text-on-surface-variant">QTY YANG DIUBAH (KG)</label>
|
||||
<div class="relative">
|
||||
<input class="w-full bg-white border border-outline-variant px-compact-padding py-2 font-table-data text-body-base focus:ring-2 focus:ring-primary text-right pr-12" placeholder="0.00" type="number"/>
|
||||
<span class="absolute right-3 top-2 text-on-surface-variant font-bold text-xs">kg</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Reason & Notes -->
|
||||
<div class="space-y-2">
|
||||
<label class="text-label-caps font-label-caps text-on-surface-variant">ALASAN REGRADE</label>
|
||||
<select class="w-full bg-white border border-outline-variant px-compact-padding py-2 font-table-data text-body-base focus:ring-2 focus:ring-primary">
|
||||
<option value="">Pilih Alasan...</option>
|
||||
<option value="qc_failed">Gagal Standar QC Internal</option>
|
||||
<option value="moisture_adj">Penyesuaian Kadar Air</option>
|
||||
<option value="sorting_error">Kesalahan Sortasi Awal</option>
|
||||
<option value="client_request">Permintaan Khusus Klien</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="text-label-caps font-label-caps text-on-surface-variant">CATATAN TAMBAHAN</label>
|
||||
<textarea class="w-full bg-white border border-outline-variant px-compact-padding py-2 font-body-base text-body-base focus:ring-2 focus:ring-primary" placeholder="Berikan rincian jika perlu..." rows="3"></textarea>
|
||||
</div>
|
||||
<div class="pt-4 flex gap-4">
|
||||
<button class="flex-1 py-3 border border-primary text-primary font-bold text-label-caps hover:bg-primary-container hover:text-white transition-colors" type="button">BATALKAN</button>
|
||||
<button class="flex-1 py-3 bg-primary text-white font-bold text-label-caps hover:bg-primary-container transition-colors shadow-sm" type="submit">SIMPAN PERUBAHAN</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right: Preview & Context -->
|
||||
<div class="col-span-12 lg:col-span-5 space-y-gutter">
|
||||
<!-- Real-time Preview Card -->
|
||||
<div class="bg-white border border-outline-variant shadow-sm flex flex-col">
|
||||
<div class="p-4 border-b border-outline-variant bg-surface-container-low">
|
||||
<h3 class="text-h2 font-h2 text-on-surface flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">analytics</span>
|
||||
Preview Perubahan Lot
|
||||
</h3>
|
||||
</div>
|
||||
<div class="p-6 space-y-8">
|
||||
<!-- Source Change -->
|
||||
<div class="relative pl-6 border-l-2 border-red-200">
|
||||
<span class="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-red-100 border-2 border-red-500"></span>
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<p class="text-label-caps text-on-surface-variant">LOT ASAL (-)</p>
|
||||
<p class="font-display-lot text-h2">LOT-2023-X9921</p>
|
||||
</div>
|
||||
<span class="text-error font-bold text-body-base">-1.50 kg</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-body-sm text-on-surface-variant italic">
|
||||
<span>Stok Awal: 12.45 kg</span>
|
||||
<span>Estimasi Akhir: 10.95 kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Target Change -->
|
||||
<div class="relative pl-6 border-l-2 border-primary/20">
|
||||
<span class="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-primary/10 border-2 border-primary"></span>
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<p class="text-label-caps text-on-surface-variant">LOT TUJUAN (+)</p>
|
||||
<p class="font-display-lot text-h2">A2 - Standard Grade A</p>
|
||||
</div>
|
||||
<span class="text-primary font-bold text-body-base">+1.50 kg</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-body-sm text-on-surface-variant italic">
|
||||
<span>Stok Awal: 45.00 kg</span>
|
||||
<span>Estimasi Akhir: 46.50 kg</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Summary Info -->
|
||||
<div class="bg-secondary-container/20 border border-secondary-container p-6">
|
||||
<div class="flex items-start gap-4">
|
||||
<span class="material-symbols-outlined text-secondary text-2xl">info</span>
|
||||
<div>
|
||||
<h4 class="font-bold text-on-secondary-container text-body-base mb-1">Informasi Kebijakan Regrade</h4>
|
||||
<p class="text-body-sm text-secondary leading-relaxed">
|
||||
Regrade lot akan mencatat histori perubahan pada kartu stok masing-masing grade. Pastikan tim QC telah melakukan validasi fisik sebelum menekan simpan.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Image/Illustration Context -->
|
||||
<div class="h-48 relative overflow-hidden group">
|
||||
<img alt="Sorting Process" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" data-alt="High-density macro photography of white bird nests being carefully sorted by grade on a clean surgical steel table under bright industrial lights" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD0q2OMn-TzDfY5jGMVa5cWUoA6-iOzjTjmhnqf0SnIJDBqLO6XKyPvnlWB7_InE6_ibW5dhNwx7-tVG4mk_PuYrQeELOBhQPxFC7nE10WxhiuJz3_esEU35C9na5X2PD6enScZ9kUWT878P0g-WYO-XmX_FgsNNhyArWaP-eTaAjBSHC3ayXyvT3KP-lrXzn9m7k7EINCphvXzHVzCl1nZ7lBXwcN48XGPRW831P8F2fFHuVG1Mq-uR47xzr79_RxxC-PiOUhOnQ"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-primary/80 to-transparent flex items-end p-4">
|
||||
<p class="text-white text-label-caps">STANDAR EKSPOR: GRADE AAA PREMIUM</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer -->
|
||||
<footer class="mt-auto border-t border-outline-variant bg-white p-4 text-center">
|
||||
<p class="text-label-caps text-on-surface-variant">© 2024 SWIFTLOT WALET SYSTEM • OPERATIONAL STACK V.2.1.0</p>
|
||||
</footer>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/formulir_regrade/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/formulir_regrade/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 375 KiB |
Reference in New Issue
Block a user