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>
|
||||
BIN
design-assets/stitch_abel_stock/alokasi_lot_penjualan/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/alokasi_lot_penjualan/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 250 KiB |
454
design-assets/stitch_abel_stock/daftar_gudang_lokasi/code.html
Normal file
454
design-assets/stitch_abel_stock/daftar_gudang_lokasi/code.html
Normal file
@ -0,0 +1,454 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Daftar Gudang & Lokasi - Sarang Inventory Pro</title>
|
||||
<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": {
|
||||
"surface-variant": "#e1e3e3",
|
||||
"tertiary-container": "#7c4824",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"primary": "#00454c",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"error": "#ba1a1a",
|
||||
"outline": "#6f797a",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"tertiary": "#60320f",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"surface-bright": "#f8fafa",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"on-primary-container": "#92d5df",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"on-surface": "#191c1d",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"surface-dim": "#d8dadb",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"surface-container": "#eceeee",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"on-error-container": "#93000a",
|
||||
"secondary": "#4e6073",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-background": "#191c1d",
|
||||
"inverse-surface": "#2e3131",
|
||||
"on-error": "#ffffff",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"primary-container": "#0d5e67",
|
||||
"background": "#f8fafa",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-tint": "#1d6871",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"surface": "#f8fafa",
|
||||
"on-secondary-container": "#526478"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter": "16px",
|
||||
"container-margin": "24px",
|
||||
"row-height-sm": "32px",
|
||||
"row-height-md": "48px",
|
||||
"compact-padding": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display-lot": ["Inter"],
|
||||
"body-base": ["Inter"],
|
||||
"label-caps": ["Inter"],
|
||||
"h2": ["Inter"],
|
||||
"h1": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"table-data": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"display-lot": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"h1": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "500"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background">
|
||||
<!-- SideNavBar -->
|
||||
<aside class="fixed left-0 top-0 h-screen w-64 bg-slate-50 dark:bg-slate-950 border-r border-slate-200 dark:border-slate-800 flex flex-col h-full py-4 space-y-1 z-50">
|
||||
<div class="px-6 mb-8 flex items-center gap-3">
|
||||
<img alt="Sarang Inventory Pro Logo" class="w-8 h-8 rounded" data-alt="minimalist professional logo for bird nest warehouse management company, teal and white colors" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBZpimSd6SglfA8eLn5Ag28LiPg-Ze7peiyRhi4IzVXYuf0TbR2hZEICbWkpl_zw2dZCe9QdTNslrqsLxmSGEIzeyY4WgG-9itfeC5IyN6QKWpjUfI48lkLXovhHJ2iho5mHQMS7-vQgH2ZY5TGX5jj2mUDQ1aBBbdnNBy4RJwaUIcFgJkcDdLQ3ZxT6zUsag8EZ556HpPZBFlPvo0bQgNdvdxYeGkY5qeVBLnLz8xSl9n0CTK-wVP0ir8mFTOnAyA-x77HUsKf_w"/>
|
||||
<div>
|
||||
<h1 class="text-teal-800 dark:text-teal-100 font-black tracking-tighter text-sm uppercase">SarangWMS</h1>
|
||||
<p class="text-[10px] text-slate-500 font-medium">Operational Hub</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 px-3 space-y-1 overflow-y-auto">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-700 hover:bg-slate-100 dark:hover:bg-slate-900/50 transition-all duration-200 ease-in-out font-medium text-sm rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">dashboard</span>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 bg-teal-50 dark:bg-teal-900/30 text-teal-800 dark:text-teal-200 border-r-4 border-teal-600 font-medium text-sm rounded transition-all duration-200 ease-in-out" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">database</span>
|
||||
<span>Master Data</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-700 hover:bg-slate-100 dark:hover:bg-slate-900/50 transition-all duration-200 ease-in-out font-medium text-sm rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">inventory_2</span>
|
||||
<span>Inventory Logs</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-700 hover:bg-slate-100 dark:hover:bg-slate-900/50 transition-all duration-200 ease-in-out font-medium text-sm rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">edit_note</span>
|
||||
<span>Stock Adjust</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-700 hover:bg-slate-100 dark:hover:bg-slate-900/50 transition-all duration-200 ease-in-out font-medium text-sm rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">swap_horiz</span>
|
||||
<span>Transfers</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-700 hover:bg-slate-100 dark:hover:bg-slate-900/50 transition-all duration-200 ease-in-out font-medium text-sm rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">verified</span>
|
||||
<span>QC Reports</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-6 py-4">
|
||||
<button class="w-full bg-primary text-white py-2.5 font-bold text-xs uppercase tracking-wider hover:opacity-90 transition-opacity">
|
||||
Create New Lot
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-3 border-t border-slate-200 pt-4 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-700 hover:bg-slate-100 transition-all text-sm rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">support_agent</span>
|
||||
<span>Support</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-700 hover:bg-slate-100 transition-all text-sm rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">logout</span>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="ml-64 min-h-screen">
|
||||
<!-- TopNavBar -->
|
||||
<header class="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 flex justify-between items-center h-14 px-6 w-full sticky top-0 z-40">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-lg">search</span>
|
||||
<input class="pl-10 pr-4 py-1.5 bg-slate-100 border-none text-sm w-80 focus:ring-2 focus:ring-primary rounded" placeholder="Cari gudang atau kode..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="p-1 text-slate-500 hover:bg-slate-50 rounded transition-colors"><span class="material-symbols-outlined">notifications</span></button>
|
||||
<button class="p-1 text-slate-500 hover:bg-slate-50 rounded transition-colors"><span class="material-symbols-outlined">settings</span></button>
|
||||
<button class="p-1 text-slate-500 hover:bg-slate-50 rounded transition-colors"><span class="material-symbols-outlined">help_outline</span></button>
|
||||
</div>
|
||||
<div class="h-8 w-px bg-slate-200"></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="text-right">
|
||||
<p class="text-xs font-bold text-slate-800">Admin Manager</p>
|
||||
<p class="text-[10px] text-teal-600 font-medium">Warehouse Lead</p>
|
||||
</div>
|
||||
<img alt="Manager Avatar" class="w-8 h-8 rounded-full object-cover" data-alt="professional headshot of a middle-aged asian manager in a modern office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBz0-G4kgbuTv-QqXIarkK1Ti148HBCJNJTW250VEs0YLcJaT-XOBTm0S9JlRkTxMyTYiwFq4KyHWkE549ctygaVsOQIYir2kHmRLq_ArCEjhzmYkY2Nq21ac06M7alISMVI7hKkjdIE8B-e4Sq7oFkpdI2eVUEAW3CYpbzwrbF1PH_83q9P8kQEfMw5HpqJE6u0pdXAjg0XQJrByNW6Vrvn_O15QkhUHWSO0ZpQ_DuozrWHjLSGeT9CjPs2n1cJulg1DKT3nSUYw"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Canvas -->
|
||||
<div class="p-gutter">
|
||||
<!-- Header Section -->
|
||||
<div class="flex justify-between items-end mb-8">
|
||||
<div>
|
||||
<h2 class="font-h1 text-h1 text-on-background mb-1">Manajemen Gudang</h2>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Kelola infrastruktur penyimpanan dan hierarki lokasi rak produksi.</p>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 bg-primary text-white px-5 py-2.5 rounded shadow-sm hover:brightness-110 transition-all font-h2 text-h2">
|
||||
<span class="material-symbols-outlined text-[18px]">add</span>
|
||||
Tambah Gudang
|
||||
</button>
|
||||
</div>
|
||||
<!-- Dashboard Summary Widgets -->
|
||||
<div class="grid grid-cols-4 gap-4 mb-8">
|
||||
<div class="bg-surface-container-lowest p-5 border border-outline-variant shadow-sm flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-primary/10 flex items-center justify-center text-primary rounded">
|
||||
<span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1;">warehouse</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-label-caps font-label-caps text-on-surface-variant uppercase">Total Gudang</p>
|
||||
<p class="text-display-lot font-display-lot text-on-surface">12</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-5 border border-outline-variant shadow-sm flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-secondary-container/30 flex items-center justify-center text-secondary">
|
||||
<span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1;">view_quilt</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-label-caps font-label-caps text-on-surface-variant uppercase">Total Rak/Lokasi</p>
|
||||
<p class="text-display-lot font-display-lot text-on-surface">482</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-5 border border-outline-variant shadow-sm flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-tertiary-fixed-dim/20 flex items-center justify-center text-tertiary">
|
||||
<span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1;">inventory</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-label-caps font-label-caps text-on-surface-variant uppercase">Kapasitas Terpakai</p>
|
||||
<p class="text-display-lot font-display-lot text-on-surface">68%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest p-5 border border-outline-variant shadow-sm flex items-center gap-4">
|
||||
<div class="w-12 h-12 bg-error-container/30 flex items-center justify-center text-error">
|
||||
<span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1;">report_problem</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-label-caps font-label-caps text-on-surface-variant uppercase">Gudang Hampir Penuh</p>
|
||||
<p class="text-display-lot font-display-lot text-on-surface">2</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Table Section -->
|
||||
<div class="bg-surface-container-lowest border border-outline-variant shadow-sm">
|
||||
<div class="px-6 py-4 border-b border-outline-variant flex justify-between items-center bg-surface-container-low">
|
||||
<h3 class="font-h2 text-h2 text-on-surface">Daftar Gudang Operasional</h3>
|
||||
<div class="flex gap-2">
|
||||
<button class="p-1.5 border border-outline text-on-surface-variant hover:bg-surface-container transition-colors rounded">
|
||||
<span class="material-symbols-outlined text-[20px]">filter_list</span>
|
||||
</button>
|
||||
<button class="p-1.5 border border-outline text-on-surface-variant hover:bg-surface-container transition-colors rounded">
|
||||
<span class="material-symbols-outlined text-[20px]">download</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead class="bg-surface-container-high border-b border-outline-variant">
|
||||
<tr>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Nama Gudang</th>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Kode</th>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Alamat / Lokasi</th>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Kapasitas (Terisi/Total)</th>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider">Jumlah Rak</th>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider text-right">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-outline-variant">
|
||||
<!-- Row 1 -->
|
||||
<tr class="hover:bg-surface-container-low transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-primary/5 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined text-[18px]">home_storage</span>
|
||||
</div>
|
||||
<span class="font-table-data text-table-data text-on-surface">Gudang Utama Raw Material</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-on-surface">GDG-RM-01</td>
|
||||
<td class="px-6 py-4 font-body-sm text-body-sm text-on-surface-variant">Kawasan Industri Jababeka, Blok C14</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="w-full max-w-[140px]">
|
||||
<div class="flex justify-between text-[11px] mb-1 font-bold">
|
||||
<span class="text-primary">1,250 kg</span>
|
||||
<span class="text-on-surface-variant">/ 1,500 kg</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-surface-container-high rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary" style="width: 83%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2.5 py-1 bg-secondary-container/40 text-on-secondary-container text-xs font-bold rounded">124 Rak</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-primary font-h2 text-[13px] hover:underline underline-offset-4 flex items-center justify-end gap-1 ml-auto">
|
||||
Lihat Detail Lokasi
|
||||
<span class="material-symbols-outlined text-[16px]">arrow_forward</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="hover:bg-surface-container-low transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-primary/5 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined text-[18px]">home_storage</span>
|
||||
</div>
|
||||
<span class="font-table-data text-table-data text-on-surface">Gudang Pengeringan A</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-on-surface">GDG-DRY-A</td>
|
||||
<td class="px-6 py-4 font-body-sm text-body-sm text-on-surface-variant">Area Produksi Lt. 2, Sayap Barat</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="w-full max-w-[140px]">
|
||||
<div class="flex justify-between text-[11px] mb-1 font-bold">
|
||||
<span class="text-primary">420 kg</span>
|
||||
<span class="text-on-surface-variant">/ 800 kg</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-surface-container-high rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary" style="width: 52%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2.5 py-1 bg-secondary-container/40 text-on-secondary-container text-xs font-bold rounded">86 Rak</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-primary font-h2 text-[13px] hover:underline underline-offset-4 flex items-center justify-end gap-1 ml-auto">
|
||||
Lihat Detail Lokasi
|
||||
<span class="material-symbols-outlined text-[16px]">arrow_forward</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="hover:bg-surface-container-low transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-primary/5 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined text-[18px]">home_storage</span>
|
||||
</div>
|
||||
<span class="font-table-data text-table-data text-on-surface">Gudang Finishing & QC</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-on-surface">GDG-FIN-03</td>
|
||||
<td class="px-6 py-4 font-body-sm text-body-sm text-on-surface-variant">Kawasan Industri Jababeka, Blok C15</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="w-full max-w-[140px]">
|
||||
<div class="flex justify-between text-[11px] mb-1 font-bold">
|
||||
<span class="text-error">980 kg</span>
|
||||
<span class="text-on-surface-variant">/ 1,000 kg</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-surface-container-high rounded-full overflow-hidden">
|
||||
<div class="h-full bg-error" style="width: 98%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2.5 py-1 bg-secondary-container/40 text-on-secondary-container text-xs font-bold rounded">210 Rak</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-primary font-h2 text-[13px] hover:underline underline-offset-4 flex items-center justify-end gap-1 ml-auto">
|
||||
Lihat Detail Lokasi
|
||||
<span class="material-symbols-outlined text-[16px]">arrow_forward</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr class="hover:bg-surface-container-low transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-primary/5 flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined text-[18px]">home_storage</span>
|
||||
</div>
|
||||
<span class="font-table-data text-table-data text-on-surface">Cold Storage Export</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-on-surface">GDG-COLD-01</td>
|
||||
<td class="px-6 py-4 font-body-sm text-body-sm text-on-surface-variant">Gedung Kargo Bandara Soekarno-Hatta</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="w-full max-w-[140px]">
|
||||
<div class="flex justify-between text-[11px] mb-1 font-bold">
|
||||
<span class="text-primary">150 kg</span>
|
||||
<span class="text-on-surface-variant">/ 500 kg</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-surface-container-high rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary" style="width: 30%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2.5 py-1 bg-secondary-container/40 text-on-secondary-container text-xs font-bold rounded">32 Lokasi</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-primary font-h2 text-[13px] hover:underline underline-offset-4 flex items-center justify-end gap-1 ml-auto">
|
||||
Lihat Detail Lokasi
|
||||
<span class="material-symbols-outlined text-[16px]">arrow_forward</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="px-6 py-4 border-t border-outline-variant bg-surface-container-low flex justify-between items-center">
|
||||
<p class="text-body-sm text-on-surface-variant">Menampilkan 4 dari 12 gudang terdaftar</p>
|
||||
<div class="flex gap-1">
|
||||
<button class="p-2 border border-outline-variant rounded bg-white text-on-surface-variant disabled:opacity-50" disabled="">
|
||||
<span class="material-symbols-outlined text-[18px]">chevron_left</span>
|
||||
</button>
|
||||
<button class="p-2 border border-outline-variant rounded bg-primary text-white font-bold text-xs px-4">1</button>
|
||||
<button class="p-2 border border-outline-variant rounded bg-white text-on-surface-variant font-bold text-xs px-4">2</button>
|
||||
<button class="p-2 border border-outline-variant rounded bg-white text-on-surface-variant font-bold text-xs px-4">3</button>
|
||||
<button class="p-2 border border-outline-variant rounded bg-white text-on-surface-variant">
|
||||
<span class="material-symbols-outlined text-[18px]">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Additional Context: Map or Geographic View Placeholder -->
|
||||
<div class="mt-8 grid grid-cols-3 gap-6">
|
||||
<div class="col-span-2 bg-surface-container-lowest border border-outline-variant p-gutter shadow-sm h-64 relative overflow-hidden flex flex-col">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="font-h2 text-h2">Visualisasi Lokasi Geografis</h3>
|
||||
<span class="text-[11px] font-bold text-primary uppercase tracking-widest">Live Integration</span>
|
||||
</div>
|
||||
<div class="flex-1 bg-surface-container-high rounded flex items-center justify-center relative">
|
||||
<img alt="World map with location pins" class="absolute inset-0 w-full h-full object-cover opacity-60 grayscale" data-alt="simplified stylistic map of jakarta industrial area with warehouse icons and digital grid overlay" data-location="Jakarta" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCjlWTlCqAG6Y-switmw1vUJJ-jPjctPaMjRk-ofnmufPT304oDY2hiiGm5sWmQXVtCzf6xAwvrpcd5XS8IdA4G_hJB8u3Ac0aQaexvkfVJpz8othc_OQp0X35xEcxiMoGPIkQ_kM-QozKtOxEpz9E1PGLrLX_oT2sHEt2Lgq8tBOO8Vhk_A1ys_v8xdonJNUq33bAIY1vazomT_6X1LY0eJDpFBz2547jdcL-yWm5244lSNmKAdhfCGpPHJB3Q9aAqFVJ5a0-kMA"/>
|
||||
<div class="z-10 bg-white/90 backdrop-blur-sm p-4 border border-outline-variant flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary">location_on</span>
|
||||
<span class="text-sm font-bold text-on-surface">Pusat Operasional: Jababeka, Cikarang</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest border border-outline-variant p-gutter shadow-sm h-64 flex flex-col">
|
||||
<h3 class="font-h2 text-h2 mb-4">Aktivitas Terkini</h3>
|
||||
<div class="flex-1 space-y-4 overflow-y-auto pr-2">
|
||||
<div class="flex gap-3 items-start border-l-2 border-primary/20 pl-4 py-1">
|
||||
<div class="text-[10px] font-bold text-on-surface-variant min-w-[45px]">14:20</div>
|
||||
<div class="text-[12px]">
|
||||
<span class="font-bold text-on-surface">Input Barang:</span> 45kg Material Mentah tiba di <span class="font-bold text-primary">GDG-RM-01</span>.
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3 items-start border-l-2 border-primary/20 pl-4 py-1">
|
||||
<div class="text-[10px] font-bold text-on-surface-variant min-w-[45px]">11:05</div>
|
||||
<div class="text-[12px]">
|
||||
<span class="font-bold text-on-surface">Pemindahan:</span> Lot #B203 dipindah dari <span class="font-bold text-primary">Rak A2</span> ke <span class="font-bold text-primary">GDG-DRY-A</span>.
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3 items-start border-l-2 border-primary/20 pl-4 py-1">
|
||||
<div class="text-[10px] font-bold text-on-surface-variant min-w-[45px]">Kemarin</div>
|
||||
<div class="text-[12px]">
|
||||
<span class="font-bold text-on-surface">QC Selesai:</span> 12 Rak di <span class="font-bold text-primary">GDG-FIN-03</span> dinyatakan layak ekspor.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/daftar_gudang_lokasi/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/daftar_gudang_lokasi/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 451 KiB |
447
design-assets/stitch_abel_stock/daftar_pelanggan_1/code.html
Normal file
447
design-assets/stitch_abel_stock/daftar_pelanggan_1/code.html
Normal file
@ -0,0 +1,447 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Daftar Pelanggan | SarangTrace ERP</title>
|
||||
<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": "#4e6073",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"outline": "#6f797a",
|
||||
"background": "#f8fafa",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"error-container": "#ffdad6",
|
||||
"tertiary": "#60320f",
|
||||
"on-secondary-container": "#526478",
|
||||
"surface-container": "#eceeee",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"on-error-container": "#93000a",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"surface-tint": "#1d6871",
|
||||
"on-primary-container": "#92d5df",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"inverse-surface": "#2e3131",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"on-surface": "#191c1d",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"surface": "#f8fafa",
|
||||
"primary-container": "#0d5e67",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"error": "#ba1a1a",
|
||||
"surface-bright": "#f8fafa",
|
||||
"primary": "#00454c",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"on-error": "#ffffff",
|
||||
"surface-variant": "#e1e3e3",
|
||||
"on-background": "#191c1d",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-dim": "#d8dadb",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-container": "#7c4824"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"compact-padding": "8px",
|
||||
"row-height-sm": "32px",
|
||||
"row-height-md": "48px",
|
||||
"container-margin": "24px",
|
||||
"gutter": "16px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-base": ["Inter"],
|
||||
"h1": ["Inter"],
|
||||
"display-lot": ["Inter"],
|
||||
"table-data": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"h2": ["Inter"],
|
||||
"label-caps": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"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"}],
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</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-surface text-on-surface selection:bg-primary-fixed selection:text-on-primary-fixed">
|
||||
<!-- TopNavBar -->
|
||||
<header class="bg-white dark:bg-slate-950 text-teal-700 dark:text-teal-500 font-inter text-sm antialiased docked full-width top-0 z-40 border-b border-slate-200 dark:border-slate-800 shadow-sm flex items-center justify-between px-6 h-14 w-full fixed">
|
||||
<div class="flex items-center gap-8">
|
||||
<span class="text-lg font-bold tracking-tight text-teal-800 dark:text-teal-400">SarangTrace ERP</span>
|
||||
<div class="hidden md:flex items-center bg-slate-100 dark:bg-slate-900 rounded px-3 py-1 gap-2">
|
||||
<span class="material-symbols-outlined text-slate-400 text-[18px]" data-icon="search">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-xs w-64 placeholder:text-slate-400" placeholder="Search data..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="hover:bg-slate-50 dark:hover:bg-slate-900 transition-colors p-2 rounded">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="hover:bg-slate-50 dark:hover:bg-slate-900 transition-colors p-2 rounded">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
</button>
|
||||
<div class="h-8 w-8 rounded-full overflow-hidden border border-slate-200">
|
||||
<img alt="User Profile" data-alt="professional corporate headshot of a middle-aged executive man with a clean haircut in a minimalist office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAgIYPXJRbGVhYjBsOskdckcKrC_AW-ltq6326FJ4CCMIeGCJn-6iDh-EtUNsXoVz2vW0NHl_Ky1Lcw4z9JCpcP7XaCTV8Tcbui8Vn5LkfHK-sOUN1ERpd4WC4srVTKH2Y_MImoeL-GJDumfU5sQZFfPEXWDot5nxxji4_-39gtbEAM6rmy78bW6vICOe5zNhrUYcO4P6SycGmvatOEOXlIap9ovsKOlfkXqZJ2CnUjq-LvzgWR40sOSqaxTjLwj_6GeVNV6bveUA"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- SideNavBar -->
|
||||
<aside class="bg-slate-50 dark:bg-slate-900 text-teal-700 dark:text-teal-500 font-inter text-[13px] font-medium 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 pt-20">
|
||||
<div class="px-6 mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="h-10 w-10 bg-primary rounded flex items-center justify-center text-white font-black text-xl">W</div>
|
||||
<div>
|
||||
<h2 class="text-teal-900 dark:text-teal-100 font-black leading-none">Walet Operations</h2>
|
||||
<p class="text-[10px] text-slate-500 mt-1 uppercase tracking-wider">V1.0.4-Operational</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 px-4 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-600 hover:bg-slate-100 dark:hover:bg-slate-800/50 rounded transition-all duration-150 ease-in-out" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
Dashboard
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-600 hover:bg-slate-100 dark:hover:bg-slate-800/50 rounded transition-all duration-150 ease-in-out" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
|
||||
Inventory Stock
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-600 hover:bg-slate-100 dark:hover:bg-slate-800/50 rounded transition-all duration-150 ease-in-out" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="account_tree">account_tree</span>
|
||||
Traceability Logs
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 bg-teal-50 dark:bg-teal-900/20 text-teal-700 dark:text-teal-400 border-r-4 border-teal-600 transition-all duration-150 ease-in-out" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="database">database</span>
|
||||
Master Data
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-600 hover:bg-slate-100 dark:hover:bg-slate-800/50 rounded transition-all duration-150 ease-in-out" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="qr_code_scanner">qr_code_scanner</span>
|
||||
Barcode Scanner
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-4 mt-auto 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 text-slate-600 dark:text-slate-400 hover:text-teal-600 hover:bg-slate-100 dark:hover:bg-slate-800/50 rounded transition-all duration-150 ease-in-out" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
Support
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-600 hover:bg-slate-100 dark:hover:bg-slate-800/50 rounded transition-all duration-150 ease-in-out" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="logout">logout</span>
|
||||
Sign Out
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-64 pt-14 min-h-screen">
|
||||
<div class="p-container-margin">
|
||||
<!-- Page Header -->
|
||||
<div class="flex items-end justify-between mb-8">
|
||||
<div>
|
||||
<nav class="flex items-center gap-2 text-label-caps text-secondary mb-2">
|
||||
<span>MASTER DATA</span>
|
||||
<span class="material-symbols-outlined text-[12px]" data-icon="chevron_right">chevron_right</span>
|
||||
<span class="text-on-surface">DAFTAR PELANGGAN</span>
|
||||
</nav>
|
||||
<h1 class="font-h1 text-h1 text-on-surface">Daftar Pelanggan</h1>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">Kelola data pelanggan, kontak, dan informasi perbankan dalam satu tempat.</p>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 bg-primary text-on-primary font-body-base px-4 py-2 rounded-lg shadow-sm hover:opacity-90 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="add">add</span>
|
||||
Tambah Pelanggan
|
||||
</button>
|
||||
</div>
|
||||
<!-- Dashboard Stats / Bento Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-gutter mb-8">
|
||||
<div class="bg-surface-container-low border border-outline-variant p-4 rounded-xl shadow-sm">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-label-caps text-secondary">TOTAL PELANGGAN</span>
|
||||
<span class="material-symbols-outlined text-primary text-[20px]" data-icon="group">group</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-display-lot text-display-lot">1,284</span>
|
||||
<span class="text-[11px] font-bold text-teal-600">+12%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low border border-outline-variant p-4 rounded-xl shadow-sm">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-label-caps text-secondary">PELANGGAN AKTIF</span>
|
||||
<span class="material-symbols-outlined text-teal-600 text-[20px]" data-icon="check_circle">check_circle</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-display-lot text-display-lot">1,250</span>
|
||||
<span class="text-[11px] font-bold text-teal-600">97.3%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low border border-outline-variant p-4 rounded-xl shadow-sm">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-label-caps text-secondary">KREDIT LIMIT TOTAL</span>
|
||||
<span class="material-symbols-outlined text-tertiary text-[20px]" data-icon="account_balance_wallet">account_balance_wallet</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-display-lot text-display-lot">Rp 4.2B</span>
|
||||
<span class="text-[11px] font-bold text-error">Limit High</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low border border-outline-variant p-4 rounded-xl shadow-sm">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-label-caps text-secondary">BARU (BULAN INI)</span>
|
||||
<span class="material-symbols-outlined text-secondary text-[20px]" data-icon="person_add">person_add</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-display-lot text-display-lot">32</span>
|
||||
<span class="text-[11px] font-bold text-teal-600">Stable</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Search and Filter Bar -->
|
||||
<div class="bg-surface-container-lowest border border-outline-variant p-4 mb-gutter rounded-t-lg flex flex-wrap items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
<div class="relative flex-1 max-w-md">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-[20px]" data-icon="search">search</span>
|
||||
<input class="w-full pl-10 pr-4 py-2 border border-outline-variant rounded-lg font-body-base focus:ring-2 focus:ring-primary-container focus:border-primary outline-none transition-all" placeholder="Cari Kode, Nama, atau Contact Person..." type="text"/>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 font-body-base text-on-surface-variant hover:bg-surface-container-high px-3 py-2 rounded transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="filter_list">filter_list</span>
|
||||
Filter
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="flex items-center gap-2 font-body-base border border-outline-variant text-on-surface-variant px-3 py-2 rounded hover:bg-surface-container-high transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="file_download">file_download</span>
|
||||
Export Excel
|
||||
</button>
|
||||
<button class="flex items-center gap-2 font-body-base border border-outline-variant text-on-surface-variant px-3 py-2 rounded hover:bg-surface-container-high transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="print">print</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Data Table Container -->
|
||||
<div class="bg-surface-container-lowest border border-outline-variant rounded-b-lg overflow-hidden shadow-sm">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-surface-container-high border-b border-outline-variant">
|
||||
<th class="px-4 py-3 font-label-caps text-secondary">KODE PELANGGAN</th>
|
||||
<th class="px-4 py-3 font-label-caps text-secondary">NAMA PELANGGAN</th>
|
||||
<th class="px-4 py-3 font-label-caps text-secondary">CONTACT PERSON</th>
|
||||
<th class="px-4 py-3 font-label-caps text-secondary">TELEPON</th>
|
||||
<th class="px-4 py-3 font-label-caps text-secondary">INFO BANK</th>
|
||||
<th class="px-4 py-3 font-label-caps text-secondary">STATUS</th>
|
||||
<th class="px-4 py-3 font-label-caps text-secondary text-right">AKSI</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="font-table-data text-table-data text-on-surface">
|
||||
<!-- Row 1 -->
|
||||
<tr class="border-b border-outline-variant hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-4 py-3 text-primary font-bold">CUST-JKT-001</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold">PT. Ekspor Walet Kencana</span>
|
||||
<span class="text-[11px] text-on-surface-variant uppercase">Wholesaler</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">Bpk. Hendra Wijaya</td>
|
||||
<td class="px-4 py-3">+62 21 5567 8900</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-col">
|
||||
<span>BCA - 0089223344</span>
|
||||
<span class="text-[11px] text-on-surface-variant">AN: Hendra Wijaya</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="bg-teal-50 text-teal-700 px-2 py-1 rounded-full text-[11px] font-bold border border-teal-100">AKTIF</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="p-1 hover:bg-surface-container-high rounded text-outline group-hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="more_vert">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="border-b border-outline-variant hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-4 py-3 text-primary font-bold">CUST-SBY-042</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold">CV. Sarang Burung Lestari</span>
|
||||
<span class="text-[11px] text-on-surface-variant uppercase">Local Processor</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">Ibu Maya Santoso</td>
|
||||
<td class="px-4 py-3">+62 812 3344 5566</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-col">
|
||||
<span>Mandiri - 142009887766</span>
|
||||
<span class="text-[11px] text-on-surface-variant">AN: Maya Santoso</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="bg-teal-50 text-teal-700 px-2 py-1 rounded-full text-[11px] font-bold border border-teal-100">AKTIF</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="p-1 hover:bg-surface-container-high rounded text-outline group-hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="more_vert">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="border-b border-outline-variant hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-4 py-3 text-primary font-bold">CUST-MDN-018</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold">Global Nest Trading Ltd.</span>
|
||||
<span class="text-[11px] text-on-surface-variant uppercase">International</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">Mr. Zhang Wei</td>
|
||||
<td class="px-4 py-3">+65 6789 4432</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-col">
|
||||
<span>HSBC - 9988-002-11</span>
|
||||
<span class="text-[11px] text-on-surface-variant">SWIFT: HSBSGSGXXX</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="bg-error-container text-on-error-container px-2 py-1 rounded-full text-[11px] font-bold border border-error/10">NON-AKTIF</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="p-1 hover:bg-surface-container-high rounded text-outline group-hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="more_vert">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr class="border-b border-outline-variant hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-4 py-3 text-primary font-bold">CUST-SMG-005</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold">Semarang Birdnest Hub</span>
|
||||
<span class="text-[11px] text-on-surface-variant uppercase">Agent</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">Anwar Hakim</td>
|
||||
<td class="px-4 py-3">+62 24 8876 1122</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-col">
|
||||
<span>BNI - 0021334455</span>
|
||||
<span class="text-[11px] text-on-surface-variant">AN: Anwar Hakim</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="bg-secondary-container text-on-secondary-container px-2 py-1 rounded-full text-[11px] font-bold border border-secondary/10">DITANGGUHKAN</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="p-1 hover:bg-surface-container-high rounded text-outline group-hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="more_vert">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 5 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-4 py-3 text-primary font-bold">CUST-JKT-099</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold">Prima Walet Utama</span>
|
||||
<span class="text-[11px] text-on-surface-variant uppercase">Retailer</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">Siska Amelia</td>
|
||||
<td class="px-4 py-3">+62 856 7788 9900</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-col">
|
||||
<span>BRI - 3344-01-009922</span>
|
||||
<span class="text-[11px] text-on-surface-variant">AN: PT. Prima Walet Utama</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="bg-teal-50 text-teal-700 px-2 py-1 rounded-full text-[11px] font-bold border border-teal-100">AKTIF</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="p-1 hover:bg-surface-container-high rounded text-outline group-hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="more_vert">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Pagination Footer -->
|
||||
<div class="bg-surface-container-low border-t border-outline-variant p-4 flex items-center justify-between">
|
||||
<span class="font-body-sm text-body-sm text-on-surface-variant">Menampilkan 1-5 dari 1,284 pelanggan</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="p-1 border border-outline-variant rounded hover:bg-surface-container-high text-outline transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="first_page">first_page</span>
|
||||
</button>
|
||||
<button class="p-1 border border-outline-variant rounded hover:bg-surface-container-high text-outline transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="chevron_left">chevron_left</span>
|
||||
</button>
|
||||
<div class="flex items-center gap-1 px-2">
|
||||
<button class="w-8 h-8 bg-primary text-on-primary rounded font-bold text-[13px]">1</button>
|
||||
<button class="w-8 h-8 hover:bg-surface-container-high rounded font-medium text-[13px] transition-colors">2</button>
|
||||
<button class="w-8 h-8 hover:bg-surface-container-high rounded font-medium text-[13px] transition-colors">3</button>
|
||||
<span class="mx-1">...</span>
|
||||
<button class="w-8 h-8 hover:bg-surface-container-high rounded font-medium text-[13px] transition-colors">257</button>
|
||||
</div>
|
||||
<button class="p-1 border border-outline-variant rounded hover:bg-surface-container-high text-outline transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="chevron_right">chevron_right</span>
|
||||
</button>
|
||||
<button class="p-1 border border-outline-variant rounded hover:bg-surface-container-high text-outline transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="last_page">last_page</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Legal/Info -->
|
||||
<footer class="mt-12 mb-8 flex flex-col md:flex-row items-center justify-between border-t border-outline-variant pt-6 gap-4">
|
||||
<div class="flex items-center gap-6">
|
||||
<span class="text-[12px] text-on-surface-variant font-medium">© 2024 SarangTrace ERP - Operational Edition</span>
|
||||
<div class="flex items-center gap-4">
|
||||
<a class="text-[12px] text-on-surface-variant hover:text-primary underline decoration-primary/30" href="#">Privacy Policy</a>
|
||||
<a class="text-[12px] text-on-surface-variant hover:text-primary underline decoration-primary/30" href="#">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 px-3 py-1 bg-surface-container-high rounded-full border border-outline-variant">
|
||||
<span class="w-2 h-2 bg-teal-500 rounded-full"></span>
|
||||
<span class="text-[11px] font-bold text-on-surface-variant uppercase tracking-tighter">Sistem Terkoneksi: Cloud-HQ-Main</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/daftar_pelanggan_1/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/daftar_pelanggan_1/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 310 KiB |
483
design-assets/stitch_abel_stock/daftar_pelanggan_2/code.html
Normal file
483
design-assets/stitch_abel_stock/daftar_pelanggan_2/code.html
Normal file
@ -0,0 +1,483 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-primary-container": "#92d5df",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-tint": "#1d6871",
|
||||
"primary": "#00454c",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"on-background": "#191c1d",
|
||||
"tertiary": "#60320f",
|
||||
"surface": "#f8fafa",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-surface": "#191c1d",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"error": "#ba1a1a",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"error-container": "#ffdad6",
|
||||
"on-error": "#ffffff",
|
||||
"surface-variant": "#e1e3e3",
|
||||
"outline": "#6f797a",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"on-secondary-container": "#526478",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"tertiary-container": "#7c4824",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"surface-bright": "#f8fafa",
|
||||
"secondary": "#4e6073",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"primary-container": "#0d5e67",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"surface-dim": "#d8dadb",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"background": "#f8fafa",
|
||||
"surface-container": "#eceeee",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"inverse-surface": "#2e3131"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter": "16px",
|
||||
"row-height-sm": "32px",
|
||||
"row-height-md": "48px",
|
||||
"container-margin": "24px",
|
||||
"compact-padding": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display-lot": ["Inter"],
|
||||
"h2": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"label-caps": ["Inter"],
|
||||
"body-base": ["Inter"],
|
||||
"table-data": ["Inter"],
|
||||
"h1": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"display-lot": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "500"}],
|
||||
"h1": ["20px", {"lineHeight": "28px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body {
|
||||
background-color: #f8fafa;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-base text-on-surface antialiased">
|
||||
<!-- TopNavBar -->
|
||||
<header class="fixed top-0 left-0 w-full z-40 flex justify-between items-center px-6 h-16 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 shadow-sm dark:shadow-none font-inter text-sm antialiased">
|
||||
<div class="flex items-center gap-4">
|
||||
<img alt="Logo" class="h-8 w-8 object-contain" data-alt="Corporate logo for a bird nest export company featuring abstract avian motifs in teal and white" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBM2gcbZe8pws9VmvjSISlHLqdPLwgbvuhS0PBnXJ9g4-Nf5_Td5xhZsYmJfAIRYuJ6heJu-ytIt77GPuqgZmQlhR_VSlrMtjrZbQc9uKxcNwfSjzX3RKI_9L59FJABN0Vw3mh7S69jQeX3HdlkM5nmntGKR6sEfngsWJqI5GjD1UhTSuHEnDIPIYNXsJ8MBUcn-qWej9UWd-Ifu7q2L0cFxvYvspSMSSk2NqdO1uAj3LV5Dnn_cOlZIEhd2SB-Qdf6OtdG3WyWcA"/>
|
||||
<span class="text-xl font-bold text-teal-700 dark:text-teal-400">Sistem Inventaris Walet</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="hidden md:flex items-center bg-slate-100 dark:bg-slate-800 rounded-lg px-3 py-1.5 border border-slate-200 dark:border-slate-700">
|
||||
<span class="material-symbols-outlined text-slate-500 mr-2" style="font-size: 18px;">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-sm w-48 text-on-surface" placeholder="Cari data..." type="text"/>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="p-2 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors text-slate-500 rounded-full">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors text-slate-500 rounded-full">
|
||||
<span class="material-symbols-outlined">help_outline</span>
|
||||
</button>
|
||||
<div class="h-8 w-px bg-slate-200 dark:bg-slate-700 mx-1"></div>
|
||||
<button class="bg-primary text-on-primary px-4 py-2 rounded-lg flex items-center gap-2 font-medium text-xs active:opacity-80 transition-all duration-150">
|
||||
<span class="material-symbols-outlined" style="font-size: 18px;">qr_code_scanner</span>
|
||||
Scan Barcode
|
||||
</button>
|
||||
<img alt="Profil Pengguna" class="h-8 w-8 rounded-full border border-slate-200" data-alt="professional male headshot for a user profile avatar in a corporate software setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBC5r0mbAMZ9cVAnKeRD_TBQBu23Cice8zGXgQvtgVf7CnUVal5a01rAJxV-AmU6F2QRXyJsxWMXeaDBFY1f6Z6Y7tZ9peE3RBXKpbOKu67tDDDPO_VLXe3Huj2phIiE2CkTXGLtx6WjxnbsiSbUpxj-p_XfJsFP1dZTn13fJWHJ1-UT5tM09wtOl3HUFSBpV_f-OCbbHiinR_6OCUahlYmo9EEweF_CZDcGehA1FIMXGdhM7HBSpTZxO1PjvHzzWUHI4NkZiP-RA"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- SideNavBar -->
|
||||
<aside class="fixed left-0 top-0 h-full w-64 flex flex-col py-6 bg-slate-50 dark:bg-slate-950 border-r border-slate-200 dark:border-slate-800 z-30 pt-20">
|
||||
<div class="px-6 mb-8">
|
||||
<h2 class="text-lg font-black text-teal-800 dark:text-teal-300 font-inter">Inventory Walet</h2>
|
||||
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Sistem Traceability</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 hover:translate-x-1 transition-transform duration-200 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
Dashboard
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 hover:translate-x-1 transition-transform duration-200 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
Laporan Stok
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 bg-teal-50 dark:bg-teal-900/20 text-teal-700 dark:text-teal-400 rounded-r-lg border-l-4 border-teal-700 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">database</span>
|
||||
Data Master
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 hover:translate-x-1 transition-transform duration-200 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">qr_code_scanner</span>
|
||||
Pelacakan
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 hover:translate-x-1 transition-transform duration-200 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
Pengaturan
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-4 mb-6">
|
||||
<button class="w-full bg-teal-700 hover:bg-teal-800 text-white rounded-lg py-2.5 flex items-center justify-center gap-2 text-xs font-bold transition-all active:scale-95 duration-75">
|
||||
<span class="material-symbols-outlined" style="font-size: 18px;">add</span>
|
||||
Tambah Lot Baru
|
||||
</button>
|
||||
</div>
|
||||
<div class="border-t border-slate-200 dark:border-slate-800 pt-4">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 hover:translate-x-1 transition-transform duration-200 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
Bantuan
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-error hover:bg-error/5 hover:translate-x-1 transition-transform duration-200 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">logout</span>
|
||||
Log Keluar
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content -->
|
||||
<main class="ml-64 pt-20 p-8 min-h-screen">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<!-- Header Section -->
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8">
|
||||
<div>
|
||||
<nav class="flex text-xs text-slate-500 mb-2 gap-2">
|
||||
<span>Data Master</span>
|
||||
<span>/</span>
|
||||
<span class="text-teal-700 font-semibold">Daftar Pelanggan</span>
|
||||
</nav>
|
||||
<h1 class="font-h1 text-h1 text-on-surface">Daftar Pelanggan</h1>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">Kelola data klien ekspor dan distributor domestik sarang burung walet.</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="px-4 py-2 border border-outline text-on-surface hover:bg-surface-container transition-colors rounded-lg flex items-center gap-2 text-xs font-semibold">
|
||||
<span class="material-symbols-outlined" style="font-size: 18px;">download</span>
|
||||
Ekspor CSV
|
||||
</button>
|
||||
<button class="px-4 py-2 bg-primary text-on-primary hover:bg-primary-container transition-colors rounded-lg flex items-center gap-2 text-xs font-semibold shadow-sm">
|
||||
<span class="material-symbols-outlined" style="font-size: 18px;">person_add</span>
|
||||
Tambah Pelanggan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dashboard Stats Summary -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||
<div class="bg-white p-5 border border-slate-200 rounded-xl shadow-sm">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Total Pelanggan</p>
|
||||
<h3 class="text-2xl font-bold text-on-surface">148</h3>
|
||||
</div>
|
||||
<div class="p-2 bg-teal-50 text-teal-700 rounded-lg">
|
||||
<span class="material-symbols-outlined">group</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center text-emerald-600 text-[11px] font-bold">
|
||||
<span class="material-symbols-outlined text-[14px] mr-1">trending_up</span>
|
||||
+12% Bulan ini
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-5 border border-slate-200 rounded-xl shadow-sm">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Pelanggan Aktif</p>
|
||||
<h3 class="text-2xl font-bold text-on-surface">124</h3>
|
||||
</div>
|
||||
<div class="p-2 bg-blue-50 text-blue-700 rounded-lg">
|
||||
<span class="material-symbols-outlined">verified</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center text-slate-500 text-[11px] font-bold">
|
||||
Berdasarkan transaksi 30 hari terakhir
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-5 border border-slate-200 rounded-xl shadow-sm">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Wilayah Ekspor</p>
|
||||
<h3 class="text-2xl font-bold text-on-surface">12</h3>
|
||||
</div>
|
||||
<div class="p-2 bg-amber-50 text-amber-700 rounded-lg">
|
||||
<span class="material-symbols-outlined">public</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center text-amber-600 text-[11px] font-bold">
|
||||
Tiongkok, Vietnam, Singapura
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-5 border border-slate-200 rounded-xl shadow-sm">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Piutang Berjalan</p>
|
||||
<h3 class="text-2xl font-bold text-on-surface">Rp 2.4M</h3>
|
||||
</div>
|
||||
<div class="p-2 bg-slate-50 text-slate-700 rounded-lg">
|
||||
<span class="material-symbols-outlined">account_balance_wallet</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center text-error text-[11px] font-bold">
|
||||
<span class="material-symbols-outlined text-[14px] mr-1">warning</span>
|
||||
3 Melewati tenggat
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Table Container -->
|
||||
<div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
|
||||
<div class="p-4 border-b border-slate-100 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[20px]">filter_list</span>
|
||||
<select class="pl-10 pr-8 py-2 bg-slate-50 border-slate-200 rounded-lg text-xs font-semibold text-on-surface focus:ring-teal-700 focus:border-teal-700">
|
||||
<option>Semua Wilayah</option>
|
||||
<option>Domestik</option>
|
||||
<option>Internasional</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs font-medium text-slate-500">
|
||||
Menampilkan 1-10 dari 148
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative w-full md: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 bg-slate-50 border-slate-200 rounded-lg text-xs focus:ring-teal-700 focus:border-teal-700" placeholder="Cari Kode atau Nama..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-slate-50 text-left border-b border-slate-200">
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-slate-500 uppercase tracking-wider">KODE</th>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-slate-500 uppercase tracking-wider">NAMA PELANGGAN</th>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-slate-500 uppercase tracking-wider">KONTAK & EMAIL</th>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-slate-500 uppercase tracking-wider">INFORMASI BANK</th>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-slate-500 uppercase tracking-wider">WILAYAH</th>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-slate-500 uppercase tracking-wider">STATUS</th>
|
||||
<th class="px-6 py-4 text-right"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
<!-- Row 1 -->
|
||||
<tr class="hover:bg-slate-50/80 transition-colors">
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-teal-800 font-bold">CUST-001</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">Tianjin Trading Co., Ltd</span>
|
||||
<span class="text-[11px] text-slate-400">Pusat Distribusi Asia Timur</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">+86 138 9988 7766</span>
|
||||
<span class="text-[11px] text-slate-400">order@tianjintrading.cn</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">ICBC Bank</span>
|
||||
<span class="text-[11px] text-slate-400">8823 **** 0092</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2 py-1 bg-slate-100 text-slate-600 rounded text-[10px] font-bold uppercase">Internasional</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2.5 py-1 bg-emerald-100 text-emerald-800 rounded-full text-[10px] font-bold uppercase">Aktif</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="p-1 hover:bg-slate-200 rounded transition-colors text-slate-400">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="hover:bg-slate-50/80 transition-colors">
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-teal-800 font-bold">CUST-002</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">PT Sinar Makmur Abadi</span>
|
||||
<span class="text-[11px] text-slate-400">Distributor Lokal Jakarta</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">021-5556677</span>
|
||||
<span class="text-[11px] text-slate-400">logistic@sinarmakmur.co.id</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">Bank Central Asia</span>
|
||||
<span class="text-[11px] text-slate-400">2210 **** 5541</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2 py-1 bg-teal-50 text-teal-600 rounded text-[10px] font-bold uppercase">Domestik</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2.5 py-1 bg-emerald-100 text-emerald-800 rounded-full text-[10px] font-bold uppercase">Aktif</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="p-1 hover:bg-slate-200 rounded transition-colors text-slate-400">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="hover:bg-slate-50/80 transition-colors">
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-teal-800 font-bold">CUST-003</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">Guangzhou Wellness Ltd</span>
|
||||
<span class="text-[11px] text-slate-400">Importir Obat Tradisional</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">+86 20 1234 5678</span>
|
||||
<span class="text-[11px] text-slate-400">import@gzwellness.com</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">Bank of China</span>
|
||||
<span class="text-[11px] text-slate-400">4431 **** 8899</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2 py-1 bg-slate-100 text-slate-600 rounded text-[10px] font-bold uppercase">Internasional</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2.5 py-1 bg-amber-100 text-amber-800 rounded-full text-[10px] font-bold uppercase">Tertunda</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="p-1 hover:bg-slate-200 rounded transition-colors text-slate-400">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr class="hover:bg-slate-50/80 transition-colors">
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-teal-800 font-bold">CUST-004</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">Singapore Bird Nest Center</span>
|
||||
<span class="text-[11px] text-slate-400">Toko Ritel & Ekspor</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">+65 9123 4567</span>
|
||||
<span class="text-[11px] text-slate-400">contact@sgbirdnest.sg</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">DBS Bank</span>
|
||||
<span class="text-[11px] text-slate-400">1109 **** 2231</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2 py-1 bg-slate-100 text-slate-600 rounded text-[10px] font-bold uppercase">Internasional</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2.5 py-1 bg-emerald-100 text-emerald-800 rounded-full text-[10px] font-bold uppercase">Aktif</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="p-1 hover:bg-slate-200 rounded transition-colors text-slate-400">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 5 -->
|
||||
<tr class="hover:bg-slate-50/80 transition-colors">
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-teal-800 font-bold">CUST-005</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">UD Sarang Sejahtera</span>
|
||||
<span class="text-[11px] text-slate-400">Pengepul Lokal Surabaya</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">031-778899</span>
|
||||
<span class="text-[11px] text-slate-400">admin@sarangsejahtera.com</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">Bank Mandiri</span>
|
||||
<span class="text-[11px] text-slate-400">1420 **** 0021</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2 py-1 bg-teal-50 text-teal-600 rounded text-[10px] font-bold uppercase">Domestik</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2.5 py-1 bg-error-container text-on-error-container rounded-full text-[10px] font-bold uppercase">Non-Aktif</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="p-1 hover:bg-slate-200 rounded transition-colors text-slate-400">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="p-4 bg-slate-50 border-t border-slate-200 flex items-center justify-between">
|
||||
<div class="text-xs font-semibold text-slate-500">
|
||||
Halaman 1 dari 15
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="px-3 py-1.5 border border-slate-300 rounded bg-white text-slate-500 text-xs font-bold disabled:opacity-50" disabled="">Sebelumnya</button>
|
||||
<button class="px-3 py-1.5 border border-slate-300 rounded bg-white text-slate-700 text-xs font-bold hover:bg-slate-50">Berikutnya</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Floating Action Button (FAB) - Suppressed because this is a list view with its own header CTA -->
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/daftar_pelanggan_2/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/daftar_pelanggan_2/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 318 KiB |
420
design-assets/stitch_abel_stock/daftar_pemasok_1/code.html
Normal file
420
design-assets/stitch_abel_stock/daftar_pemasok_1/code.html
Normal file
@ -0,0 +1,420 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-primary-container": "#92d5df",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-tint": "#1d6871",
|
||||
"primary": "#00454c",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"on-background": "#191c1d",
|
||||
"tertiary": "#60320f",
|
||||
"surface": "#f8fafa",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-surface": "#191c1d",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"error": "#ba1a1a",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"error-container": "#ffdad6",
|
||||
"on-error": "#ffffff",
|
||||
"surface-variant": "#e1e3e3",
|
||||
"outline": "#6f797a",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"on-secondary-container": "#526478",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"tertiary-container": "#7c4824",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"surface-bright": "#f8fafa",
|
||||
"secondary": "#4e6073",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"primary-container": "#0d5e67",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"surface-dim": "#d8dadb",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"background": "#f8fafa",
|
||||
"surface-container": "#eceeee",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"inverse-surface": "#2e3131"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter": "16px",
|
||||
"row-height-sm": "32px",
|
||||
"row-height-md": "48px",
|
||||
"container-margin": "24px",
|
||||
"compact-padding": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display-lot": ["Inter"],
|
||||
"h2": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"label-caps": ["Inter"],
|
||||
"body-base": ["Inter"],
|
||||
"table-data": ["Inter"],
|
||||
"h1": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"display-lot": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "500"}],
|
||||
"h1": ["20px", {"lineHeight": "28px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background antialiased">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 left-0 w-full z-40 flex justify-between items-center px-6 h-16 bg-white border-b border-slate-200 shadow-sm">
|
||||
<div class="flex items-center gap-4">
|
||||
<img alt="Logo Perusahaan Walet" class="h-10 w-auto" data-alt="Corporate minimalist logo for bird's nest company featuring a stylized swift bird icon in teal color" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBbjyPNHZQwSEKJXwRvtfnHtZ-yTzUkp54PbPcRU4rh_u1-SCYCYTT88GuSnKRe0KRaDO0RfJBJ6G64dzjbF-SY66HKRrn9D71_CFhT-IQfLa0nfTYw_8bAmRDu4J8a5JEtQom7ICoJ19OnAcQyTw8foYuxFRg8uYNHpC3OlTRPjpxuEvb1pbQQBXr8Uce16OhW-h--L2Fc9ZwWdoTJ4OTii7Ra9h-uDAGYzOJkeR1U0VakMuZn4VZcUZ8zyzELdGc0UwTdpGzTfg"/>
|
||||
<span class="font-inter text-xl font-bold text-teal-700">Sistem Inventaris Walet</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="hidden md:flex items-center bg-slate-50 border border-slate-200 rounded px-3 py-1.5">
|
||||
<span class="material-symbols-outlined text-slate-400 text-sm">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-sm w-64" placeholder="Cari data..." type="text"/>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="material-symbols-outlined text-slate-500 hover:bg-slate-50 p-2 rounded transition-colors">notifications</button>
|
||||
<button class="material-symbols-outlined text-slate-500 hover:bg-slate-50 p-2 rounded transition-colors">help_outline</button>
|
||||
<button class="bg-primary text-on-primary px-4 py-2 rounded font-inter text-sm flex items-center gap-2 active:opacity-80 transition-all">
|
||||
<span class="material-symbols-outlined text-sm">qr_code_scanner</span>
|
||||
Scan Barcode
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- SideNavBar -->
|
||||
<aside class="fixed left-0 top-0 h-full flex flex-col py-6 bg-slate-50 w-64 border-r border-slate-200 z-30">
|
||||
<div class="px-6 mb-10 pt-16">
|
||||
<h2 class="text-lg font-black text-teal-800 font-inter">Inventory Walet</h2>
|
||||
<p class="text-xs font-medium uppercase tracking-wider text-slate-500">Sistem Traceability</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-transform duration-200" href="#">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span class="font-inter text-xs font-medium uppercase tracking-wider">Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-transform duration-200" href="#">
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
<span class="font-inter text-xs font-medium uppercase tracking-wider">Laporan Stok</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 bg-teal-50 text-teal-700 rounded-r-lg border-l-4 border-teal-700 hover:translate-x-1 transition-transform duration-200" href="#">
|
||||
<span class="material-symbols-outlined">database</span>
|
||||
<span class="font-inter text-xs font-medium uppercase tracking-wider">Data Master</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-transform duration-200" href="#">
|
||||
<span class="material-symbols-outlined">qr_code_scanner</span>
|
||||
<span class="font-inter text-xs font-medium uppercase tracking-wider">Pelacakan</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-transform duration-200" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="font-inter text-xs font-medium uppercase tracking-wider">Pengaturan</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-4 py-6 mt-auto border-t border-slate-200">
|
||||
<button class="w-full bg-primary text-on-primary py-3 rounded-lg font-bold flex items-center justify-center gap-2 mb-4 hover:translate-x-1 transition-transform active:scale-95 duration-75">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
Tambah Lot Baru
|
||||
</button>
|
||||
<a class="flex items-center gap-3 px-4 py-2 text-slate-600 hover:bg-slate-100 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
<span class="font-inter text-xs font-medium uppercase tracking-wider">Bantuan</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2 text-slate-600 hover:bg-slate-100 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">logout</span>
|
||||
<span class="font-inter text-xs font-medium uppercase tracking-wider">Log Keluar</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="pl-64 pt-16 min-h-screen">
|
||||
<div class="p-container-margin">
|
||||
<!-- Header Section -->
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<h1 class="font-h1 text-h1 text-on-background">Daftar Pemasok</h1>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Kelola database pemasok sarang burung walet mentah dan mitra ekspor.</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="px-4 py-2 border border-outline text-on-surface rounded font-inter text-sm flex items-center gap-2 hover:bg-surface-container-high transition-colors">
|
||||
<span class="material-symbols-outlined text-sm">download</span>
|
||||
Ekspor CSV
|
||||
</button>
|
||||
<button class="px-4 py-2 bg-primary text-on-primary rounded font-inter text-sm flex items-center gap-2 active:opacity-90 shadow-sm">
|
||||
<span class="material-symbols-outlined text-sm">person_add</span>
|
||||
Tambah Pemasok
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dashboard Stats Summary (Bento-style layout) -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
|
||||
<div class="bg-white p-4 rounded border border-slate-200 shadow-sm flex items-center gap-4">
|
||||
<div class="p-3 bg-teal-50 text-teal-700 rounded">
|
||||
<span class="material-symbols-outlined">groups</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-caps text-label-caps text-on-surface-variant">TOTAL PEMASOK</p>
|
||||
<p class="font-display-lot text-display-lot text-on-surface">42</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 rounded border border-slate-200 shadow-sm flex items-center gap-4">
|
||||
<div class="p-3 bg-secondary-container text-on-secondary-container rounded">
|
||||
<span class="material-symbols-outlined">verified</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-caps text-label-caps text-on-surface-variant">PEMASOK TERVERIFIKASI</p>
|
||||
<p class="font-display-lot text-display-lot text-on-surface">38</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 rounded border border-slate-200 shadow-sm flex items-center gap-4">
|
||||
<div class="p-3 bg-tertiary-fixed text-on-tertiary-fixed-variant rounded">
|
||||
<span class="material-symbols-outlined">local_shipping</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-caps text-label-caps text-on-surface-variant">PENGIRIMAN BULAN INI</p>
|
||||
<p class="font-display-lot text-display-lot text-on-surface">128</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 rounded border border-slate-200 shadow-sm flex items-center gap-4">
|
||||
<div class="p-3 bg-primary-fixed text-on-primary-fixed-variant rounded">
|
||||
<span class="material-symbols-outlined">trending_up</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-caps text-label-caps text-on-surface-variant">TOTAL VOLUME (KG)</p>
|
||||
<p class="font-display-lot text-display-lot text-on-surface">1,450.5</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Supplier Table Container -->
|
||||
<div class="bg-white rounded border border-slate-200 shadow-sm overflow-hidden">
|
||||
<!-- Table Controls -->
|
||||
<div class="px-6 py-4 border-b border-slate-200 flex flex-wrap items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative">
|
||||
<select class="appearance-none bg-slate-50 border border-slate-200 text-sm rounded px-4 py-2 pr-10 focus:ring-primary focus:border-primary">
|
||||
<option>Semua Wilayah</option>
|
||||
<option>Kalimantan Barat</option>
|
||||
<option>Sumatera Utara</option>
|
||||
<option>Jawa Tengah</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-3 top-2.5 text-slate-400 pointer-events-none text-sm">expand_more</span>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<select class="appearance-none bg-slate-50 border border-slate-200 text-sm rounded px-4 py-2 pr-10 focus:ring-primary focus:border-primary">
|
||||
<option>Semua Status</option>
|
||||
<option>Aktif</option>
|
||||
<option>Non-Aktif</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-3 top-2.5 text-slate-400 pointer-events-none text-sm">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-body-sm text-body-sm text-slate-500">Menampilkan 1-10 dari 42 pemasok</p>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-slate-50 border-b border-slate-200">
|
||||
<th class="px-6 py-4 text-left font-label-caps text-label-caps text-on-surface-variant uppercase">Kode Pemasok</th>
|
||||
<th class="px-6 py-4 text-left font-label-caps text-label-caps text-on-surface-variant uppercase">Nama Pemasok</th>
|
||||
<th class="px-6 py-4 text-left font-label-caps text-label-caps text-on-surface-variant uppercase">Informasi Kontak</th>
|
||||
<th class="px-6 py-4 text-left font-label-caps text-label-caps text-on-surface-variant uppercase">Detail Bank</th>
|
||||
<th class="px-6 py-4 text-left font-label-caps text-label-caps text-on-surface-variant uppercase">Status</th>
|
||||
<th class="px-6 py-4 text-right font-label-caps text-label-caps text-on-surface-variant uppercase">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
<!-- Supplier Row 1 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-primary font-bold">SUP-W-001</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center font-bold text-teal-700 text-xs">BT</div>
|
||||
<div>
|
||||
<p class="font-table-data text-table-data text-on-surface">UD Berkah Tayan</p>
|
||||
<p class="text-[11px] text-on-surface-variant">Kalimantan Barat</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<p class="font-body-sm text-body-sm text-on-surface">+62 812-3456-7890</p>
|
||||
<p class="text-[11px] text-on-surface-variant">berkahtayan@example.com</p>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-1.5 py-0.5 bg-slate-200 rounded text-[10px] font-bold text-slate-700">BCA</span>
|
||||
<p class="font-table-data text-table-data text-on-surface">882-019-2831</p>
|
||||
</div>
|
||||
<p class="text-[11px] text-on-surface-variant">A.n. Ahmad Sudrajat</p>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
||||
Aktif
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="material-symbols-outlined text-slate-400 hover:text-primary transition-colors">more_vert</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Supplier Row 2 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-primary font-bold">SUP-W-002</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center font-bold text-teal-700 text-xs">MA</div>
|
||||
<div>
|
||||
<p class="font-table-data text-table-data text-on-surface">Mitra Abadi Medan</p>
|
||||
<p class="text-[11px] text-on-surface-variant">Sumatera Utara</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<p class="font-body-sm text-body-sm text-on-surface">+62 811-9988-7766</p>
|
||||
<p class="text-[11px] text-on-surface-variant">mitramedan@example.com</p>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-1.5 py-0.5 bg-slate-200 rounded text-[10px] font-bold text-slate-700">BNI</span>
|
||||
<p class="font-table-data text-table-data text-on-surface">0932-1122-33</p>
|
||||
</div>
|
||||
<p class="text-[11px] text-on-surface-variant">A.n. CV Mitra Abadi</p>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
||||
Aktif
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="material-symbols-outlined text-slate-400 hover:text-primary transition-colors">more_vert</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Supplier Row 3 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-primary font-bold">SUP-W-003</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center font-bold text-teal-700 text-xs">SJ</div>
|
||||
<div>
|
||||
<p class="font-table-data text-table-data text-on-surface">Sumber Jaya Walet</p>
|
||||
<p class="text-[11px] text-on-surface-variant">Jawa Tengah</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<p class="font-body-sm text-body-sm text-on-surface">+62 813-0011-2233</p>
|
||||
<p class="text-[11px] text-on-surface-variant">sumberjaya@example.com</p>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-1.5 py-0.5 bg-slate-200 rounded text-[10px] font-bold text-slate-700">Mandiri</span>
|
||||
<p class="font-table-data text-table-data text-on-surface">123-00-0987654-2</p>
|
||||
</div>
|
||||
<p class="text-[11px] text-on-surface-variant">A.n. Lilik Wijaya</p>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
|
||||
Menunggu Verifikasi
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="material-symbols-outlined text-slate-400 hover:text-primary transition-colors">more_vert</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Supplier Row 4 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-primary font-bold">SUP-W-004</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center font-bold text-teal-700 text-xs">PH</div>
|
||||
<div>
|
||||
<p class="font-table-data text-table-data text-on-surface">Putra Hulu Kapuas</p>
|
||||
<p class="text-[11px] text-on-surface-variant">Kalimantan Barat</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<p class="font-body-sm text-body-sm text-on-surface">+62 852-1111-2222</p>
|
||||
<p class="text-[11px] text-on-surface-variant">putrahulu@example.com</p>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-1.5 py-0.5 bg-slate-200 rounded text-[10px] font-bold text-slate-700">BRI</span>
|
||||
<p class="font-table-data text-table-data text-on-surface">0021-01-223344-55-6</p>
|
||||
</div>
|
||||
<p class="text-[11px] text-on-surface-variant">A.n. PT Putra Hulu Kapuas</p>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
||||
Aktif
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="material-symbols-outlined text-slate-400 hover:text-primary transition-colors">more_vert</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Pagination -->
|
||||
<div class="px-6 py-4 bg-slate-50 border-t border-slate-200 flex items-center justify-between">
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-500 hover:text-primary disabled:opacity-50" disabled="">Sebelumnya</button>
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="w-8 h-8 rounded bg-primary text-on-primary text-xs font-bold">1</button>
|
||||
<button class="w-8 h-8 rounded hover:bg-slate-200 text-xs font-bold">2</button>
|
||||
<button class="w-8 h-8 rounded hover:bg-slate-200 text-xs font-bold">3</button>
|
||||
<span class="px-2 text-slate-400 text-xs">...</span>
|
||||
<button class="w-8 h-8 rounded hover:bg-slate-200 text-xs font-bold">5</button>
|
||||
</div>
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-500 hover:text-primary">Selanjutnya</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- FAB for mobile context -->
|
||||
<div class="md:hidden fixed bottom-6 right-6 z-50">
|
||||
<button class="w-14 h-14 bg-primary text-on-primary rounded-full shadow-lg flex items-center justify-center active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/daftar_pemasok_1/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/daftar_pemasok_1/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 256 KiB |
419
design-assets/stitch_abel_stock/daftar_pemasok_2/code.html
Normal file
419
design-assets/stitch_abel_stock/daftar_pemasok_2/code.html
Normal file
@ -0,0 +1,419 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"secondary": "#4e6073",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"outline": "#6f797a",
|
||||
"background": "#f8fafa",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"error-container": "#ffdad6",
|
||||
"tertiary": "#60320f",
|
||||
"on-secondary-container": "#526478",
|
||||
"surface-container": "#eceeee",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"on-error-container": "#93000a",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"surface-tint": "#1d6871",
|
||||
"on-primary-container": "#92d5df",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"inverse-surface": "#2e3131",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"on-surface": "#191c1d",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"surface": "#f8fafa",
|
||||
"primary-container": "#0d5e67",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"error": "#ba1a1a",
|
||||
"surface-bright": "#f8fafa",
|
||||
"primary": "#00454c",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"on-error": "#ffffff",
|
||||
"surface-variant": "#e1e3e3",
|
||||
"on-background": "#191c1d",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-dim": "#d8dadb",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-container": "#7c4824"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"compact-padding": "8px",
|
||||
"row-height-sm": "32px",
|
||||
"row-height-md": "48px",
|
||||
"container-margin": "24px",
|
||||
"gutter": "16px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-base": ["Inter"],
|
||||
"h1": ["Inter"],
|
||||
"display-lot": ["Inter"],
|
||||
"table-data": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"h2": ["Inter"],
|
||||
"label-caps": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"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"}],
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
}
|
||||
body {
|
||||
background-color: #f8fafa;
|
||||
color: #191c1d;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-base overflow-hidden">
|
||||
<!-- SideNavBar -->
|
||||
<aside class="fixed left-0 top-0 h-full w-64 bg-slate-50 border-r border-slate-200 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-container rounded flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-on-primary-container" style="font-variation-settings: 'FILL' 1;">nest_eco</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-teal-900 font-black text-sm leading-tight">Walet Operations</h2>
|
||||
<p class="text-[10px] text-slate-500 font-bold tracking-wider">V1.0.4-Operational</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1 px-3">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:text-teal-600 hover:bg-slate-100 rounded duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="dashboard">dashboard</span>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:text-teal-600 hover:bg-slate-100 rounded duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="inventory_2">inventory_2</span>
|
||||
<span>Inventory Stock</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:text-teal-600 hover:bg-slate-100 rounded duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="account_tree">account_tree</span>
|
||||
<span>Traceability Logs</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 bg-teal-50 text-teal-700 border-r-4 border-teal-600 rounded-l duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="database" style="font-variation-settings: 'FILL' 1;">database</span>
|
||||
<span>Master Data</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:text-teal-600 hover:bg-slate-100 rounded duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="qr_code_scanner">qr_code_scanner</span>
|
||||
<span>Barcode Scanner</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto px-3 border-t border-slate-200 pt-4 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:text-teal-600 hover:bg-slate-100 rounded duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="help_outline">help_outline</span>
|
||||
<span>Support</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:text-teal-600 hover:bg-slate-100 rounded duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="logout">logout</span>
|
||||
<span>Sign Out</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Shell -->
|
||||
<main class="ml-64 min-h-screen flex flex-col">
|
||||
<!-- TopNavBar -->
|
||||
<header class="bg-white border-b border-slate-200 shadow-sm flex items-center justify-between px-6 h-14 w-full sticky top-0 z-40">
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
<div class="flex items-center bg-slate-100 rounded px-3 py-1.5 w-full max-w-md border border-slate-200">
|
||||
<span class="material-symbols-outlined text-slate-400 text-[18px] mr-2" data-icon="search">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-[13px] w-full text-slate-700" placeholder="Cari Kode Pemasok atau Nama..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-50 rounded transition-colors active:opacity-80">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-50 rounded transition-colors active:opacity-80">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="h-6 w-px bg-slate-200"></div>
|
||||
<div class="flex items-center gap-3 pl-2">
|
||||
<div class="text-right hidden sm:block">
|
||||
<p class="text-[12px] font-bold text-teal-800 leading-tight">Admin Operasional</p>
|
||||
<p class="text-[10px] text-slate-500">Logistik & Inventory</p>
|
||||
</div>
|
||||
<img alt="User Profile" class="w-8 h-8 rounded bg-slate-200 object-cover border border-slate-200" data-alt="corporate headshot of a professional logistics manager in a clean warehouse office environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAyohDeWyKSJirkxoxApfxsvjR8NIZOQ0aKY6MlnsQD9dYGTH5t4XulFsIYR7ZYvgr78clYd2cNdd257mFY-v-yRQkOk5UNtoYj0azDgo7H5taDoi62tlU6dUzF_HPt4OBiZ7dtCIsl56GsHkJ-8a8WJ26apcDRHy9kWISVLlGj98EB3OuKZd8IFNHiqEXjaBi9pQYB68hwH1PUhK5azdEzZ5nAM6VChqsWBXnX46q2fs4-E-7eRZDaoq9zaUrKiAqktwNhrt5xXw"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Content Area -->
|
||||
<div class="p-container-margin flex-1 overflow-auto bg-background">
|
||||
<!-- Header Section -->
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h1 class="font-h1 text-h1 text-on-surface">Daftar Pemasok</h1>
|
||||
<nav class="flex text-[11px] font-medium text-slate-400 mt-1 uppercase tracking-widest">
|
||||
<a class="hover:text-teal-600" href="#">Master Data</a>
|
||||
<span class="mx-2">/</span>
|
||||
<span class="text-teal-700">Daftar Pemasok</span>
|
||||
</nav>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 bg-primary text-on-primary px-4 py-2 rounded font-h2 text-h2 hover:opacity-90 transition-all active:scale-95">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="add">add</span>
|
||||
Tambah Pemasok
|
||||
</button>
|
||||
</div>
|
||||
<!-- Dashboard Stats Summary -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-gutter mb-6">
|
||||
<div class="bg-white p-4 border border-outline-variant shadow-[0px_2px_4px_rgba(0,0,0,0.05)] rounded">
|
||||
<p class="text-label-caps font-label-caps text-secondary uppercase mb-1">Total Pemasok</p>
|
||||
<div class="flex items-end justify-between">
|
||||
<span class="text-display-lot font-display-lot text-on-surface">124</span>
|
||||
<span class="text-teal-600 text-body-sm font-bold flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="trending_up">trending_up</span>
|
||||
+3 bulan ini
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 border border-outline-variant shadow-[0px_2px_4px_rgba(0,0,0,0.05)] rounded">
|
||||
<p class="text-label-caps font-label-caps text-secondary uppercase mb-1">Pemasok Aktif</p>
|
||||
<div class="flex items-end justify-between">
|
||||
<span class="text-display-lot font-display-lot text-on-surface">118</span>
|
||||
<div class="h-2 w-24 bg-slate-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-teal-600 w-[95%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 border border-outline-variant shadow-[0px_2px_4px_rgba(0,0,0,0.05)] rounded">
|
||||
<p class="text-label-caps font-label-caps text-secondary uppercase mb-1">Menunggu Review QC</p>
|
||||
<div class="flex items-end justify-between">
|
||||
<span class="text-display-lot font-display-lot text-on-surface">6</span>
|
||||
<span class="bg-tertiary-fixed text-on-tertiary-fixed-variant text-[10px] px-2 py-0.5 rounded font-bold">URGENT</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 border border-outline-variant shadow-[0px_2px_4px_rgba(0,0,0,0.05)] rounded">
|
||||
<p class="text-label-caps font-label-caps text-secondary uppercase mb-1">Total Transaksi (Bln)</p>
|
||||
<div class="flex items-end justify-between">
|
||||
<span class="text-display-lot font-display-lot text-on-surface">Rp 2.4M</span>
|
||||
<span class="material-symbols-outlined text-slate-300" data-icon="payments">payments</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Data Table Container -->
|
||||
<div class="bg-white border border-outline-variant shadow-[0px_2px_4px_rgba(0,0,0,0.05)] rounded overflow-hidden">
|
||||
<div class="p-4 border-b border-outline-variant flex flex-wrap items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="flex items-center gap-2 px-3 py-1.5 border border-outline text-on-surface-variant text-body-sm rounded hover:bg-slate-50 transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="filter_list">filter_list</span>
|
||||
Filter
|
||||
</button>
|
||||
<button class="flex items-center gap-2 px-3 py-1.5 border border-outline text-on-surface-variant text-body-sm rounded hover:bg-slate-50 transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="download">download</span>
|
||||
Export Excel
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-body-sm text-on-surface-variant">
|
||||
Menampilkan <span class="font-bold">1 - 10</span> dari <span class="font-bold">124</span> Pemasok
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-slate-50 border-b border-outline-variant">
|
||||
<th class="px-4 py-3 text-label-caps font-label-caps text-secondary uppercase tracking-wider">Kode</th>
|
||||
<th class="px-4 py-3 text-label-caps font-label-caps text-secondary uppercase tracking-wider">Nama Pemasok</th>
|
||||
<th class="px-4 py-3 text-label-caps font-label-caps text-secondary uppercase tracking-wider">Telepon</th>
|
||||
<th class="px-4 py-3 text-label-caps font-label-caps text-secondary uppercase tracking-wider">Email</th>
|
||||
<th class="px-4 py-3 text-label-caps font-label-caps text-secondary uppercase tracking-wider">Informasi Bank</th>
|
||||
<th class="px-4 py-3 text-label-caps font-label-caps text-secondary uppercase tracking-wider">Status</th>
|
||||
<th class="px-4 py-3 text-label-caps font-label-caps text-secondary uppercase tracking-wider text-right">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
<!-- Row 1 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-primary">SUP-WAL-001</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface">CV. Sarang Abadi Jaya</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface-variant">0812-3456-7890</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface-variant">admin@sarangabadi.com</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data">
|
||||
<div class="text-on-surface">Bank BCA</div>
|
||||
<div class="text-[11px] text-slate-500">8820-XXXX-1123</div>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-bold bg-teal-50 text-teal-700 border border-teal-100">Aktif</span>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-right">
|
||||
<button class="text-primary hover:underline font-bold text-[12px]">Lihat Detail</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-primary">SUP-WAL-002</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface">PT. Walet Kalimantan Lestari</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface-variant">0821-9988-7766</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface-variant">info@waletkal.id</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data">
|
||||
<div class="text-on-surface">Bank Mandiri</div>
|
||||
<div class="text-[11px] text-slate-500">123-00-XXXX-456</div>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-bold bg-teal-50 text-teal-700 border border-teal-100">Aktif</span>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-right">
|
||||
<button class="text-primary hover:underline font-bold text-[12px]">Lihat Detail</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-primary">SUP-WAL-003</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface">UD. Sumber Alam</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface-variant">0852-1122-3344</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface-variant">sumberalam@mail.com</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data">
|
||||
<div class="text-on-surface">Bank BNI</div>
|
||||
<div class="text-[11px] text-slate-500">4455-XXXX-001</div>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-bold bg-slate-100 text-slate-600 border border-slate-200">Non-Aktif</span>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-right">
|
||||
<button class="text-primary hover:underline font-bold text-[12px]">Lihat Detail</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-primary">SUP-WAL-004</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface">Bapak Heru Setiawan (Personal)</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface-variant">0813-5566-7788</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface-variant">heru.s@gmail.com</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data">
|
||||
<div class="text-on-surface">Bank BRI</div>
|
||||
<div class="text-[11px] text-slate-500">0012-XXXX-998</div>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-bold bg-teal-50 text-teal-700 border border-teal-100">Aktif</span>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-right">
|
||||
<button class="text-primary hover:underline font-bold text-[12px]">Lihat Detail</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 5 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-primary">SUP-WAL-005</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface">Koperasi Walet Mandiri</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface-variant">0811-0011-2233</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-on-surface-variant">kop@waletmandiri.org</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data">
|
||||
<div class="text-on-surface">Bank BCA</div>
|
||||
<div class="text-[11px] text-slate-500">8820-XXXX-5567</div>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-bold bg-teal-50 text-teal-700 border border-teal-100">Aktif</span>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding font-table-data text-table-data text-right">
|
||||
<button class="text-primary hover:underline font-bold text-[12px]">Lihat Detail</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Pagination Footer -->
|
||||
<div class="p-4 bg-slate-50 border-t border-outline-variant flex items-center justify-between">
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant bg-white text-slate-400 hover:bg-slate-50">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="chevron_left">chevron_left</span>
|
||||
</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded border border-primary bg-primary text-on-primary text-table-data font-bold">1</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant bg-white text-on-surface text-table-data hover:bg-slate-50">2</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant bg-white text-on-surface text-table-data hover:bg-slate-50">3</button>
|
||||
<span class="px-2 text-slate-400">...</span>
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant bg-white text-on-surface text-table-data hover:bg-slate-50">13</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center rounded border border-outline-variant bg-white text-slate-600 hover:bg-slate-50">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="chevron_right">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-body-sm text-on-surface-variant">Baris per halaman:</span>
|
||||
<select class="bg-white border border-outline-variant rounded px-2 py-1 text-[12px] font-bold focus:ring-teal-500">
|
||||
<option>10</option>
|
||||
<option>25</option>
|
||||
<option>50</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Contextual Help / Note Section -->
|
||||
<div class="mt-gutter grid grid-cols-1 md:grid-cols-3 gap-gutter">
|
||||
<div class="col-span-2 bg-secondary-container/30 border border-secondary-container p-4 rounded flex gap-4">
|
||||
<span class="material-symbols-outlined text-secondary" data-icon="info" style="font-variation-settings: 'FILL' 1;">info</span>
|
||||
<div>
|
||||
<h4 class="text-body-base font-bold text-on-secondary-container mb-1">Catatan Keamanan Data</h4>
|
||||
<p class="text-body-sm text-secondary leading-relaxed">Pastikan semua data rekening bank telah diverifikasi melalui proses KYC (Know Your Customer) sebelum melakukan pencairan dana untuk lot sarang burung walet yang diterima.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-outline-variant p-4 rounded flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-tertiary-fixed rounded-full flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-on-tertiary-fixed" data-icon="contact_support">contact_support</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-body-sm font-bold text-on-surface">Butuh Bantuan?</p>
|
||||
<p class="text-[11px] text-on-surface-variant">Hubungi IT Support</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="p-2 bg-slate-100 rounded hover:bg-slate-200 transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="arrow_forward">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Contextual FAB (Only on specific screens, but useful for quick actions here) -->
|
||||
<button class="fixed bottom-6 right-6 w-14 h-14 bg-teal-600 text-white rounded-full shadow-lg flex items-center justify-center hover:scale-105 active:scale-95 transition-all z-50">
|
||||
<span class="material-symbols-outlined text-[28px]" data-icon="search" style="font-variation-settings: 'wght' 600;">search</span>
|
||||
</button>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/daftar_pemasok_2/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/daftar_pemasok_2/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 284 KiB |
504
design-assets/stitch_abel_stock/dashboard/code.html
Normal file
504
design-assets/stitch_abel_stock/dashboard/code.html
Normal file
@ -0,0 +1,504 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>SwiftLot Walet Inventory Dashboard</title>
|
||||
<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;
|
||||
}
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body-base text-on-surface">
|
||||
<!-- Persistent 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 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" data-icon="nest_eco_friendly">nest_eco</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-teal-900 font-black text-sm leading-tight">Sarang Ops</h1>
|
||||
<p class="text-[10px] text-slate-500 uppercase tracking-wider font-bold">Pabrik Pengolahan A</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1 px-3">
|
||||
<a class="flex items-center gap-3 px-3 py-2 bg-white text-[#0D5E67] border-r-4 border-[#0D5E67] shadow-sm font-inter text-[13px] font-medium transition-all duration-150 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 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 font-inter text-[13px] font-medium transition-all duration-150 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 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 font-inter text-[13px] font-medium transition-all duration-150 active:scale-[0.98]" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="receipt_long">receipt_long</span>
|
||||
Penerimaan
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 font-inter text-[13px] font-medium transition-all duration-150 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 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 font-inter text-[13px] font-medium transition-all duration-150 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 flex items-center justify-center gap-2 py-2.5 bg-[#0D5E67] text-white rounded-lg text-xs font-bold hover:bg-primary transition-colors shadow-sm">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="qr_code_scanner">qr_code_scanner</span>
|
||||
Scan Lot Baru
|
||||
</button>
|
||||
</div>
|
||||
<div class="border-t border-slate-200 pt-4 px-3 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 font-inter text-[13px] font-medium transition-all duration-150 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 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 font-inter text-[13px] font-medium transition-all duration-150 active:scale-[0.98]" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="contact_support">contact_support</span>
|
||||
Dukungan
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="ml-64 min-h-screen flex flex-col">
|
||||
<!-- TopAppBar -->
|
||||
<header class="h-14 px-6 w-full flex justify-between items-center bg-white border-b border-slate-200 sticky top-0 z-40 shadow-sm">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-lg" data-icon="search">search</span>
|
||||
<input class="pl-10 pr-4 py-1.5 bg-slate-50 border-none rounded-md text-sm w-80 focus:ring-2 focus:ring-primary-container/20" placeholder="Cari kode lot, pemasok..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 text-slate-600 hover:bg-slate-50 rounded-full transition-colors 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 hover:bg-slate-50 rounded-full transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
</button>
|
||||
<div class="h-8 w-px bg-slate-200 mx-1"></div>
|
||||
<div class="flex items-center gap-3 pl-2">
|
||||
<div class="text-right">
|
||||
<p class="text-xs font-bold text-slate-900 leading-none">Admin User</p>
|
||||
<p class="text-[10px] text-slate-500">Pimpinan Operasional</p>
|
||||
</div>
|
||||
<img alt="Profil pengguna" class="w-8 h-8 rounded-full border border-slate-200" data-alt="professional corporate headshot of a middle-aged man in business attire, clean lighting, blurred office background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAvOHZYHDOhsBJiFvgOANstWvZr8vlJ-uWjVHQ6Fsi4Da01Rhew1cIi5G3IVtAUS7Y4JbYSKwSacvidWN370wBafGb1uJoZyTuyad6dMnP6GKUouJmkgZQ795U4slfJCdOFoiWaiw_i04kxQOVMjsGv0z6yM-L5dJ56nHyagqS5Cw8rqR9uE9Vcbmaay8rIA03U4dOV3k-D_Ag4jD8uhLszQGLxBRy3lxGD10W85r7kAJ3q5w93TTZ4DJKwiu9-wVz15He6_lk3pQ"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Canvas -->
|
||||
<div class="p-container-margin space-y-6">
|
||||
<!-- Page Title & Quick Actions Row -->
|
||||
<div class="flex justify-between items-end">
|
||||
<div>
|
||||
<h2 class="font-h1 text-h1 text-primary">Ikhtisar Operasional</h2>
|
||||
<p class="text-body-sm text-secondary">Status real-time inventaris Sarang Burung Walet.</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="px-4 py-2 border border-slate-200 bg-white text-primary text-xs font-bold rounded-lg hover:bg-slate-50 flex items-center gap-2 transition-all">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="add_shopping_cart">add_shopping_cart</span>
|
||||
Buat Pembelian
|
||||
</button>
|
||||
<button class="px-4 py-2 border border-slate-200 bg-white text-primary text-xs font-bold rounded-lg hover:bg-slate-50 flex items-center gap-2 transition-all">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="post_add">post_add</span>
|
||||
Penerimaan Baru
|
||||
</button>
|
||||
<button class="px-4 py-2 border border-slate-200 bg-white text-primary text-xs font-bold rounded-lg hover:bg-slate-50 flex items-center gap-2 transition-all">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="point_of_sale">point_of_sale</span>
|
||||
Penjualan Baru
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Metrics Bento Grid -->
|
||||
<div class="grid grid-cols-5 gap-gutter">
|
||||
<div class="bg-white p-4 border border-outline-variant rounded-lg shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<span class="text-label-caps text-outline uppercase">Total Stok Aktif</span>
|
||||
<span class="material-symbols-outlined text-primary-container" data-icon="inventory_2">inventory_2</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-display-lot text-display-lot">1.248,5</span>
|
||||
<span class="text-xs font-bold text-slate-500">kg</span>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center text-[11px] font-bold text-green-600">
|
||||
<span class="material-symbols-outlined text-xs" data-icon="trending_up">trending_up</span>
|
||||
<span>+4,2% dari minggu lalu</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 border border-outline-variant rounded-lg shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<span class="text-label-caps text-outline uppercase">Nilai Inventaris</span>
|
||||
<span class="material-symbols-outlined text-primary-container" data-icon="account_balance_wallet">account_balance_wallet</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="text-xs font-bold text-slate-500">$</span>
|
||||
<span class="font-display-lot text-display-lot">4,82M</span>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center text-[11px] font-bold text-slate-500">
|
||||
<span>Diperbarui 12m lalu</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 border border-outline-variant rounded-lg shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<span class="text-label-caps text-outline uppercase">Pembelian (Bulan Ini)</span>
|
||||
<span class="material-symbols-outlined text-primary-container" data-icon="shopping_bag">shopping_bag</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-display-lot text-display-lot">312,4</span>
|
||||
<span class="text-xs font-bold text-slate-500">kg</span>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center text-[11px] font-bold text-slate-500">
|
||||
<span>42 Transaksi</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 border border-outline-variant rounded-lg shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<span class="text-label-caps text-outline uppercase">Penjualan (Bulan Ini)</span>
|
||||
<span class="material-symbols-outlined text-primary-container" data-icon="sell">sell</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-display-lot text-display-lot">284,1</span>
|
||||
<span class="text-xs font-bold text-slate-500">kg</span>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center text-[11px] font-bold text-green-600">
|
||||
<span class="material-symbols-outlined text-xs" data-icon="check_circle">check_circle</span>
|
||||
<span>Sesuai Target</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 border border-outline-variant rounded-lg shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<span class="text-label-caps text-outline uppercase">Penyusutan (Bulan Ini)</span>
|
||||
<span class="material-symbols-outlined text-error" data-icon="trending_down">trending_down</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-display-lot text-display-lot text-error">0,84</span>
|
||||
<span class="text-xs font-bold text-error">%</span>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center text-[11px] font-bold text-error">
|
||||
<span class="material-symbols-outlined text-xs" data-icon="warning">warning</span>
|
||||
<span>Di atas batas (0,5%)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Charts & Alerts Section -->
|
||||
<div class="grid grid-cols-12 gap-gutter">
|
||||
<!-- Main Comparison Chart (Mockup) -->
|
||||
<div class="col-span-8 bg-white border border-outline-variant rounded-lg p-6 shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h3 class="font-h2 text-h2 text-primary">Tren Pembelian vs Penjualan</h3>
|
||||
<select class="text-xs font-bold border-slate-200 rounded-md py-1 px-3 focus:ring-primary">
|
||||
<option>6 Bulan Terakhir</option>
|
||||
<option>12 Bulan Terakhir</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="h-64 flex items-end justify-between gap-4 px-2">
|
||||
<!-- Bar Chart Mockup -->
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full flex gap-1 items-end h-full">
|
||||
<div class="bg-primary-container/20 w-1/2 h-4/6 rounded-t-sm"></div>
|
||||
<div class="bg-primary-container w-1/2 h-3/6 rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-label-caps text-[10px] text-slate-400">MEI</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full flex gap-1 items-end h-full">
|
||||
<div class="bg-primary-container/20 w-1/2 h-5/6 rounded-t-sm"></div>
|
||||
<div class="bg-primary-container w-1/2 h-4/6 rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-label-caps text-[10px] text-slate-400">JUN</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full flex gap-1 items-end h-full">
|
||||
<div class="bg-primary-container/20 w-1/2 h-3/6 rounded-t-sm"></div>
|
||||
<div class="bg-primary-container w-1/2 h-5/6 rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-label-caps text-[10px] text-slate-400">JUL</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full flex gap-1 items-end h-full">
|
||||
<div class="bg-primary-container/20 w-1/2 h-6/6 rounded-t-sm"></div>
|
||||
<div class="bg-primary-container w-1/2 h-2/6 rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-label-caps text-[10px] text-slate-400">AGS</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full flex gap-1 items-end h-full">
|
||||
<div class="bg-primary-container/20 w-1/2 h-4/6 rounded-t-sm"></div>
|
||||
<div class="bg-primary-container w-1/2 h-4/6 rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-label-caps text-[10px] text-slate-400">SEP</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full flex gap-1 items-end h-full">
|
||||
<div class="bg-primary-container/20 w-1/2 h-5/6 rounded-t-sm"></div>
|
||||
<div class="bg-primary-container w-1/2 h-3/6 rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-label-caps text-[10px] text-slate-400">OKT</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex gap-6 pt-4 border-t border-slate-100">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 rounded-full bg-primary-container/20"></div>
|
||||
<span class="text-body-sm font-bold text-slate-600">Pembelian</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 rounded-full bg-primary-container"></div>
|
||||
<span class="text-body-sm font-bold text-slate-600">Penjualan</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Margin & Efficiency (Bento Extension) -->
|
||||
<div class="col-span-4 flex flex-col gap-gutter">
|
||||
<div class="flex-1 bg-primary-container p-6 rounded-lg text-white">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<h3 class="font-h2 text-h2 text-on-primary-container">Rata-rata Margin</h3>
|
||||
<span class="material-symbols-outlined" data-icon="show_chart">show_chart</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2 mb-2">
|
||||
<span class="text-4xl font-black">22,4%</span>
|
||||
</div>
|
||||
<p class="text-xs text-on-primary-container/80">Efisiensi pemrosesan meningkat sebesar 1,2% periode ini melalui kontrol kelembaban yang dioptimalkan.</p>
|
||||
</div>
|
||||
<div class="flex-1 bg-white border border-outline-variant rounded-lg p-5">
|
||||
<h3 class="font-h2 text-h2 text-primary mb-4">Distribusi Umur Lot</h3>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<div class="flex justify-between text-[11px] font-bold mb-1">
|
||||
<span class="text-slate-500 uppercase">0-30 Hari</span>
|
||||
<span class="text-primary">64%</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary-container w-[64%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-[11px] font-bold mb-1">
|
||||
<span class="text-slate-500 uppercase">31-60 Hari</span>
|
||||
<span class="text-primary">28%</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary-container w-[28%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-[11px] font-bold mb-1">
|
||||
<span class="text-slate-500 uppercase">60+ Hari</span>
|
||||
<span class="text-error">8%</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-error w-[8%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom Section: Alerts & Summaries -->
|
||||
<div class="grid grid-cols-12 gap-gutter">
|
||||
<!-- Alerts Table -->
|
||||
<div class="col-span-8 bg-white border border-outline-variant rounded-lg shadow-[0px_2px_4px_rgba(0,0,0,0.05)] overflow-hidden">
|
||||
<div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center">
|
||||
<h3 class="font-h2 text-h2 text-primary">Peringatan Lot Kritis</h3>
|
||||
<button class="text-primary-container text-xs font-bold hover:underline">Lihat Semua</button>
|
||||
</div>
|
||||
<table class="w-full text-left">
|
||||
<thead class="bg-slate-50 border-b border-slate-100">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-label-caps text-outline uppercase">ID Lot</th>
|
||||
<th class="px-6 py-3 text-label-caps text-outline uppercase">Status</th>
|
||||
<th class="px-6 py-3 text-label-caps text-outline uppercase">Umur</th>
|
||||
<th class="px-6 py-3 text-label-caps text-outline uppercase">Kelembaban</th>
|
||||
<th class="px-6 py-3 text-label-caps text-outline uppercase">Masalah</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-50">
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-3 font-table-data text-table-data text-primary">#SW-2023-901</td>
|
||||
<td class="px-6 py-3">
|
||||
<span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 text-[10px] font-bold rounded-full">Dalam QC</span>
|
||||
</td>
|
||||
<td class="px-6 py-3 text-table-data">72 Hari</td>
|
||||
<td class="px-6 py-3 text-table-data">12,5%</td>
|
||||
<td class="px-6 py-3 text-table-data text-error font-semibold">Melebihi Batas Umur</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-3 font-table-data text-table-data text-primary">#SW-2023-912</td>
|
||||
<td class="px-6 py-3">
|
||||
<span class="px-2 py-0.5 bg-red-100 text-red-800 text-[10px] font-bold rounded-full">Ditahan</span>
|
||||
</td>
|
||||
<td class="px-6 py-3 text-table-data">45 Hari</td>
|
||||
<td class="px-6 py-3 text-table-data">14,2%</td>
|
||||
<td class="px-6 py-3 text-table-data text-error font-semibold">Kelembaban Tinggi</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-3 font-table-data text-table-data text-primary">#SW-2023-885</td>
|
||||
<td class="px-6 py-3">
|
||||
<span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 text-[10px] font-bold rounded-full">Dalam QC</span>
|
||||
</td>
|
||||
<td class="px-6 py-3 text-table-data">68 Hari</td>
|
||||
<td class="px-6 py-3 text-table-data">11,8%</td>
|
||||
<td class="px-6 py-3 text-table-data text-error font-semibold">Butuh Audit</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Top Partners Summary -->
|
||||
<div class="col-span-4 flex flex-col gap-gutter">
|
||||
<div class="bg-white border border-outline-variant rounded-lg shadow-[0px_2px_4px_rgba(0,0,0,0.05)] overflow-hidden flex-1">
|
||||
<div class="px-5 py-4 border-b border-slate-100 bg-slate-50">
|
||||
<h3 class="font-h2 text-h2 text-primary">Mitra Utama</h3>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div class="flex gap-4 mb-4 border-b border-slate-100 pb-2">
|
||||
<button class="text-xs font-bold text-primary border-b-2 border-primary pb-2">Pemasok</button>
|
||||
<button class="text-xs font-bold text-slate-400 pb-2">Pelanggan</button>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-slate-100 flex items-center justify-center font-bold text-xs text-slate-500">BH</div>
|
||||
<div>
|
||||
<p class="text-xs font-bold text-slate-900">Bumi Hijau Group</p>
|
||||
<p class="text-[10px] text-slate-500">12 Lot / 145kg</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-primary">+$82rb</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-slate-100 flex items-center justify-center font-bold text-xs text-slate-500">KS</div>
|
||||
<div>
|
||||
<p class="text-xs font-bold text-slate-900">Kalimantan Sourcing</p>
|
||||
<p class="text-[10px] text-slate-500">8 Lot / 112kg</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-primary">+$64rb</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-slate-100 flex items-center justify-center font-bold text-xs text-slate-500">PJ</div>
|
||||
<div>
|
||||
<p class="text-xs font-bold text-slate-900">Prima Jaya Walet</p>
|
||||
<p class="text-[10px] text-slate-500">6 Lot / 88kg</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-primary">+$49rb</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-slate-100 flex items-center justify-center font-bold text-xs text-slate-500">AS</div>
|
||||
<div>
|
||||
<p class="text-xs font-bold text-slate-900">Agro Sejahtera</p>
|
||||
<p class="text-[10px] text-slate-500">5 Lot / 76kg</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-primary">+$38rb</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/dashboard/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/dashboard/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
@ -0,0 +1,507 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Birds Nest Inventory Dashboard</title>
|
||||
<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;
|
||||
}
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body-base text-on-surface">
|
||||
<!-- Persistent 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 flex items-center gap-3">
|
||||
<div class="w-10 h-10 flex items-center justify-center">
|
||||
<img alt="Birds Nest Logo" class="w-full h-full object-contain" src="https://lh3.googleusercontent.com/aida/ADBb0ujG5Gj9MRmb-CMFDL0NF3HPi4slr9bDgIzHxM-XZaNVIc9l1XH3Ue3IwDfLuAZO3TBwmDPKbCIPGYh7lWzUtXLQDuSjoIdVUdiejVsxr2jKoQCNWJjb-xu4jbzoUnkbBMO7pF2xbN29frLKb5kaj-ieQZp1mResor6IhdS2teSUkJOdeYLSIks-mOQPfqbrph-63f-xumqHCzXqxccOnFQIne9y-s8EjwKUCIvbA1R91w4MtGT_lNrZ6gKPGw42XwEU4YDYzaH3"/>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-teal-900 font-black text-sm leading-tight">Birds Nest</h1>
|
||||
<p class="text-[10px] text-slate-500 uppercase tracking-wider font-bold">Pabrik Pengolahan A</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1 px-3">
|
||||
<a class="flex items-center gap-3 px-3 py-2 bg-white text-[#0D5E67] border-r-4 border-[#0D5E67] shadow-sm font-inter text-[13px] font-medium transition-all duration-150 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 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 font-inter text-[13px] font-medium transition-all duration-150 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 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 font-inter text-[13px] font-medium transition-all duration-150 active:scale-[0.98]" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="receipt_long">receipt_long</span>
|
||||
Penerimaan
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 font-inter text-[13px] font-medium transition-all duration-150 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 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 font-inter text-[13px] font-medium transition-all duration-150 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 flex items-center justify-center gap-2 py-2.5 bg-[#0D5E67] text-white rounded-lg text-xs font-bold hover:bg-primary transition-colors shadow-sm">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="qr_code_scanner">qr_code_scanner</span>
|
||||
Scan Lot Baru
|
||||
</button>
|
||||
</div>
|
||||
<div class="border-t border-slate-200 pt-4 px-3 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 font-inter text-[13px] font-medium transition-all duration-150 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 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 font-inter text-[13px] font-medium transition-all duration-150 active:scale-[0.98]" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="contact_support">contact_support</span>
|
||||
Dukungan
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="ml-64 min-h-screen flex flex-col">
|
||||
<!-- TopAppBar -->
|
||||
<header class="h-14 px-6 w-full flex justify-between items-center bg-white border-b border-slate-200 sticky top-0 z-40 shadow-sm">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-lg" data-icon="search">search</span>
|
||||
<input class="pl-10 pr-4 py-1.5 bg-slate-50 border-none rounded-md text-sm w-80 focus:ring-2 focus:ring-primary-container/20" placeholder="Cari kode lot, pemasok..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 text-slate-600 hover:bg-slate-50 rounded-full transition-colors 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 hover:bg-slate-50 rounded-full transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
</button>
|
||||
<div class="h-8 w-px bg-slate-200 mx-1"></div>
|
||||
<div class="flex items-center gap-3 pl-2">
|
||||
<div class="text-right">
|
||||
<p class="text-xs font-bold text-slate-900 leading-none">Admin User</p>
|
||||
<p class="text-[10px] text-slate-500">Pimpinan Operasional</p>
|
||||
</div>
|
||||
<img alt="Profil pengguna" class="w-8 h-8 rounded-full border border-slate-200" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAvOHZYHDOhsBJiFvgOANstWvZr8vlJ-uWjVHQ6Fsi4Da01Rhew1cIi5G3IVtAUS7Y4JbYSKwSacvidWN370wBafGb1uJoZyTuyad6dMnP6GKUouJmkgZQ795U4slfJCdOFoiWaiw_i04kxQOVMjsGv0z6yM-L5dJ56nHyagqS5Cw8rqR9uE9Vcbmaay8rIA03U4dOV3k-D_Ag4jD8uhLszQGLxBRy3lxGD10W85r7kAJ3q5w93TTZ4DJKwiu9-wVz15He6_lk3pQ"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Canvas -->
|
||||
<div class="p-container-margin space-y-6">
|
||||
<!-- Page Title & Quick Actions Row -->
|
||||
<div class="flex justify-between items-end">
|
||||
<div>
|
||||
<h2 class="font-h1 text-h1 text-primary">Ikhtisar Operasional</h2>
|
||||
<p class="text-body-sm text-secondary">Status real-time inventaris Birds Nest.</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="px-4 py-2 border border-slate-200 bg-white text-primary text-xs font-bold rounded-lg hover:bg-slate-50 flex items-center gap-2 transition-all">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="add_shopping_cart">add_shopping_cart</span>
|
||||
Buat Pembelian
|
||||
</button>
|
||||
<button class="px-4 py-2 border border-slate-200 bg-white text-primary text-xs font-bold rounded-lg hover:bg-slate-50 flex items-center gap-2 transition-all">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="post_add">post_add</span>
|
||||
Penerimaan Baru
|
||||
</button>
|
||||
<button class="px-4 py-2 border border-slate-200 bg-white text-primary text-xs font-bold rounded-lg hover:bg-slate-50 flex items-center gap-2 transition-all">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="point_of_sale">point_of_sale</span>
|
||||
Penjualan Baru
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Metrics Bento Grid -->
|
||||
<div class="grid grid-cols-5 gap-gutter">
|
||||
<div class="bg-white p-4 border border-outline-variant rounded-lg shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<span class="text-label-caps text-outline uppercase">Total Stok Aktif</span>
|
||||
<span class="material-symbols-outlined text-primary-container" data-icon="inventory_2">inventory_2</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-display-lot text-display-lot">1.248,5</span>
|
||||
<span class="text-xs font-bold text-slate-500">kg</span>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center text-[11px] font-bold text-green-600">
|
||||
<span class="material-symbols-outlined text-xs" data-icon="trending_up">trending_up</span>
|
||||
<span>+4,2% dari minggu lalu</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 border border-outline-variant rounded-lg shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<span class="text-label-caps text-outline uppercase">Nilai Inventaris</span>
|
||||
<span class="material-symbols-outlined text-primary-container" data-icon="account_balance_wallet">account_balance_wallet</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span class="text-xs font-bold text-slate-500">$</span>
|
||||
<span class="font-display-lot text-display-lot">4,82M</span>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center text-[11px] font-bold text-slate-500">
|
||||
<span>Diperbarui 12m lalu</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 border border-outline-variant rounded-lg shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<span class="text-label-caps text-outline uppercase">Pembelian (Bulan Ini)</span>
|
||||
<span class="material-symbols-outlined text-primary-container" data-icon="shopping_bag">shopping_bag</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-display-lot text-display-lot">312,4</span>
|
||||
<span class="text-xs font-bold text-slate-500">kg</span>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center text-[11px] font-bold text-slate-500">
|
||||
<span>42 Transaksi</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 border border-outline-variant rounded-lg shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<span class="text-label-caps text-outline uppercase">Penjualan (Bulan Ini)</span>
|
||||
<span class="material-symbols-outlined text-primary-container" data-icon="sell">sell</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-display-lot text-display-lot">284,1</span>
|
||||
<span class="text-xs font-bold text-slate-500">kg</span>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center text-[11px] font-bold text-green-600">
|
||||
<span class="material-symbols-outlined text-xs" data-icon="check_circle">check_circle</span>
|
||||
<span>Sesuai Target</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 border border-outline-variant rounded-lg shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<span class="text-label-caps text-outline uppercase">Penyusutan (Bulan Ini)</span>
|
||||
<span class="material-symbols-outlined text-error" data-icon="trending_down">trending_down</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-display-lot text-display-lot text-error">0,84</span>
|
||||
<span class="text-xs font-bold text-error">%</span>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center text-[11px] font-bold text-error">
|
||||
<span class="material-symbols-outlined text-xs" data-icon="warning">warning</span>
|
||||
<span>Di atas batas (0,5%)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Charts & Alerts Section -->
|
||||
<div class="grid grid-cols-12 gap-gutter">
|
||||
<!-- Main Comparison Chart (Mockup) -->
|
||||
<div class="col-span-8 bg-white border border-outline-variant rounded-lg p-6 shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h3 class="font-h2 text-h2 text-primary">Tren Pembelian vs Penjualan</h3>
|
||||
<select class="text-xs font-bold border-slate-200 rounded-md py-1 px-3 focus:ring-primary">
|
||||
<option>6 Bulan Terakhir</option>
|
||||
<option>12 Bulan Terakhir</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="h-64 flex items-end justify-between gap-4 px-2">
|
||||
<!-- Bar Chart Mockup -->
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full flex gap-1 items-end h-full">
|
||||
<div class="bg-primary-container/20 w-1/2 h-4/6 rounded-t-sm"></div>
|
||||
<div class="bg-primary-container w-1/2 h-3/6 rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-label-caps text-[10px] text-slate-400">MEI</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full flex gap-1 items-end h-full">
|
||||
<div class="bg-primary-container/20 w-1/2 h-5/6 rounded-t-sm"></div>
|
||||
<div class="bg-primary-container w-1/2 h-4/6 rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-label-caps text-[10px] text-slate-400">JUN</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full flex gap-1 items-end h-full">
|
||||
<div class="bg-primary-container/20 w-1/2 h-3/6 rounded-t-sm"></div>
|
||||
<div class="bg-primary-container w-1/2 h-5/6 rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-label-caps text-[10px] text-slate-400">JUL</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full flex gap-1 items-end h-full">
|
||||
<div class="bg-primary-container/20 w-1/2 h-6/6 rounded-t-sm"></div>
|
||||
<div class="bg-primary-container w-1/2 h-2/6 rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-label-caps text-[10px] text-slate-400">AGS</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full flex gap-1 items-end h-full">
|
||||
<div class="bg-primary-container/20 w-1/2 h-4/6 rounded-t-sm"></div>
|
||||
<div class="bg-primary-container w-1/2 h-4/6 rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-label-caps text-[10px] text-slate-400">SEP</span>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center gap-2">
|
||||
<div class="w-full flex gap-1 items-end h-full">
|
||||
<div class="bg-primary-container/20 w-1/2 h-5/6 rounded-t-sm"></div>
|
||||
<div class="bg-primary-container w-1/2 h-3/6 rounded-t-sm"></div>
|
||||
</div>
|
||||
<span class="text-label-caps text-[10px] text-slate-400">OKT</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 flex gap-6 pt-4 border-t border-slate-100">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 rounded-full bg-primary-container/20"></div>
|
||||
<span class="text-body-sm font-bold text-slate-600">Pembelian</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 rounded-full bg-primary-container"></div>
|
||||
<span class="text-body-sm font-bold text-slate-600">Penjualan</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Margin & Efficiency -->
|
||||
<div class="col-span-4 flex flex-col gap-gutter">
|
||||
<div class="flex-1 bg-primary-container p-6 rounded-lg text-white">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<h3 class="font-h2 text-h2 text-on-primary-container">Rata-rata Margin</h3>
|
||||
<span class="material-symbols-outlined" data-icon="show_chart">show_chart</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2 mb-2">
|
||||
<span class="text-4xl font-black">22,4%</span>
|
||||
</div>
|
||||
<p class="text-xs text-on-primary-container/80">Efisiensi pemrosesan meningkat sebesar 1,2% periode ini melalui kontrol kelembaban yang dioptimalkan.</p>
|
||||
</div>
|
||||
<div class="flex-1 bg-white border border-outline-variant rounded-lg p-5">
|
||||
<h3 class="font-h2 text-h2 text-primary mb-4">Distribusi Umur Lot</h3>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<div class="flex justify-between text-[11px] font-bold mb-1">
|
||||
<span class="text-slate-500 uppercase">0-30 Hari</span>
|
||||
<span class="text-primary">64%</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary-container w-[64%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-[11px] font-bold mb-1">
|
||||
<span class="text-slate-500 uppercase">31-60 Hari</span>
|
||||
<span class="text-primary">28%</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-primary-container w-[28%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-[11px] font-bold mb-1">
|
||||
<span class="text-slate-500 uppercase">60+ Hari</span>
|
||||
<span class="text-error">8%</span>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-error w-[8%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bottom Section: Alerts & Summaries -->
|
||||
<div class="grid grid-cols-12 gap-gutter">
|
||||
<!-- Alerts Table -->
|
||||
<div class="col-span-8 bg-white border border-outline-variant rounded-lg shadow-[0px_2px_4px_rgba(0,0,0,0.05)] overflow-hidden">
|
||||
<div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center">
|
||||
<h3 class="font-h2 text-h2 text-primary">Peringatan Lot Kritis</h3>
|
||||
<button class="text-primary-container text-xs font-bold hover:underline">Lihat Semua</button>
|
||||
</div>
|
||||
<table class="w-full text-left">
|
||||
<thead class="bg-slate-50 border-b border-slate-100">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-label-caps text-outline uppercase">ID Lot</th>
|
||||
<th class="px-6 py-3 text-label-caps text-outline uppercase">Status</th>
|
||||
<th class="px-6 py-3 text-label-caps text-outline uppercase">Umur</th>
|
||||
<th class="px-6 py-3 text-label-caps text-outline uppercase">Kelembaban</th>
|
||||
<th class="px-6 py-3 text-label-caps text-outline uppercase">Masalah</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-50">
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-3 font-table-data text-table-data text-primary">#SW-2023-901</td>
|
||||
<td class="px-6 py-3">
|
||||
<span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 text-[10px] font-bold rounded-full">Dalam QC</span>
|
||||
</td>
|
||||
<td class="px-6 py-3 text-table-data">72 Hari</td>
|
||||
<td class="px-6 py-3 text-table-data">12,5%</td>
|
||||
<td class="px-6 py-3 text-table-data text-error font-semibold">Melebihi Batas Umur</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-3 font-table-data text-table-data text-primary">#SW-2023-912</td>
|
||||
<td class="px-6 py-3">
|
||||
<span class="px-2 py-0.5 bg-red-100 text-red-800 text-[10px] font-bold rounded-full">Ditahan</span>
|
||||
</td>
|
||||
<td class="px-6 py-3 text-table-data">45 Hari</td>
|
||||
<td class="px-6 py-3 text-table-data">14,2%</td>
|
||||
<td class="px-6 py-3 text-table-data text-error font-semibold">Kelembaban Tinggi</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-3 font-table-data text-table-data text-primary">#SW-2023-885</td>
|
||||
<td class="px-6 py-3">
|
||||
<span class="px-2 py-0.5 bg-yellow-100 text-yellow-800 text-[10px] font-bold rounded-full">Dalam QC</span>
|
||||
</td>
|
||||
<td class="px-6 py-3 text-table-data">68 Hari</td>
|
||||
<td class="px-6 py-3 text-table-data">11,8%</td>
|
||||
<td class="px-6 py-3 text-table-data text-error font-semibold">Butuh Audit</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Top Partners Summary -->
|
||||
<div class="col-span-4 flex flex-col gap-gutter">
|
||||
<div class="bg-white border border-outline-variant rounded-lg shadow-[0px_2px_4px_rgba(0,0,0,0.05)] overflow-hidden flex-1">
|
||||
<div class="px-5 py-4 border-b border-slate-100 bg-slate-50 flex items-center justify-between">
|
||||
<h3 class="font-h2 text-h2 text-primary">Mitra Utama</h3>
|
||||
<div class="w-6 h-6 grayscale opacity-30">
|
||||
<img alt="Watermark" class="w-full h-full object-contain" src="https://lh3.googleusercontent.com/aida/ADBb0ujG5Gj9MRmb-CMFDL0NF3HPi4slr9bDgIzHxM-XZaNVIc9l1XH3Ue3IwDfLuAZO3TBwmDPKbCIPGYh7lWzUtXLQDuSjoIdVUdiejVsxr2jKoQCNWJjb-xu4jbzoUnkbBMO7pF2xbN29frLKb5kaj-ieQZp1mResor6IhdS2teSUkJOdeYLSIks-mOQPfqbrph-63f-xumqHCzXqxccOnFQIne9y-s8EjwKUCIvbA1R91w4MtGT_lNrZ6gKPGw42XwEU4YDYzaH3"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div class="flex gap-4 mb-4 border-b border-slate-100 pb-2">
|
||||
<button class="text-xs font-bold text-primary border-b-2 border-primary pb-2">Pemasok</button>
|
||||
<button class="text-xs font-bold text-slate-400 pb-2">Pelanggan</button>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-slate-100 flex items-center justify-center font-bold text-xs text-slate-500">BH</div>
|
||||
<div>
|
||||
<p class="text-xs font-bold text-slate-900">Bumi Hijau Group</p>
|
||||
<p class="text-[10px] text-slate-500">12 Lot / 145kg</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-primary">+$82rb</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-slate-100 flex items-center justify-center font-bold text-xs text-slate-500">KS</div>
|
||||
<div>
|
||||
<p class="text-xs font-bold text-slate-900">Kalimantan Sourcing</p>
|
||||
<p class="text-[10px] text-slate-500">8 Lot / 112kg</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-primary">+$64rb</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-slate-100 flex items-center justify-center font-bold text-xs text-slate-500">PJ</div>
|
||||
<div>
|
||||
<p class="text-xs font-bold text-slate-900">Prima Jaya Walet</p>
|
||||
<p class="text-[10px] text-slate-500">6 Lot / 88kg</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-primary">+$49rb</span>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-slate-100 flex items-center justify-center font-bold text-xs text-slate-500">AS</div>
|
||||
<div>
|
||||
<p class="text-xs font-bold text-slate-900">Agro Sejahtera</p>
|
||||
<p class="text-[10px] text-slate-500">5 Lot / 76kg</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-primary">+$38rb</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 275 KiB |
@ -0,0 +1,384 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-variant": "#e1e3e3",
|
||||
"tertiary-container": "#7c4824",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"primary": "#00454c",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"error": "#ba1a1a",
|
||||
"outline": "#6f797a",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"tertiary": "#60320f",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"surface-bright": "#f8fafa",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"on-primary-container": "#92d5df",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"on-surface": "#191c1d",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"surface-dim": "#d8dadb",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"surface-container": "#eceeee",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"on-error-container": "#93000a",
|
||||
"secondary": "#4e6073",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-background": "#191c1d",
|
||||
"inverse-surface": "#2e3131",
|
||||
"on-error": "#ffffff",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"primary-container": "#0d5e67",
|
||||
"background": "#f8fafa",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-tint": "#1d6871",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"surface": "#f8fafa",
|
||||
"on-secondary-container": "#526478"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter": "16px",
|
||||
"container-margin": "24px",
|
||||
"row-height-sm": "32px",
|
||||
"row-height-md": "48px",
|
||||
"compact-padding": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display-lot": ["Inter"],
|
||||
"body-base": ["Inter"],
|
||||
"label-caps": ["Inter"],
|
||||
"h2": ["Inter"],
|
||||
"h1": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"table-data": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"display-lot": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"h1": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "500"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #f8fafa;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background antialiased">
|
||||
<!-- Top Navigation Bar -->
|
||||
<header class="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 font-['Inter'] antialiased tracking-tight docked full-width top-0 sticky flex justify-between items-center h-14 px-6 w-full z-40">
|
||||
<div class="flex items-center gap-4">
|
||||
<img alt="Logo" class="h-8 w-8 object-contain" data-alt="Professional corporate logo for an inventory management system featuring minimalist bird nest motifs in teal tones" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA4AQFm_dFDl5o3ZjKCU72_sVBsL3QLyV1cVzRRa-iUzg3dnZR2Ze5CgutK7IwYg4MiV-N1F_gmTlHItV0yKYXdIkNfYtZIKW9yLxuCfbRO__bE_5wH02gmR3_vdiX3FG4x0nWKw5FM84CeJE_N4Xm-jMWQ8vsEms83YraTfCx8AK_aPXER_5u6SBaZaCssDRfV8g6ik_6cu_A1w8ItjmJ0TOqk2mzaurKPjwipWsYJxhmnReeOQLnXaYDkq5u1Op3qJ3ijTYgsEw"/>
|
||||
<span class="text-lg font-bold text-teal-800 dark:text-teal-300">Sarang Inventory Pro</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2 px-3 py-1.5 bg-slate-100 rounded-lg">
|
||||
<span class="material-symbols-outlined text-slate-500 text-sm">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-sm w-48" placeholder="Cari lot..." type="text"/>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="p-2 hover:bg-slate-50 transition-colors rounded-full">
|
||||
<span class="material-symbols-outlined text-slate-500">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 hover:bg-slate-50 transition-colors rounded-full">
|
||||
<span class="material-symbols-outlined text-slate-500">settings</span>
|
||||
</button>
|
||||
<div class="h-8 w-8 rounded-full bg-primary flex items-center justify-center text-white font-bold text-xs">
|
||||
M
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="flex min-h-[calc(100vh-3.5rem)]">
|
||||
<!-- Side Navigation Bar -->
|
||||
<aside class="bg-slate-50 dark:bg-slate-950 border-r border-slate-200 dark:border-slate-800 w-64 flex flex-col py-4 space-y-1 shrink-0">
|
||||
<div class="px-6 mb-6">
|
||||
<h2 class="text-teal-800 dark:text-teal-100 font-black tracking-tighter text-lg">SarangWMS</h2>
|
||||
<p class="text-slate-500 text-xs font-medium uppercase tracking-widest">Operational Hub</p>
|
||||
</div>
|
||||
<nav class="flex-1 px-3 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 transition-all rounded-lg font-['Inter'] text-sm font-medium" href="#">
|
||||
<span class="material-symbols-outlined">dashboard</span> Dashboard
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 transition-all rounded-lg font-['Inter'] text-sm font-medium" href="#">
|
||||
<span class="material-symbols-outlined">database</span> Master Data
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 transition-all rounded-lg font-['Inter'] text-sm font-medium" href="#">
|
||||
<span class="material-symbols-outlined">inventory_2</span> Inventory Logs
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 bg-teal-50 text-teal-800 border-r-4 border-teal-600 transition-all font-['Inter'] text-sm font-medium" href="#">
|
||||
<span class="material-symbols-outlined">edit_note</span> Stock Adjust
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 transition-all rounded-lg font-['Inter'] text-sm font-medium" href="#">
|
||||
<span class="material-symbols-outlined">swap_horiz</span> Transfers
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 transition-all rounded-lg font-['Inter'] text-sm font-medium" href="#">
|
||||
<span class="material-symbols-outlined">verified</span> QC Reports
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-3 pt-4 border-t border-slate-200 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 rounded-lg font-['Inter'] text-sm font-medium" href="#">
|
||||
<span class="material-symbols-outlined">support_agent</span> Support
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 rounded-lg font-['Inter'] text-sm font-medium" href="#">
|
||||
<span class="material-symbols-outlined">logout</span> Logout
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 p-container-margin max-w-5xl mx-auto w-full">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 class="font-h1 text-h1 text-on-surface">Penyesuaian Stok (Adjustment)</h1>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">Lakukan pembaruan kuantitas lot untuk keperluan audit atau koreksi operasional.</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 px-3 py-1 bg-surface-container-high rounded text-on-surface-variant">
|
||||
<span class="material-symbols-outlined text-sm">schedule</span>
|
||||
<span class="font-label-caps text-label-caps">TERAKHIR DIUPDATE: 12 OKT 2023 14:20</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- Form Section -->
|
||||
<div class="lg:col-span-2 space-y-6">
|
||||
<!-- Step 1: Lot Selection -->
|
||||
<section class="bg-surface-container-lowest border border-outline-variant p-6 rounded-lg shadow-sm">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<div class="bg-primary text-on-primary w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold">1</div>
|
||||
<h2 class="font-h2 text-h2 text-on-surface">Pilih Lot</h2>
|
||||
</div>
|
||||
<div class="relative group">
|
||||
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<span class="material-symbols-outlined text-outline text-lg">qr_code_scanner</span>
|
||||
</div>
|
||||
<input class="block w-full pl-10 pr-3 py-compact-padding bg-surface-container-low border border-outline rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all font-body-base text-body-base" placeholder="Scan QR Code atau Ketik Nomor Lot (e.g. SN-B102-X)" type="text"/>
|
||||
<button class="absolute inset-y-0 right-0 px-4 text-primary font-bold text-xs uppercase tracking-wider hover:bg-primary-fixed-dim rounded-r-lg transition-colors">Cari</button>
|
||||
</div>
|
||||
<!-- Current Lot Info (Visible after selection) -->
|
||||
<div class="mt-6 p-4 bg-surface-container-low rounded border border-outline-variant grid grid-cols-3 gap-4">
|
||||
<div>
|
||||
<span class="font-label-caps text-label-caps text-on-surface-variant block mb-1">GRADE</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-secondary"></span>
|
||||
<span class="font-table-data text-table-data text-on-surface">AAA Super White</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-label-caps text-label-caps text-on-surface-variant block mb-1">QTY SAAT INI</span>
|
||||
<span class="font-display-lot text-h1 text-primary">45.20 <span class="text-xs font-normal text-on-surface-variant">kg</span></span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-label-caps text-label-caps text-on-surface-variant block mb-1">LOKASI</span>
|
||||
<div class="flex items-center gap-1 text-on-surface">
|
||||
<span class="material-symbols-outlined text-sm">location_on</span>
|
||||
<span class="font-table-data text-table-data">Rak B-04-A</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Step 2: Adjustment Details -->
|
||||
<section class="bg-surface-container-lowest border border-outline-variant p-6 rounded-lg shadow-sm">
|
||||
<div class="flex items-center gap-2 mb-6">
|
||||
<div class="bg-primary text-on-primary w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold">2</div>
|
||||
<h2 class="font-h2 text-h2 text-on-surface">Detail Adjustment</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-6">
|
||||
<div class="col-span-2 sm:col-span-1">
|
||||
<label class="font-label-caps text-label-caps text-on-surface-variant block mb-2">TIPE ADJUSTMENT</label>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<label class="cursor-pointer">
|
||||
<input checked="" class="peer hidden" name="adj_type" type="radio"/>
|
||||
<div class="flex flex-col items-center justify-center p-3 border border-outline-variant rounded-lg peer-checked:bg-primary-container peer-checked:border-primary-container peer-checked:text-on-primary-container transition-all">
|
||||
<span class="material-symbols-outlined mb-1">add_circle</span>
|
||||
<span class="text-[10px] font-bold uppercase">Tambah</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="cursor-pointer">
|
||||
<input class="peer hidden" name="adj_type" type="radio"/>
|
||||
<div class="flex flex-col items-center justify-center p-3 border border-outline-variant rounded-lg peer-checked:bg-error-container peer-checked:border-error-container peer-checked:text-on-error-container transition-all">
|
||||
<span class="material-symbols-outlined mb-1">do_not_disturb_on</span>
|
||||
<span class="text-[10px] font-bold uppercase">Kurang</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="cursor-pointer">
|
||||
<input class="peer hidden" name="adj_type" type="radio"/>
|
||||
<div class="flex flex-col items-center justify-center p-3 border border-outline-variant rounded-lg peer-checked:bg-secondary-container peer-checked:border-secondary-container peer-checked:text-on-secondary-container transition-all">
|
||||
<span class="material-symbols-outlined mb-1">trending_down</span>
|
||||
<span class="text-[10px] font-bold uppercase">Susut</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2 sm:col-span-1">
|
||||
<label class="font-label-caps text-label-caps text-on-surface-variant block mb-2">ALASAN ADJUSTMENT</label>
|
||||
<select class="block w-full px-3 py-compact-padding bg-white border border-outline rounded focus:ring-2 focus:ring-primary focus:border-primary font-body-base text-body-base h-[48px]">
|
||||
<option>Pilih Alasan...</option>
|
||||
<option>Koreksi Data Audit</option>
|
||||
<option>Penyusutan Alami (Moisture)</option>
|
||||
<option>Kerusakan Fisik</option>
|
||||
<option>Sampling QC</option>
|
||||
<option>Lainnya</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-span-2 sm:col-span-1">
|
||||
<label class="font-label-caps text-label-caps text-on-surface-variant block mb-2">QTY ADJUSTMENT (KG)</label>
|
||||
<div class="relative">
|
||||
<input class="block w-full px-3 py-3 bg-white border border-outline rounded-lg focus:ring-2 focus:ring-primary focus:border-primary font-display-lot text-h1" placeholder="0.00" step="0.01" type="number"/>
|
||||
<div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none text-outline">kg</div>
|
||||
</div>
|
||||
<p class="text-[10px] text-on-surface-variant mt-2 italic">Gunakan titik (.) untuk desimal</p>
|
||||
</div>
|
||||
<div class="col-span-2 sm:col-span-1">
|
||||
<label class="font-label-caps text-label-caps text-on-surface-variant block mb-2">PREDIKSI QTY BARU</label>
|
||||
<div class="bg-surface-container p-3 rounded-lg border border-dashed border-outline-variant flex items-center justify-between">
|
||||
<span class="text-on-surface-variant font-body-sm">Total Akhir:</span>
|
||||
<span class="font-display-lot text-h1 text-secondary">45.20 <span class="text-xs font-normal">kg</span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<label class="font-label-caps text-label-caps text-on-surface-variant block mb-2">CATATAN AUDIT / REFERENSI</label>
|
||||
<textarea class="block w-full px-3 py-2 bg-white border border-outline rounded-lg focus:ring-2 focus:ring-primary focus:border-primary font-body-base text-body-base" placeholder="Masukkan detail tambahan atau nomor surat jalan jika ada..." rows="3"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Summary & Info Sidebar -->
|
||||
<div class="space-y-6">
|
||||
<!-- Progress Card -->
|
||||
<div class="bg-primary text-on-primary p-6 rounded-lg shadow-md relative overflow-hidden">
|
||||
<div class="relative z-10">
|
||||
<h3 class="font-h2 text-h2 mb-4">Ringkasan Lot</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center border-b border-primary-container pb-2">
|
||||
<span class="text-[11px] opacity-70">STATUS LOT</span>
|
||||
<span class="bg-primary-container text-on-primary-container px-2 py-0.5 rounded text-[10px] font-bold uppercase">Ready to Export</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center border-b border-primary-container pb-2">
|
||||
<span class="text-[11px] opacity-70">TGL MASUK</span>
|
||||
<span class="font-table-data text-table-data text-[13px]">10 Sep 2023</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-[11px] opacity-70">ORIGIN</span>
|
||||
<span class="font-table-data text-table-data text-[13px]">Kalimantan Barat</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined absolute -bottom-4 -right-4 text-9xl opacity-10 rotate-12">inventory</span>
|
||||
</div>
|
||||
<!-- Helpful Guidelines -->
|
||||
<div class="bg-surface-container-high p-5 rounded-lg border border-outline-variant">
|
||||
<div class="flex items-center gap-2 mb-3 text-secondary">
|
||||
<span class="material-symbols-outlined text-lg">info</span>
|
||||
<h4 class="font-h2 text-h2 text-sm">Panduan Operasional</h4>
|
||||
</div>
|
||||
<ul class="space-y-3 font-body-sm text-body-sm text-on-surface-variant">
|
||||
<li class="flex gap-2">
|
||||
<span class="text-primary font-bold">•</span>
|
||||
<span>Pastikan timbangan telah dikalibrasi sebelum input qty baru.</span>
|
||||
</li>
|
||||
<li class="flex gap-2">
|
||||
<span class="text-primary font-bold">•</span>
|
||||
<span>Setiap adjustment di atas 5kg memerlukan approval Manager.</span>
|
||||
</li>
|
||||
<li class="flex gap-2">
|
||||
<span class="text-primary font-bold">•</span>
|
||||
<span>Alasan 'Penyusutan' akan otomatis tercatat dalam laporan Waste bulanan.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Action Area -->
|
||||
<div class="bg-white p-4 rounded-lg border border-primary border-opacity-20 shadow-sm flex flex-col gap-3">
|
||||
<button class="w-full bg-primary text-white py-3 rounded-lg font-bold text-sm hover:opacity-90 transition-opacity flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined text-lg">check_circle</span>
|
||||
SIMPAN PENYESUAIAN
|
||||
</button>
|
||||
<button class="w-full bg-transparent border border-outline text-on-surface-variant py-3 rounded-lg font-bold text-sm hover:bg-slate-50 transition-colors">
|
||||
BATALKAN
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Audit History Snippet -->
|
||||
<div class="mt-10">
|
||||
<div class="flex items-center justify-between mb-4 border-b border-outline-variant pb-2">
|
||||
<h3 class="font-h2 text-h2 text-on-surface">Riwayat Adjustment Terakhir</h3>
|
||||
<a class="text-primary font-bold text-[11px] uppercase hover:underline" href="#">Lihat Semua Laporan</a>
|
||||
</div>
|
||||
<div class="overflow-x-auto bg-surface-container-lowest rounded-lg border border-outline-variant">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-surface-container text-on-surface-variant uppercase text-[10px] font-bold tracking-wider">
|
||||
<th class="px-6 py-3 border-b border-outline-variant">WAKTU</th>
|
||||
<th class="px-6 py-3 border-b border-outline-variant">ID LOT</th>
|
||||
<th class="px-6 py-3 border-b border-outline-variant">TIPE</th>
|
||||
<th class="px-6 py-3 border-b border-outline-variant text-right">JUMLAH</th>
|
||||
<th class="px-6 py-3 border-b border-outline-variant">OPERATOR</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-outline-variant font-table-data text-table-data text-on-surface">
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-3">12 Okt, 10:15</td>
|
||||
<td class="px-6 py-3 font-bold">SN-A902</td>
|
||||
<td class="px-6 py-3">
|
||||
<span class="bg-error-container text-on-error-container px-2 py-0.5 rounded-full text-[10px]">Penyusutan</span>
|
||||
</td>
|
||||
<td class="px-6 py-3 text-right text-error font-bold">-0.45 kg</td>
|
||||
<td class="px-6 py-3">Budi Santoso</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-3">11 Okt, 16:40</td>
|
||||
<td class="px-6 py-3 font-bold">SN-C110</td>
|
||||
<td class="px-6 py-3">
|
||||
<span class="bg-primary-container text-on-primary-container px-2 py-0.5 rounded-full text-[10px]">Penambahan</span>
|
||||
</td>
|
||||
<td class="px-6 py-3 text-right text-primary font-bold">+1.20 kg</td>
|
||||
<td class="px-6 py-3">Riana Putri</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 300 KiB |
373
design-assets/stitch_abel_stock/formulir_penjualan/code.html
Normal file
373
design-assets/stitch_abel_stock/formulir_penjualan/code.html
Normal file
@ -0,0 +1,373 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"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 min-h-screen">
|
||||
<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-sm">inventory_2</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-teal-900 font-black text-body-base leading-none">Sarang Ops</h1>
|
||||
<p class="text-[10px] text-slate-500 uppercase tracking-widest mt-1">Processing Plant A</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 px-3 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 transition-all rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">dashboard</span>
|
||||
<span class="font-inter text-[13px] font-medium">Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 transition-all rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">content_cut</span>
|
||||
<span class="font-inter text-[13px] font-medium">Sortasi</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 bg-white text-[#0D5E67] border-r-4 border-[#0D5E67] shadow-sm transition-all rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">sell</span>
|
||||
<span class="font-inter text-[13px] font-medium">Penjualan</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 transition-all rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">assignment_turned_in</span>
|
||||
<span class="font-inter text-[13px] font-medium">Alokasi Lot</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 transition-all rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">inventory</span>
|
||||
<span class="font-inter text-[13px] font-medium">Picking</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 transition-all rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">inventory_2</span>
|
||||
<span class="font-inter text-[13px] font-medium">Inventory</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#0D5E67] hover:bg-slate-100 transition-all rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">monitoring</span>
|
||||
<span class="font-inter text-[13px] font-medium">Analytics</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-3 pt-4 border-t border-slate-200">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#0D5E67] transition-all" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">settings</span>
|
||||
<span class="font-inter text-[13px] font-medium">Settings</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#0D5E67] transition-all" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">contact_support</span>
|
||||
<span class="font-inter text-[13px] font-medium">Support</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<header class="fixed top-0 left-64 right-0 h-14 bg-white border-b border-slate-200 flex justify-between items-center px-6 z-40">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="font-inter text-sm font-semibold text-[#0D5E67]">Form Penjualan Baru</span>
|
||||
<div class="h-4 w-[1px] bg-slate-300"></div>
|
||||
<span class="text-slate-400 font-body-sm italic">Draft #SL-20231105</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-slate-600 cursor-pointer hover:bg-slate-50 p-2 rounded transition-colors">notifications</span>
|
||||
<span class="material-symbols-outlined text-slate-600 cursor-pointer hover:bg-slate-50 p-2 rounded transition-colors">help_outline</span>
|
||||
<div class="w-8 h-8 rounded-full overflow-hidden border border-slate-200">
|
||||
<img alt="User profile" data-alt="professional male corporate executive headshot in business attire with neutral background and soft studio lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzS2dKpWO9dpDoJCYL6E9lkDRztAO0vPsRVKXH_VvEZH5pfUjwGmSevP2kKqCW3IupdvxgWnvoQcrxdEJQaqPSvVfYe5xGXibhfeRaU3VZUHRzt8QmxjA1c3dqqpdf-Fb3ZUwN59zMSK5pzLTaJEj7xfgDzhxu0_CctZ53Y42rkd2eZQEUmOmglVhzUZRYVW9vLBwPqHQyhZgpRrWNx67G-556PphdHCE6OrKBHeu8wp2SxfF3aZYg6cxEPsV-UI6VKz1YfJlcvg"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main class="ml-64 mt-14 p-container-margin">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h2 class="font-h1 text-h1 text-primary">Informasi Penjualan</h2>
|
||||
<p class="font-body-sm text-body-sm text-slate-500">Lengkapi detail pesanan sebelum melakukan alokasi stok.</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="px-4 py-2 border border-primary text-primary rounded-lg font-body-base hover:bg-slate-50 transition-colors">Simpan Draft</button>
|
||||
<button class="px-4 py-2 bg-primary text-white rounded-lg font-body-base shadow-sm flex items-center gap-2 hover:opacity-90 transition-opacity">
|
||||
<span>Lanjut ke Alokasi Lot</span>
|
||||
<span class="material-symbols-outlined text-[18px]">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-12 gap-gutter">
|
||||
<div class="col-span-8 space-y-gutter">
|
||||
<section class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
|
||||
<div class="p-4 border-b border-slate-100 bg-slate-50/50">
|
||||
<h3 class="font-h2 text-h2 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">person</span>
|
||||
Pilih Pelanggan
|
||||
</h3>
|
||||
</div>
|
||||
<div class="p-6 grid grid-cols-2 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-caps text-label-caps text-on-surface-variant uppercase">NAMA PELANGGAN</label>
|
||||
<select class="w-full h-10 border border-slate-200 rounded px-3 font-body-base focus:ring-2 focus:ring-primary focus:border-primary outline-none appearance-none bg-white">
|
||||
<option>PT. Global Export Indo</option>
|
||||
<option>BirdNest Co. Guangzhou</option>
|
||||
<option>Sejahtera Trading Singapore</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label class="font-label-caps text-label-caps text-on-surface-variant uppercase">TANGGAL PENJUALAN</label>
|
||||
<input class="w-full h-10 border border-slate-200 rounded px-3 font-body-base focus:ring-2 focus:ring-primary outline-none" type="date" value="2023-11-25"/>
|
||||
</div>
|
||||
<div class="col-span-2 space-y-2">
|
||||
<label class="font-label-caps text-label-caps text-on-surface-variant uppercase">CATATAN PENJUALAN</label>
|
||||
<textarea class="w-full h-24 border border-slate-200 rounded p-3 font-body-base focus:ring-2 focus:ring-primary outline-none resize-none" placeholder="Masukkan instruksi khusus atau catatan pengiriman..."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
|
||||
<div class="p-4 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center">
|
||||
<h3 class="font-h2 text-h2 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">list_alt</span>
|
||||
Tabel Detail Barang
|
||||
</h3>
|
||||
<button class="text-primary font-body-sm font-semibold flex items-center gap-1 hover:underline">
|
||||
<span class="material-symbols-outlined text-[18px]">add_circle</span>
|
||||
Tambah Item
|
||||
</button>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead class="bg-slate-50 border-b border-slate-200">
|
||||
<tr>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant uppercase">JENIS ITEM</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant uppercase">GRADE</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant uppercase text-right">QTY DIBUTUHKAN</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant uppercase">SATUAN</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant uppercase text-right">HARGA JUAL (IDR)</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant uppercase text-right">SUBTOTAL</th>
|
||||
<th class="px-4 py-3 w-10"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-3">
|
||||
<select class="w-full bg-transparent border-none p-0 font-table-data focus:ring-0">
|
||||
<option>Sarang Putih Mangkok</option>
|
||||
<option>Sarang Sudut</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<select class="w-full bg-transparent border-none p-0 font-table-data focus:ring-0">
|
||||
<option>Grade AAA</option>
|
||||
<option>Grade AA</option>
|
||||
<option>Grade A</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<input class="w-20 text-right bg-transparent border-none p-0 font-table-data focus:ring-0" type="number" value="50.00"/>
|
||||
</td>
|
||||
<td class="px-4 py-3 font-table-data text-slate-500">kg</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<input class="w-28 text-right bg-transparent border-none p-0 font-table-data focus:ring-0" type="text" value="15.500.000"/>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right font-table-data text-primary">775.000.000</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<span class="material-symbols-outlined text-slate-300 hover:text-error cursor-pointer">delete</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-3">
|
||||
<select class="w-full bg-transparent border-none p-0 font-table-data focus:ring-0">
|
||||
<option>Sarang Sudut</option>
|
||||
<option>Sarang Putih Mangkok</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<select class="w-full bg-transparent border-none p-0 font-table-data focus:ring-0">
|
||||
<option>Grade Super</option>
|
||||
<option>Grade A</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<input class="w-20 text-right bg-transparent border-none p-0 font-table-data focus:ring-0" type="number" value="25.00"/>
|
||||
</td>
|
||||
<td class="px-4 py-3 font-table-data text-slate-500">kg</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<input class="w-28 text-right bg-transparent border-none p-0 font-table-data focus:ring-0" type="text" value="12.000.000"/>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right font-table-data text-primary">300.000.000</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<span class="material-symbols-outlined text-slate-300 hover:text-error cursor-pointer">delete</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot class="bg-slate-50/80">
|
||||
<tr>
|
||||
<td class="px-4 py-4 text-right font-h2 text-slate-600" colspan="5">Grand Total</td>
|
||||
<td class="px-4 py-4 text-right font-display-lot text-primary">1.075.000.000</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="col-span-4 space-y-gutter">
|
||||
<section class="bg-primary rounded-xl border border-primary-container shadow-lg text-white overflow-hidden relative">
|
||||
<div class="absolute top-0 right-0 p-4 opacity-10">
|
||||
<span class="material-symbols-outlined text-[80px]">account_balance</span>
|
||||
</div>
|
||||
<div class="p-4 border-b border-white/10">
|
||||
<h3 class="font-h2 text-h2 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined">payments</span>
|
||||
Info Bank Pelanggan
|
||||
</h3>
|
||||
</div>
|
||||
<div class="p-6 space-y-4">
|
||||
<div>
|
||||
<label class="text-[10px] font-bold opacity-60 uppercase tracking-widest">BANK TUJUAN</label>
|
||||
<p class="font-body-base font-semibold">Bank Central Asia (BCA)</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold opacity-60 uppercase tracking-widest">NOMOR REKENING</label>
|
||||
<p class="text-h1 font-display-lot tracking-wide">8830 1928 440</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-[10px] font-bold opacity-60 uppercase tracking-widest">ATAS NAMA</label>
|
||||
<p class="font-body-base">PT GLOBAL EXPORT INDO</p>
|
||||
</div>
|
||||
<div class="pt-4 flex items-center gap-2 text-xs opacity-80">
|
||||
<span class="material-symbols-outlined text-[16px]">verified</span>
|
||||
<span>Verified Payment Channel</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="bg-white rounded-xl border border-slate-200 shadow-sm p-6">
|
||||
<h3 class="font-h2 text-h2 mb-4 flex items-center gap-2 text-on-surface">
|
||||
<span class="material-symbols-outlined text-primary">history</span>
|
||||
Ringkasan Lot
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center text-body-sm">
|
||||
<span class="text-slate-500">Total Berat (Netto)</span>
|
||||
<span class="font-semibold text-on-surface">75.00 kg</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center text-body-sm">
|
||||
<span class="text-slate-500">Estimasi Jumlah Lot</span>
|
||||
<span class="font-semibold text-on-surface">~12 Lots</span>
|
||||
</div>
|
||||
<div class="h-[1px] bg-slate-100"></div>
|
||||
<div class="flex justify-between items-center text-body-sm">
|
||||
<span class="text-slate-500">PPN (11%)</span>
|
||||
<span class="font-semibold text-on-surface">118.250.000</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="font-body-base font-bold text-on-surface">Total Tagihan</span>
|
||||
<span class="font-h2 text-h1 text-[#0D5E67]">1.193.250.000</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div class="bg-secondary-container/30 border border-secondary-container p-4 rounded-xl">
|
||||
<div class="flex gap-3">
|
||||
<span class="material-symbols-outlined text-secondary">info</span>
|
||||
<p class="text-body-sm text-secondary leading-relaxed">
|
||||
Pastikan stok fisik tersedia di warehouse sebelum melanjutkan ke tahap <strong>Alokasi Lot</strong>. Draft ini akan tersimpan secara otomatis.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/formulir_penjualan/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/formulir_penjualan/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
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 |
420
design-assets/stitch_abel_stock/laporan_penelusuran_1/code.html
Normal file
420
design-assets/stitch_abel_stock/laporan_penelusuran_1/code.html
Normal file
@ -0,0 +1,420 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Laporan Penelusuran - Sistem Inventaris Walet</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-primary-container": "#92d5df",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-tint": "#1d6871",
|
||||
"primary": "#00454c",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"on-background": "#191c1d",
|
||||
"tertiary": "#60320f",
|
||||
"surface": "#f8fafa",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-surface": "#191c1d",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"error": "#ba1a1a",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"error-container": "#ffdad6",
|
||||
"on-error": "#ffffff",
|
||||
"surface-variant": "#e1e3e3",
|
||||
"outline": "#6f797a",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"on-secondary-container": "#526478",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"tertiary-container": "#7c4824",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"surface-bright": "#f8fafa",
|
||||
"secondary": "#4e6073",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"primary-container": "#0d5e67",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"surface-dim": "#d8dadb",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"background": "#f8fafa",
|
||||
"surface-container": "#eceeee",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"inverse-surface": "#2e3131"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter": "16px",
|
||||
"row-height-sm": "32px",
|
||||
"row-height-md": "48px",
|
||||
"container-margin": "24px",
|
||||
"compact-padding": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display-lot": ["Inter"],
|
||||
"h2": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"label-caps": ["Inter"],
|
||||
"body-base": ["Inter"],
|
||||
"table-data": ["Inter"],
|
||||
"h1": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"display-lot": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "500"}],
|
||||
"h1": ["20px", {"lineHeight": "28px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
::-webkit-scrollbar { width: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
|
||||
.trace-line { background-image: radial-gradient(#cbd5e1 1px, transparent 1px); background-size: 8px 8px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body-base antialiased">
|
||||
<!-- TopNavBar -->
|
||||
<header class="fixed top-0 left-0 w-full z-40 flex justify-between items-center px-6 h-16 bg-white border-b border-slate-200 shadow-sm">
|
||||
<div class="flex items-center gap-4">
|
||||
<img alt="Logo" class="h-10 w-auto" data-alt="Official logo of Sistem Inventaris Walet featuring a minimalist bird icon in teal colors" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD7e9zkXtnDKN_UYutEd5nXQHLSoXwzKxupORW49B9rs31gq2B93kEXiXEzyPhNfAtOgOYx2H1f4xyK_y_yBNbs8TQOvBLmrRI1VsS6ZpDt_uUNo8jP6Mt2fr2sPZOu6PsO9tqhwQ_SbzgI-yBUPh1i-gi7b3tYyxs49LfLMJbmPxXHI0EfPJeFFfb6Xc7MT23tB5Vl3QkODKsDUYPstNY8JP3Mk0H-r8FSz1rn46hfzPT4kCC1LoBgqtRvufB56_0MUZG-CcCE0w"/>
|
||||
<span class="text-xl font-bold text-teal-700 font-inter">Sistem Inventaris Walet</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="relative hidden md:block">
|
||||
<input class="pl-10 pr-4 py-2 border border-outline-variant rounded-lg text-body-sm focus:ring-2 focus:ring-primary-container outline-none w-64 bg-surface-container-lowest" placeholder="Cari Lot ID..." type="text"/>
|
||||
<span class="material-symbols-outlined absolute left-3 top-2.5 text-slate-400">search</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 hover:bg-slate-50 rounded-full transition-colors relative">
|
||||
<span class="material-symbols-outlined text-slate-600">notifications</span>
|
||||
<span class="absolute top-2 right-2 w-2 h-2 bg-error rounded-full"></span>
|
||||
</button>
|
||||
<button class="p-2 hover:bg-slate-50 rounded-full transition-colors">
|
||||
<span class="material-symbols-outlined text-slate-600">help_outline</span>
|
||||
</button>
|
||||
<button class="flex items-center gap-2 bg-primary text-on-primary px-4 py-2 rounded-lg font-h2 active:opacity-80 transition-all">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">qr_code_scanner</span>
|
||||
<span>Scan Barcode</span>
|
||||
</button>
|
||||
<img alt="Profil Pengguna" class="w-10 h-10 rounded-full border border-slate-200" data-alt="Close up professional portrait of a warehouse manager in a clean white uniform" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCAY6P18auIsPE9Jy0cxz2Ufiu06_5HcFhvb_BvOfdNBpu8HjX3nlXuW3UbS58-jV-3ZMbZHyEEccyX7riV5zkXBfV6tO2RrCSSKvZv8_iU-_perAI0eBzXcsA0EK099Si3yH4NgZs46aUOE9dh9WrQYO-lvJlor0LS5YhNBq95e5M2l2Bk-C8YjhS6s191h-OQ1jGUgEqvvzZEgOj53QVCVuGd9jvAexfCeNyxDlYq35dL9m24o-qq-fwMKQ7tAhOkIwOKEoDKLA"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- SideNavBar -->
|
||||
<aside class="fixed left-0 top-0 h-full w-64 flex flex-col py-6 bg-slate-50 border-r border-slate-200 z-30 pt-20">
|
||||
<div class="px-6 mb-8">
|
||||
<h2 class="text-lg font-black text-teal-800 font-inter">Inventory Walet</h2>
|
||||
<p class="text-[10px] font-medium uppercase tracking-widest text-slate-500">Sistem Traceability</p>
|
||||
</div>
|
||||
<nav class="flex-1 px-4 space-y-1">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-all duration-200 rounded-r-lg" href="#">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span class="font-label-caps uppercase">Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-all duration-200 rounded-r-lg" href="#">
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
<span class="font-label-caps uppercase">Laporan Stok</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-all duration-200 rounded-r-lg" href="#">
|
||||
<span class="material-symbols-outlined">database</span>
|
||||
<span class="font-label-caps uppercase">Data Master</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 bg-teal-50 text-teal-700 rounded-r-lg border-l-4 border-teal-700 font-bold" href="#">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">qr_code_scanner</span>
|
||||
<span class="font-label-caps uppercase">Pelacakan</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-all duration-200 rounded-r-lg" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="font-label-caps uppercase">Pengaturan</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-4 mt-auto space-y-1">
|
||||
<button class="w-full mb-4 bg-teal-700 text-white py-3 rounded-lg font-h2 hover:bg-teal-800 transition-colors">
|
||||
Tambah Lot Baru
|
||||
</button>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
<span class="font-label-caps uppercase">Bantuan</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-error hover:bg-red-50 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">logout</span>
|
||||
<span class="font-label-caps uppercase">Log Keluar</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content -->
|
||||
<main class="ml-64 pt-20 p-container-margin">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<!-- Header Section -->
|
||||
<div class="flex justify-between items-end mb-8">
|
||||
<div>
|
||||
<h1 class="font-h1 text-on-surface mb-1">Laporan Penelusuran (Traceability)</h1>
|
||||
<p class="text-body-sm text-on-surface-variant">Lacak riwayat material dari asal pemasok hingga tujuan pengiriman.</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="flex items-center gap-2 border border-outline px-4 py-2 rounded-lg font-h2 text-primary hover:bg-primary-fixed-dim transition-colors">
|
||||
<span class="material-symbols-outlined">download</span>
|
||||
Ekspor PDF
|
||||
</button>
|
||||
<button class="flex items-center gap-2 border border-outline px-4 py-2 rounded-lg font-h2 text-primary hover:bg-primary-fixed-dim transition-colors">
|
||||
<span class="material-symbols-outlined">share</span>
|
||||
Bagikan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Search & Quick Filters -->
|
||||
<div class="grid grid-cols-12 gap-gutter mb-8">
|
||||
<div class="col-span-12 lg:col-span-8 bg-white p-4 rounded-xl shadow-sm border border-outline-variant flex gap-4">
|
||||
<div class="flex-1 relative">
|
||||
<label class="block text-label-caps text-slate-500 mb-1">LOT ID / KODE PRODUKSI</label>
|
||||
<input class="w-full border-none bg-surface-container px-4 py-3 rounded text-display-lot font-display-lot focus:ring-2 focus:ring-teal-700 outline-none" type="text" value="LOT-2023-WB0042"/>
|
||||
<button class="absolute right-3 top-[34px] text-teal-700 hover:text-teal-900">
|
||||
<span class="material-symbols-outlined">search</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="w-px bg-slate-200"></div>
|
||||
<div class="flex flex-col justify-center">
|
||||
<label class="block text-label-caps text-slate-500 mb-1">STATUS SAAT INI</label>
|
||||
<span class="inline-flex items-center gap-1.5 bg-green-100 text-green-800 px-3 py-1 rounded-full text-table-data">
|
||||
<span class="w-2 h-2 bg-green-600 rounded-full"></span>
|
||||
Export Ready
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-12 lg:col-span-4 bg-primary-container text-white p-4 rounded-xl shadow-sm border border-teal-800 flex items-center justify-between">
|
||||
<div>
|
||||
<p class="text-label-caps opacity-80">TOTAL BERAT BERSIH</p>
|
||||
<h2 class="text-3xl font-black">24.50 <span class="text-sm font-normal">kg</span></h2>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-label-caps opacity-80">KADAR AIR</p>
|
||||
<h2 class="text-3xl font-black">8.2 <span class="text-sm font-normal">%</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Traceability Diagram -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-outline-variant p-6 mb-8 overflow-hidden relative">
|
||||
<div class="flex items-center gap-2 mb-8">
|
||||
<span class="material-symbols-outlined text-teal-700">account_tree</span>
|
||||
<h2 class="font-h1 text-slate-800">Diagram Alur Penelusuran</h2>
|
||||
</div>
|
||||
<div class="relative flex justify-between items-start pt-8 pb-12 overflow-x-auto min-w-[800px]">
|
||||
<!-- Horizontal Line -->
|
||||
<div class="absolute top-1/2 left-0 w-full h-[2px] bg-slate-200 -translate-y-12 z-0"></div>
|
||||
<!-- Supplier Node -->
|
||||
<div class="relative z-10 flex flex-col items-center w-1/4">
|
||||
<div class="w-12 h-12 bg-white border-2 border-teal-600 rounded-full flex items-center justify-center mb-4 shadow-md">
|
||||
<span class="material-symbols-outlined text-teal-600">agriculture</span>
|
||||
</div>
|
||||
<div class="bg-white p-3 rounded-lg border border-slate-200 shadow-sm w-48 text-center">
|
||||
<p class="text-label-caps text-teal-700 mb-1">SUMBER ASAL</p>
|
||||
<p class="font-bold text-slate-800">PT. Walet Sejahtera</p>
|
||||
<p class="text-body-sm text-slate-500">Kab. Kotawaringin</p>
|
||||
<div class="mt-2 text-[10px] bg-slate-100 py-1 rounded">ID: SUP-KAL-01</div>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<p class="text-body-sm font-bold text-slate-400 italic">Diterima: 12 Okt 2023</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Warehouse Node -->
|
||||
<div class="relative z-10 flex flex-col items-center w-1/4">
|
||||
<div class="w-12 h-12 bg-white border-2 border-teal-600 rounded-full flex items-center justify-center mb-4 shadow-md">
|
||||
<span class="material-symbols-outlined text-teal-600">warehouse</span>
|
||||
</div>
|
||||
<div class="bg-white p-3 rounded-lg border border-teal-600 shadow-md ring-2 ring-teal-100 w-48 text-center scale-110">
|
||||
<p class="text-label-caps text-teal-700 mb-1">PROSES BERJALAN</p>
|
||||
<p class="font-bold text-slate-800">Gudang Utama (Pusat)</p>
|
||||
<p class="text-body-sm text-slate-500">Sortir & Grading</p>
|
||||
<div class="mt-2 text-[10px] bg-teal-600 text-white py-1 rounded">LOT: 2023-WB0042</div>
|
||||
</div>
|
||||
<div class="mt-6 text-center">
|
||||
<p class="text-body-sm font-bold text-slate-400 italic">Diproses: 14 Okt 2023</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- QC Node -->
|
||||
<div class="relative z-10 flex flex-col items-center w-1/4">
|
||||
<div class="w-12 h-12 bg-white border-2 border-teal-600 rounded-full flex items-center justify-center mb-4 shadow-md">
|
||||
<span class="material-symbols-outlined text-teal-600">verified_user</span>
|
||||
</div>
|
||||
<div class="bg-white p-3 rounded-lg border border-slate-200 shadow-sm w-48 text-center">
|
||||
<p class="text-label-caps text-teal-700 mb-1">PENGECEKAN MUTU</p>
|
||||
<p class="font-bold text-slate-800">Grade AAA - Putih</p>
|
||||
<p class="text-body-sm text-slate-500">Lolos Uji Lab</p>
|
||||
<div class="mt-2 text-[10px] bg-green-100 text-green-800 py-1 rounded">Sertifikat: QC-8821</div>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<p class="text-body-sm font-bold text-slate-400 italic">Disetujui: 16 Okt 2023</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Customer Node -->
|
||||
<div class="relative z-10 flex flex-col items-center w-1/4">
|
||||
<div class="w-12 h-12 bg-slate-100 border-2 border-dashed border-slate-400 rounded-full flex items-center justify-center mb-4">
|
||||
<span class="material-symbols-outlined text-slate-400">local_shipping</span>
|
||||
</div>
|
||||
<div class="bg-slate-50 p-3 rounded-lg border border-dashed border-slate-300 w-48 text-center">
|
||||
<p class="text-label-caps text-slate-400 mb-1">TUJUAN EKSPOR</p>
|
||||
<p class="font-bold text-slate-400">Global Trade Corp</p>
|
||||
<p class="text-body-sm text-slate-400">Hong Kong SAR</p>
|
||||
<div class="mt-2 text-[10px] bg-slate-200 text-slate-500 py-1 rounded">Rencana: 25 Okt 2023</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Detailed History & Specs -->
|
||||
<div class="grid grid-cols-12 gap-gutter">
|
||||
<!-- Log Pergerakan -->
|
||||
<div class="col-span-12 lg:col-span-7 bg-white rounded-xl shadow-sm border border-outline-variant overflow-hidden">
|
||||
<div class="p-4 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
|
||||
<h3 class="font-h2 text-slate-800">Log Aktivitas Detail</h3>
|
||||
<span class="text-body-sm text-slate-500">4 Riwayat Ditemukan</span>
|
||||
</div>
|
||||
<div class="divide-y divide-slate-100">
|
||||
<div class="p-4 hover:bg-slate-50 transition-colors flex gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-50 text-blue-600 flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined text-sm">edit_document</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h4 class="font-bold text-slate-800">Dokumen Ekspor Disiapkan</h4>
|
||||
<span class="text-[11px] text-slate-400">Hari ini, 09:12</span>
|
||||
</div>
|
||||
<p class="text-body-sm text-slate-600">Penerbitan Phytosanitary Certificate dan Packing List untuk Lot 2023-WB0042.</p>
|
||||
<p class="text-[11px] text-slate-400 mt-1 uppercase tracking-tighter">Oleh: Budi Santoso (Admin)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 hover:bg-slate-50 transition-colors flex gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-green-50 text-green-600 flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined text-sm">fact_check</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h4 class="font-bold text-slate-800">Lolos Quality Control</h4>
|
||||
<span class="text-[11px] text-slate-400">16 Okt 2023, 14:30</span>
|
||||
</div>
|
||||
<p class="text-body-sm text-slate-600">Hasil uji nitrit < 30ppm. Warna putih alami, tekstur mangkok sempurna.</p>
|
||||
<p class="text-[11px] text-slate-400 mt-1 uppercase tracking-tighter">Oleh: Dr. Siti Aminah (Lab)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 hover:bg-slate-50 transition-colors flex gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-teal-50 text-teal-600 flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined text-sm">cleaning_services</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h4 class="font-bold text-slate-800">Tahap Pencucian & Pembersihan</h4>
|
||||
<span class="text-[11px] text-slate-400">14 Okt 2023, 08:00</span>
|
||||
</div>
|
||||
<p class="text-body-sm text-slate-600">Pencucian manual menggunakan air RO. Pengeringan pada suhu 40°C.</p>
|
||||
<p class="text-[11px] text-slate-400 mt-1 uppercase tracking-tighter">Oleh: Tim Produksi A</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 hover:bg-slate-50 transition-colors flex gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-orange-50 text-orange-600 flex items-center justify-center shrink-0">
|
||||
<span class="material-symbols-outlined text-sm">download_done</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex justify-between items-start">
|
||||
<h4 class="font-bold text-slate-800">Penerimaan Bahan Baku</h4>
|
||||
<span class="text-[11px] text-slate-400">12 Okt 2023, 11:20</span>
|
||||
</div>
|
||||
<p class="text-body-sm text-slate-600">Diterima dari PT Walet Sejahtera. Berat kotor: 26.12 kg.</p>
|
||||
<p class="text-[11px] text-slate-400 mt-1 uppercase tracking-tighter">Oleh: Ahmad Fauzi (Logistik)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Informasi Spesifikasi Card -->
|
||||
<div class="col-span-12 lg:col-span-5 space-y-gutter">
|
||||
<div class="bg-white rounded-xl shadow-sm border border-outline-variant p-6">
|
||||
<h3 class="font-h2 text-slate-800 mb-4 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">info</span>
|
||||
Spesifikasi Teknis Lot
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center pb-2 border-b border-slate-50">
|
||||
<span class="text-body-sm text-slate-500">Grade Produk</span>
|
||||
<span class="font-bold text-slate-800">Super AAA - Mangkok</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center pb-2 border-b border-slate-50">
|
||||
<span class="text-body-sm text-slate-500">Metode Pengeringan</span>
|
||||
<span class="font-bold text-slate-800">Heat-Pump Dryers</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center pb-2 border-b border-slate-50">
|
||||
<span class="text-body-sm text-slate-500">Kandungan Nitrit</span>
|
||||
<span class="font-bold text-green-600">22 ppm (Aman)</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center pb-2 border-b border-slate-50">
|
||||
<span class="text-body-sm text-slate-500">Lokasi Penyimpanan</span>
|
||||
<span class="font-bold text-slate-800">Cold Storage - Ruang 02</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-body-sm text-slate-500">ID Sertifikasi</span>
|
||||
<span class="font-bold text-slate-800">GACC-ID-2023-01</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Photo Documentation -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-outline-variant p-6">
|
||||
<h3 class="font-h2 text-slate-800 mb-4 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">image</span>
|
||||
Dokumentasi Visual
|
||||
</h3>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div class="aspect-square bg-slate-100 rounded-lg overflow-hidden relative group">
|
||||
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300" data-alt="High quality close up of raw edible bird's nest in a wooden crate with sharp details and natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCubNVztzYK7_tACXNrRCF5KdeY5Vx5bdijUUhEk7B6CVxcBLVbnM-dhMjxNpleb5nUXX_N79zm2J5ZeIscxEiC3irKmxavNlJC-j_Mdv545NyEt3HPoKkg9o_WvMZw5us4MgK6DWxIBLPEpj8HgxX5LPM27WlgGttUvuphrTXwWIsITDsUn3ZRfIwH9OzFxoOp9fvdx3wpXaUJUhaspE4c-08UmnJoi5LFjq41B94G3WCiDtjnk5g9J5cMkFsMFBBFq-OfcdeeCQ"/>
|
||||
<div class="absolute bottom-0 left-0 w-full p-2 bg-gradient-to-t from-black/60 to-transparent">
|
||||
<p class="text-[10px] text-white">Bahan Baku</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aspect-square bg-slate-100 rounded-lg overflow-hidden relative group">
|
||||
<img class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300" data-alt="Bird nest cups being processed in a clean, clinical laboratory environment with sterile equipment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCRGHYbwk2awqUrOjo9522Yy4wD9trXbSaQIGZJ8L0Y6U-DB3aEG-fYFXR4rf3s_01GiKC68hyJ5UtlAxHIoj6K7-QhnLoZafp4aiV5tqSqbFE_41DQI4-da616DCWOv_HM63WWfV_6KWKR3yqswECZ_jmWkOTIHJR7EoPIv383z7_x_0aPM15MROhUfZ8ZErRBgyJSMz3YokEd1TDstw8oMATjwJb3-EELOCU1zqZsZMMi_Ehhftud4dFs3fNFGGcgjLkN52K23A"/>
|
||||
<div class="absolute bottom-0 left-0 w-full p-2 bg-gradient-to-t from-black/60 to-transparent">
|
||||
<p class="text-[10px] text-white">Proses QC</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- FAB for quick actions (only on relevant top-level) -->
|
||||
<button class="fixed bottom-8 right-8 w-14 h-14 bg-teal-700 text-white rounded-full shadow-lg flex items-center justify-center hover:bg-teal-800 active:scale-95 transition-all z-50">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'opsz' 40;">add</span>
|
||||
</button>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/laporan_penelusuran_1/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/laporan_penelusuran_1/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 513 KiB |
452
design-assets/stitch_abel_stock/laporan_penelusuran_2/code.html
Normal file
452
design-assets/stitch_abel_stock/laporan_penelusuran_2/code.html
Normal file
@ -0,0 +1,452 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"secondary": "#4e6073",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"outline": "#6f797a",
|
||||
"background": "#f8fafa",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"error-container": "#ffdad6",
|
||||
"tertiary": "#60320f",
|
||||
"on-secondary-container": "#526478",
|
||||
"surface-container": "#eceeee",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"on-error-container": "#93000a",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"surface-tint": "#1d6871",
|
||||
"on-primary-container": "#92d5df",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"inverse-surface": "#2e3131",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"on-surface": "#191c1d",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"surface": "#f8fafa",
|
||||
"primary-container": "#0d5e67",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"error": "#ba1a1a",
|
||||
"surface-bright": "#f8fafa",
|
||||
"primary": "#00454c",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"on-error": "#ffffff",
|
||||
"surface-variant": "#e1e3e3",
|
||||
"on-background": "#191c1d",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-dim": "#d8dadb",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-container": "#7c4824"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"compact-padding": "8px",
|
||||
"row-height-sm": "32px",
|
||||
"row-height-md": "48px",
|
||||
"container-margin": "24px",
|
||||
"gutter": "16px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-base": ["Inter"],
|
||||
"h1": ["Inter"],
|
||||
"display-lot": ["Inter"],
|
||||
"table-data": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"h2": ["Inter"],
|
||||
"label-caps": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"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"}],
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
font-size: 20px;
|
||||
}
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body-base text-on-surface antialiased overflow-hidden">
|
||||
<!-- Sidebar Navigation -->
|
||||
<aside class="fixed left-0 top-0 h-full w-64 border-r border-slate-200 bg-slate-50 flex flex-col h-screen py-4 z-50">
|
||||
<div class="px-6 mb-8">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="h-8 w-8 bg-primary flex items-center justify-center rounded-lg">
|
||||
<span class="material-symbols-outlined text-white" data-icon="bird">flight</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-teal-900 font-black text-sm tracking-tight leading-tight">Walet Operations</h2>
|
||||
<p class="text-[10px] text-slate-500 font-medium">V1.0.4-Operational</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 px-3 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 text-slate-600 hover:bg-slate-100 hover:text-teal-600 duration-150 ease-in-out font-inter text-[13px] font-medium rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 text-slate-600 hover:bg-slate-100 hover:text-teal-600 duration-150 ease-in-out font-inter text-[13px] font-medium rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
|
||||
<span>Inventory Stock</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 bg-teal-50 text-teal-700 border-r-4 border-teal-600 duration-150 ease-in-out font-inter text-[13px] font-semibold rounded-l-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="account_tree">account_tree</span>
|
||||
<span>Traceability Logs</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 text-slate-600 hover:bg-slate-100 hover:text-teal-600 duration-150 ease-in-out font-inter text-[13px] font-medium rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="database">database</span>
|
||||
<span>Master Data</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 text-slate-600 hover:bg-slate-100 hover:text-teal-600 duration-150 ease-in-out font-inter text-[13px] font-medium rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="qr_code_scanner">qr_code_scanner</span>
|
||||
<span>Barcode Scanner</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-3 pt-4 mt-4 border-t border-slate-200">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 text-slate-600 hover:bg-slate-100 duration-150 ease-in-out font-inter text-[13px] font-medium rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
<span>Support</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 text-slate-600 hover:bg-slate-100 duration-150 ease-in-out font-inter text-[13px] font-medium rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="logout">logout</span>
|
||||
<span>Sign Out</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="ml-64 flex-1 flex flex-col h-screen">
|
||||
<!-- Top Navigation Bar -->
|
||||
<header class="bg-white border-b border-slate-200 shadow-sm flex items-center justify-between px-6 h-14 w-full z-40 sticky top-0">
|
||||
<div class="flex items-center gap-4">
|
||||
<h1 class="font-inter text-lg font-bold tracking-tight text-teal-800">SarangTrace ERP</h1>
|
||||
<div class="h-6 w-px bg-slate-200"></div>
|
||||
<div class="flex items-center bg-slate-100 rounded-md px-3 py-1.5 w-64">
|
||||
<span class="material-symbols-outlined text-slate-400 mr-2" data-icon="search">search</span>
|
||||
<input class="bg-transparent border-none text-body-sm focus:ring-0 p-0 w-full placeholder:text-slate-400" placeholder="Cari Lot Code..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="relative p-2 text-slate-500 hover:bg-slate-50 transition-colors rounded-full active:opacity-80">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
<span class="absolute top-1.5 right-1.5 w-2 h-2 bg-error rounded-full border-2 border-white"></span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-50 transition-colors rounded-full active:opacity-80">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
</button>
|
||||
<div class="h-8 w-8 rounded-full overflow-hidden border border-slate-200">
|
||||
<img alt="User Profile" class="w-full h-full object-cover" data-alt="professional portrait of a warehouse manager in a bright office setting with corporate attire" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBC4Ua3ZmuYLDZnlhk4RiDUhyjHFQAb84KXK1xMZ3urEylTDVFoGkAOJgv-de-jBgPMEyUH82FUrJXeobkimYYx9G2fFJ6wzG_F1NaUpnFFzHhoR9MPBI0S-g_e_gx6qmmny7mx9w1umGeFKJe-uy_NoOOAL3GYt10FySNtjNWFewWWbXYYBsQJDE-38NmglGc5aRsD0jfuL1rDAyO7oFkAqUe-zBopLf8lDKA0_HcmWE1z_WRBmi9CE2xK-sYGnqV-xLTDUAXCPg"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Page Canvas -->
|
||||
<div class="flex-1 overflow-y-auto p-container-margin">
|
||||
<!-- Page Header & Filters -->
|
||||
<div class="flex flex-col gap-6 mb-8">
|
||||
<div class="flex justify-between items-end">
|
||||
<div>
|
||||
<p class="text-label-caps text-secondary uppercase font-bold tracking-wider mb-1">AUDIT & TRACEABILITY</p>
|
||||
<h2 class="font-h1 text-h1 text-on-surface">Laporan Penelusuran (Traceability)</h2>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="flex items-center gap-2 px-4 py-2 border border-primary text-primary font-medium text-body-sm rounded-lg hover:bg-primary-fixed/20 transition-all">
|
||||
<span class="material-symbols-outlined" data-icon="download">download</span>
|
||||
Export PDF
|
||||
</button>
|
||||
<button class="flex items-center gap-2 px-4 py-2 bg-primary text-white font-medium text-body-sm rounded-lg hover:opacity-90 active:opacity-80 shadow-sm transition-all">
|
||||
<span class="material-symbols-outlined" data-icon="print">print</span>
|
||||
Cetak Laporan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Filter Panel -->
|
||||
<div class="bg-white border border-slate-200 rounded-xl p-4 shadow-sm grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-label-caps text-slate-500">LOT CODE</label>
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" data-icon="qr_code">qr_code</span>
|
||||
<input class="w-full pl-10 pr-3 py-2 border border-slate-200 rounded-lg text-body-sm focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all" placeholder="Contoh: LOT-W-2023-089" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-label-caps text-slate-500">SUPPLIER / SUMBER</label>
|
||||
<select class="w-full px-3 py-2 border border-slate-200 rounded-lg text-body-sm focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all">
|
||||
<option>Semua Supplier</option>
|
||||
<option>Farm Mandiri - Sukabumi</option>
|
||||
<option>UD. Walet Lestari</option>
|
||||
<option>Peternak Rakyat Jatim</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-label-caps text-slate-500">CUSTOMER</label>
|
||||
<select class="w-full px-3 py-2 border border-slate-200 rounded-lg text-body-sm focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all">
|
||||
<option>Semua Customer</option>
|
||||
<option>Global Bird's Nest Ltd</option>
|
||||
<option>China Export Trading</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-label-caps text-slate-500">RENTANG TANGGAL</label>
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" data-icon="calendar_today">calendar_today</span>
|
||||
<input class="w-full pl-10 pr-3 py-2 border border-slate-200 rounded-lg text-body-sm focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all" placeholder="01 Jan 2024 - 31 Jan 2024" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Traceability Timeline / Bento Grid -->
|
||||
<div class="grid grid-cols-12 gap-gutter">
|
||||
<!-- Summary Card -->
|
||||
<div class="col-span-12 lg:col-span-4 space-y-gutter">
|
||||
<div class="bg-primary-container p-6 rounded-xl border border-primary/20 relative overflow-hidden">
|
||||
<div class="relative z-10">
|
||||
<span class="text-white/80 font-label-caps">STATUS SAAT INI</span>
|
||||
<h3 class="text-display-lot text-white mt-1">LOT-2023-AX78</h3>
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-label-caps">SIAP EKSPOR</span>
|
||||
<span class="text-white/60 text-body-sm">| Update 2 Jam yang lalu</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined absolute -bottom-4 -right-4 text-9xl text-white/10 rotate-12" data-icon="inventory">inventory</span>
|
||||
</div>
|
||||
<div class="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
|
||||
<h3 class="font-h2 text-h2 mb-4">Detail Material</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between pb-2 border-b border-slate-50">
|
||||
<span class="text-body-sm text-slate-500">Jenis</span>
|
||||
<span class="text-body-sm font-bold">Mangkok Putih A</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-2 border-b border-slate-50">
|
||||
<span class="text-body-sm text-slate-500">Total Berat (In)</span>
|
||||
<span class="text-body-sm font-bold">25.40 kg</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-2 border-b border-slate-50">
|
||||
<span class="text-body-sm text-slate-500">Total Berat (Out)</span>
|
||||
<span class="text-body-sm font-bold">22.15 kg</span>
|
||||
</div>
|
||||
<div class="flex justify-between pb-2 border-b border-slate-50">
|
||||
<span class="text-body-sm text-slate-500">Kadar Air</span>
|
||||
<span class="text-body-sm font-bold">11% - 13%</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-body-sm text-slate-500">Efisiensi</span>
|
||||
<span class="text-body-sm font-bold text-teal-600">87.2%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Timeline View -->
|
||||
<div class="col-span-12 lg:col-span-8">
|
||||
<div class="bg-white border border-slate-200 rounded-xl p-6 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<h3 class="font-h2 text-h2">Alur Genealogi Lot</h3>
|
||||
<div class="flex gap-2">
|
||||
<span class="flex items-center gap-1.5 text-label-caps text-slate-500">
|
||||
<span class="w-3 h-3 rounded-full bg-blue-500"></span> Supplier
|
||||
</span>
|
||||
<span class="flex items-center gap-1.5 text-label-caps text-slate-500">
|
||||
<span class="w-3 h-3 rounded-full bg-orange-500"></span> Proses
|
||||
</span>
|
||||
<span class="flex items-center gap-1.5 text-label-caps text-slate-500">
|
||||
<span class="w-3 h-3 rounded-full bg-teal-500"></span> Keluar
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Vertical Timeline -->
|
||||
<div class="relative pl-8 space-y-10 before:content-[''] before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-[2px] before:bg-slate-100">
|
||||
<!-- Node: Lot In -->
|
||||
<div class="relative">
|
||||
<div class="absolute -left-[32px] top-0 w-6 h-6 rounded-full bg-blue-500 border-4 border-white shadow-sm flex items-center justify-center z-10"></div>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-table-data font-bold text-blue-700">LOT IN (Penerimaan Material)</h4>
|
||||
<p class="text-body-sm font-semibold mt-1">Farm Mandiri - Sukabumi</p>
|
||||
<p class="text-[12px] text-slate-500">Lot ID: <span class="font-mono">FMS-23-001</span> • 25.40 kg • Grade Raw</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="text-[11px] font-bold text-slate-400 block">12 OKT 2023</span>
|
||||
<span class="text-[11px] text-slate-400 block">08:45 WIB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Node: Transformation 1 -->
|
||||
<div class="relative">
|
||||
<div class="absolute -left-[32px] top-0 w-6 h-6 rounded-full bg-orange-500 border-4 border-white shadow-sm flex items-center justify-center z-10"></div>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-table-data font-bold text-orange-700">PENCUCIAN & PEMBERSIHAN</h4>
|
||||
<p class="text-body-sm font-semibold mt-1">Workstation A-04 (Anto S.)</p>
|
||||
<p class="text-[12px] text-slate-500">Penyusutan: 1.2 kg • Status: Selesai</p>
|
||||
<!-- Sub-component: Transformation Detail -->
|
||||
<div class="mt-3 bg-slate-50 p-3 rounded border border-slate-100 text-[12px] max-w-md">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="material-symbols-outlined text-[14px] text-slate-400" data-icon="info">info</span>
|
||||
<span class="font-bold text-slate-600">Catatan QC:</span>
|
||||
</div>
|
||||
Tingkat kebersihan optimal, bulu ringan minim. Siap proses grading.
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="text-[11px] font-bold text-slate-400 block">14 OKT 2023</span>
|
||||
<span class="text-[11px] text-slate-400 block">13:20 WIB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Node: Transformation 2 (Regrading) -->
|
||||
<div class="relative">
|
||||
<div class="absolute -left-[32px] top-0 w-6 h-6 rounded-full bg-orange-500 border-4 border-white shadow-sm flex items-center justify-center z-10"></div>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-table-data font-bold text-orange-700">REGRADING (Penyortiran Kualitas)</h4>
|
||||
<p class="text-body-sm font-semibold mt-1">Lab Quality Control</p>
|
||||
<div class="mt-2 flex gap-2">
|
||||
<span class="bg-teal-50 text-teal-700 px-2 py-0.5 rounded text-[10px] font-bold">MANGKOK A: 18kg</span>
|
||||
<span class="bg-amber-50 text-amber-700 px-2 py-0.5 rounded text-[10px] font-bold">SUDUT: 4.15kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="text-[11px] font-bold text-slate-400 block">15 OKT 2023</span>
|
||||
<span class="text-[11px] text-slate-400 block">10:00 WIB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Node: Lot Out -->
|
||||
<div class="relative">
|
||||
<div class="absolute -left-[32px] top-0 w-6 h-6 rounded-full bg-teal-500 border-4 border-white shadow-sm flex items-center justify-center z-10"></div>
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h4 class="text-table-data font-bold text-teal-700">LOT OUT (Pengiriman/Ekspor)</h4>
|
||||
<p class="text-body-sm font-semibold mt-1">Global Bird's Nest Ltd (Hong Kong)</p>
|
||||
<p class="text-[12px] text-slate-500">Invoice: <span class="font-mono">INV/EXP/10/2023-99</span> • Ship via: Air Cargo</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="text-[11px] font-bold text-slate-400 block">20 OKT 2023</span>
|
||||
<span class="text-[11px] text-slate-400 block">15:45 WIB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Detailed Table View -->
|
||||
<div class="mt-gutter">
|
||||
<div class="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm">
|
||||
<div class="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
|
||||
<h3 class="font-h2 text-h2">Daftar Transformasi Detail</h3>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-body-sm text-slate-400">Tampilan Baris:</span>
|
||||
<select class="text-body-sm border-slate-200 rounded p-1">
|
||||
<option>Compact</option>
|
||||
<option>Standard</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left">
|
||||
<thead class="bg-slate-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-label-caps text-slate-500 border-b border-slate-200">ID Aktivitas</th>
|
||||
<th class="px-6 py-3 text-label-caps text-slate-500 border-b border-slate-200">Operator</th>
|
||||
<th class="px-6 py-3 text-label-caps text-slate-500 border-b border-slate-200">Tahapan</th>
|
||||
<th class="px-6 py-3 text-label-caps text-slate-500 border-b border-slate-200">Input (kg)</th>
|
||||
<th class="px-6 py-3 text-label-caps text-slate-500 border-b border-slate-200">Output (kg)</th>
|
||||
<th class="px-6 py-3 text-label-caps text-slate-500 border-b border-slate-200">Loss (%)</th>
|
||||
<th class="px-6 py-3 text-label-caps text-slate-500 border-b border-slate-200">Status QC</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 font-mono text-table-data text-slate-600">ACT-90234</td>
|
||||
<td class="px-6 py-compact-padding text-table-data">Budi Santoso</td>
|
||||
<td class="px-6 py-compact-padding text-table-data">Pembersihan Bulu</td>
|
||||
<td class="px-6 py-compact-padding text-table-data text-right">25.40</td>
|
||||
<td class="px-6 py-compact-padding text-table-data text-right">24.20</td>
|
||||
<td class="px-6 py-compact-padding text-table-data text-right">4.72%</td>
|
||||
<td class="px-6 py-compact-padding">
|
||||
<span class="px-2 py-0.5 rounded-full bg-green-50 text-green-700 text-[11px] font-bold">LULUS</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-compact-padding font-mono text-table-data text-slate-600">ACT-90288</td>
|
||||
<td class="px-6 py-compact-padding text-table-data">Siti Aminah</td>
|
||||
<td class="px-6 py-compact-padding text-table-data">Pengeringan</td>
|
||||
<td class="px-6 py-compact-padding text-table-data text-right">24.20</td>
|
||||
<td class="px-6 py-compact-padding text-table-data text-right">22.85</td>
|
||||
<td class="px-6 py-compact-padding text-table-data text-right">5.58%</td>
|
||||
<td class="px-6 py-compact-padding">
|
||||
<span class="px-2 py-0.5 rounded-full bg-green-50 text-green-700 text-[11px] font-bold">LULUS</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-compact-padding font-mono text-table-data text-slate-600">ACT-90312</td>
|
||||
<td class="px-6 py-compact-padding text-table-data">Rian Pratama</td>
|
||||
<td class="px-6 py-compact-padding text-table-data">Grading Akhir</td>
|
||||
<td class="px-6 py-compact-padding text-table-data text-right">22.85</td>
|
||||
<td class="px-6 py-compact-padding text-table-data text-right">22.15</td>
|
||||
<td class="px-6 py-compact-padding text-table-data text-right">3.06%</td>
|
||||
<td class="px-6 py-compact-padding">
|
||||
<span class="px-2 py-0.5 rounded-full bg-blue-50 text-blue-700 text-[11px] font-bold">DITINJAU</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Floating Tooltip / Alert (Optional Contextual Information) -->
|
||||
<div class="fixed bottom-6 right-6 z-40 bg-white border border-slate-200 rounded-xl shadow-lg p-4 max-w-sm flex gap-4 items-start border-l-4 border-l-teal-600">
|
||||
<div class="p-2 bg-teal-50 rounded-lg text-teal-600">
|
||||
<span class="material-symbols-outlined" data-icon="verified">verified</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-body-sm text-teal-900">Validasi Audit Berhasil</h4>
|
||||
<p class="text-[12px] text-slate-500 leading-normal mt-1">Sertifikasi nomor SNI-8922/WLT-23 telah diverifikasi untuk rantai pasok lot ini.</p>
|
||||
</div>
|
||||
<button class="text-slate-400 hover:text-slate-600">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="close">close</span>
|
||||
</button>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/laporan_penelusuran_2/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/laporan_penelusuran_2/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 316 KiB |
482
design-assets/stitch_abel_stock/laporan_stok_1/code.html
Normal file
482
design-assets/stitch_abel_stock/laporan_stok_1/code.html
Normal file
@ -0,0 +1,482 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-primary-container": "#92d5df",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-tint": "#1d6871",
|
||||
"primary": "#00454c",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"on-background": "#191c1d",
|
||||
"tertiary": "#60320f",
|
||||
"surface": "#f8fafa",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-surface": "#191c1d",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"error": "#ba1a1a",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"error-container": "#ffdad6",
|
||||
"on-error": "#ffffff",
|
||||
"surface-variant": "#e1e3e3",
|
||||
"outline": "#6f797a",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"on-secondary-container": "#526478",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"tertiary-container": "#7c4824",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"surface-bright": "#f8fafa",
|
||||
"secondary": "#4e6073",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"primary-container": "#0d5e67",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"surface-dim": "#d8dadb",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"background": "#f8fafa",
|
||||
"surface-container": "#eceeee",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"inverse-surface": "#2e3131"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter": "16px",
|
||||
"row-height-sm": "32px",
|
||||
"row-height-md": "48px",
|
||||
"container-margin": "24px",
|
||||
"compact-padding": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display-lot": ["Inter"],
|
||||
"h2": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"label-caps": ["Inter"],
|
||||
"body-base": ["Inter"],
|
||||
"table-data": ["Inter"],
|
||||
"h1": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"display-lot": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "500"}],
|
||||
"h1": ["20px", {"lineHeight": "28px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface font-body-base">
|
||||
<!-- TopNavBar Shell -->
|
||||
<header class="fixed top-0 left-0 w-full z-40 flex justify-between items-center px-6 h-16 bg-white border-b border-slate-200 shadow-sm font-inter text-sm antialiased">
|
||||
<div class="flex items-center gap-4">
|
||||
<img alt="Logo Perusahaan Walet" class="h-8 w-auto" data-alt="minimalist professional logo of a bird's nest company with abstract bird wings and teal color palette" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAB8QDnSGyROfSVUaI5vXszOWT_OlKqsx41QffWX1c75sv4VfD3-oFqRrA6z7APkD5VxG6SLKQlU0C4b65zaFszfYNzg3od0Wd13LpdpAbQREyHnIJXdsY9di9_Nl96Ngjh9JGtYIONo7IYCCPbBFKb1Ajn2L3mL3kmrHlGtM9rMD0v-sOFtKH45VFoek5dLQOg8ZlubavWEZ6dmDQrNb3qAWY-MMb31nWrM_eSNYmupe51IUHEl_4rsHEx4Vg57QIc4ZN0g0t6jA"/>
|
||||
<span class="text-xl font-bold text-teal-700">Sistem Inventaris Walet</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="relative hidden lg:block">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">search</span>
|
||||
<input class="pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded text-sm focus:ring-2 focus:ring-primary focus:border-transparent outline-none w-64" placeholder="Cari lot atau laporan..." type="text"/>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-50 transition-colors rounded">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-50 transition-colors rounded">
|
||||
<span class="material-symbols-outlined">help_outline</span>
|
||||
</button>
|
||||
<div class="h-8 w-[1px] bg-slate-200 mx-2"></div>
|
||||
<button class="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded font-medium hover:opacity-90 active:scale-95 transition-all">
|
||||
<span class="material-symbols-outlined text-sm">qr_code_scanner</span>
|
||||
<span>Scan Barcode</span>
|
||||
</button>
|
||||
<div class="ml-4 h-8 w-8 rounded-full bg-slate-200 flex items-center justify-center border border-slate-300 overflow-hidden">
|
||||
<img alt="Profil Pengguna" data-alt="professional portrait of a warehouse manager in business casual attire" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC5c_VDQtpbOxidxQ2Q0qdK-Vy10YGZvLhjouM5Qz3R59gCpRch5paNgwUUP6_wpiyfu8rz3Ucvx2IcVlqlMgGqqzzbaeOOaN-2jsbA224_4VZUxqReoL8bxp0HpjVRMs20dSAuXzTBa2U8Q8J2DKZnpsGzfud_8B4bsTICKf9uD6e85FpGGxLAcWMn319R-gBBPrBw18GWeezFJ3gM4EfeFLKs3fxqMXwPc6_zKlQA13ISrdlWvKu_D77-tOu3scXxJg42jN5ATw"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- SideNavBar Shell -->
|
||||
<nav class="fixed left-0 top-0 h-full w-64 flex flex-col py-6 bg-slate-50 border-r border-slate-200 z-30 pt-20">
|
||||
<div class="px-6 mb-8">
|
||||
<h2 class="text-lg font-black text-teal-800">Inventory Walet</h2>
|
||||
<p class="text-[10px] uppercase tracking-widest text-slate-400 font-bold">Sistem Traceability</p>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col gap-1 px-2">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-all duration-200 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 bg-teal-50 text-teal-700 rounded-r-lg border-l-4 border-teal-700 font-inter text-xs font-bold uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
<span>Laporan Stok</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-all duration-200 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">database</span>
|
||||
<span>Data Master</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-all duration-200 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">qr_code_scanner</span>
|
||||
<span>Pelacakan</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-all duration-200 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span>Pengaturan</span>
|
||||
</a>
|
||||
<div class="mt-6 px-4">
|
||||
<button class="w-full py-3 bg-white border border-teal-700 text-teal-700 rounded font-bold text-[10px] uppercase tracking-widest hover:bg-teal-50 transition-colors">
|
||||
+ Tambah Lot Baru
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-2 mt-auto border-t border-slate-200 pt-4">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 transition-all font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
<span>Bantuan</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-red-600 hover:bg-red-50 transition-all font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">logout</span>
|
||||
<span>Log Keluar</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-64 pt-16 min-h-screen">
|
||||
<div class="p-container-margin">
|
||||
<!-- Header Section -->
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
|
||||
<div>
|
||||
<h1 class="font-h1 text-h1 text-on-surface">Laporan Stok Terkini</h1>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Data inventaris real-time per <span class="font-bold">24 Mei 2024</span></p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex items-center bg-white border border-outline-variant rounded px-3 py-1.5 shadow-sm">
|
||||
<span class="material-symbols-outlined text-sm mr-2">calendar_today</span>
|
||||
<span class="text-body-sm font-medium">Bulan Ini</span>
|
||||
<span class="material-symbols-outlined text-sm ml-2">expand_more</span>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 px-4 py-2 border border-primary text-primary rounded font-medium hover:bg-teal-50 transition-colors">
|
||||
<span class="material-symbols-outlined text-sm">download</span>
|
||||
<span class="text-body-base">Ekspor Laporan</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bento Grid Stats -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-gutter mb-8">
|
||||
<!-- Main Stat: Total Value -->
|
||||
<div class="md:col-span-2 bg-white p-6 rounded-lg border border-outline-variant shadow-sm relative overflow-hidden group">
|
||||
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
|
||||
<span class="material-symbols-outlined text-6xl text-primary">payments</span>
|
||||
</div>
|
||||
<p class="font-label-caps text-label-caps text-on-surface-variant mb-2">TOTAL NILAI INVENTARIS</p>
|
||||
<h2 class="font-display-lot text-display-lot text-primary mb-4">Rp 4.280.550.000</h2>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="flex items-center text-green-600 bg-green-50 px-2 py-0.5 rounded text-xs font-bold">
|
||||
<span class="material-symbols-outlined text-xs mr-1">trending_up</span> +12.4%
|
||||
</span>
|
||||
<span class="text-body-sm text-on-surface-variant">vs bulan lalu</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stock Movement Summary -->
|
||||
<div class="bg-white p-6 rounded-lg border border-outline-variant shadow-sm">
|
||||
<p class="font-label-caps text-label-caps text-on-surface-variant mb-2">TOTAL BERAT (KG)</p>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<h2 class="font-h1 text-h1">1,425.80</h2>
|
||||
<span class="text-body-sm font-medium text-on-surface-variant">kg</span>
|
||||
</div>
|
||||
<div class="mt-4 h-12 w-full bg-slate-50 flex items-end gap-1 px-1">
|
||||
<div class="h-1/2 w-full bg-teal-200 rounded-t-sm"></div>
|
||||
<div class="h-2/3 w-full bg-teal-200 rounded-t-sm"></div>
|
||||
<div class="h-3/4 w-full bg-teal-300 rounded-t-sm"></div>
|
||||
<div class="h-1/2 w-full bg-teal-400 rounded-t-sm"></div>
|
||||
<div class="h-full w-full bg-primary rounded-t-sm"></div>
|
||||
<div class="h-5/6 w-full bg-teal-500 rounded-t-sm"></div>
|
||||
<div class="h-3/4 w-full bg-teal-400 rounded-t-sm"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Average Shrinkage -->
|
||||
<div class="bg-white p-6 rounded-lg border border-outline-variant shadow-sm">
|
||||
<p class="font-label-caps text-label-caps text-on-surface-variant mb-2">TINGKAT SUSUT (AVG)</p>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<h2 class="font-h1 text-h1 text-tertiary">3.12</h2>
|
||||
<span class="text-body-sm font-medium text-on-surface-variant">%</span>
|
||||
</div>
|
||||
<div class="mt-4 flex flex-col gap-2">
|
||||
<div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
|
||||
<div class="bg-tertiary h-full" style="width: 32%"></div>
|
||||
</div>
|
||||
<div class="flex justify-between text-[10px] font-bold text-on-surface-variant uppercase tracking-widest">
|
||||
<span>Target < 3%</span>
|
||||
<span class="text-tertiary">Alert!</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-gutter mb-8">
|
||||
<!-- Shrinkage Analysis per Grade -->
|
||||
<div class="lg:col-span-1 bg-white rounded-lg border border-outline-variant shadow-sm overflow-hidden">
|
||||
<div class="p-4 border-b border-outline-variant bg-surface-container-low flex justify-between items-center">
|
||||
<h3 class="font-h2 text-h2">Analisis Susut per Grade</h3>
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-sm">info</span>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="space-y-4">
|
||||
<!-- Grade item -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded flex items-center justify-center bg-teal-50 text-primary font-bold text-xs border border-teal-100">AAA</div>
|
||||
<div>
|
||||
<p class="text-body-base font-bold">Super Premium</p>
|
||||
<p class="text-[10px] text-on-surface-variant uppercase">Moisture Content: 12%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-body-base font-bold text-green-600">1.8%</p>
|
||||
<p class="text-[10px] text-on-surface-variant">OPTIMAL</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Grade item -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded flex items-center justify-center bg-teal-50 text-primary font-bold text-xs border border-teal-100">AA</div>
|
||||
<div>
|
||||
<p class="text-body-base font-bold">Premium High</p>
|
||||
<p class="text-[10px] text-on-surface-variant uppercase">Moisture Content: 14%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-body-base font-bold text-secondary">2.5%</p>
|
||||
<p class="text-[10px] text-on-surface-variant">NORMAL</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Grade item -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded flex items-center justify-center bg-teal-50 text-primary font-bold text-xs border border-teal-100">B</div>
|
||||
<div>
|
||||
<p class="text-body-base font-bold">Standard Grade</p>
|
||||
<p class="text-[10px] text-on-surface-variant uppercase">Moisture Content: 18%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-body-base font-bold text-error">4.2%</p>
|
||||
<p class="text-[10px] text-error font-bold uppercase">HIGH RISK</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full mt-6 py-2 text-primary font-medium text-body-sm hover:underline">Lihat Detail Semua Grade →</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stock Movement Trend visualization area -->
|
||||
<div class="lg:col-span-2 bg-white rounded-lg border border-outline-variant shadow-sm overflow-hidden flex flex-col">
|
||||
<div class="p-4 border-b border-outline-variant bg-surface-container-low flex justify-between items-center">
|
||||
<h3 class="font-h2 text-h2">Tren Arus Barang (30 Hari)</h3>
|
||||
<div class="flex items-center gap-4 text-[10px] font-bold tracking-widest text-on-surface-variant uppercase">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="w-2 h-2 rounded-full bg-primary"></div> Masuk
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<div class="w-2 h-2 rounded-full bg-tertiary"></div> Keluar
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-compact-padding flex-1 bg-slate-50/50">
|
||||
<div class="w-full h-full min-h-[250px] relative flex flex-col">
|
||||
<img alt="Stock trend graph visualization" class="w-full h-full object-cover opacity-20 absolute inset-0 mix-blend-multiply" data-alt="clean professional dashboard line chart showing inventory trends with teal and orange lines on a light grid background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCWkZlVV-asCKrQsuVbc8ShE6tBBgmqLlpwLir3IJck1sBTco9RF36pvFjlLIrUsLNGtVveXpbiUIsUtXWLq-__2i1sYEYSAggF3-9lUW5ROFGeAJaeh1FZnpTcgfvCaVncxzUtBlyxKuYwO7a6BbRGOdYsr-C4I5DvfB9w9-mOShUQZE6syMxLBF3ffUMxKiJ0mPYy7_m2nOekcs0NE6PRfwPII07R6xN_QustDLw5bgxrrGessq5qmvBGx9mEYv_T495FNHHKow"/>
|
||||
<div class="mt-auto p-4 flex justify-between items-end relative z-10">
|
||||
<div class="space-y-1">
|
||||
<p class="text-[10px] font-bold text-on-surface-variant uppercase">Minggu Ini</p>
|
||||
<p class="text-body-base font-bold text-primary">+245 kg masuk</p>
|
||||
<p class="text-body-base font-bold text-tertiary">-112 kg keluar</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-[28px] font-black text-on-surface leading-tight">+133 kg</p>
|
||||
<p class="text-[10px] font-bold text-green-600 uppercase">Net Stock Growth</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Warehouse Inventory Table -->
|
||||
<div class="bg-white rounded-lg border border-outline-variant shadow-sm overflow-hidden">
|
||||
<div class="p-4 border-b border-outline-variant bg-surface-container-low flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">warehouse</span>
|
||||
<h3 class="font-h2 text-h2">Detail Stok per Gudang</h3>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-2 top-1/2 -translate-y-1/2 text-xs text-on-surface-variant">filter_list</span>
|
||||
<select class="pl-8 pr-4 py-1.5 bg-white border border-outline-variant rounded text-xs focus:ring-1 focus:ring-primary outline-none appearance-none">
|
||||
<option>Semua Wilayah</option>
|
||||
<option>Jakarta (Head Office)</option>
|
||||
<option>Surabaya (Plant 1)</option>
|
||||
<option>Medan (Logistics)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-slate-50 text-left border-b border-outline-variant">
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant">NAMA GUDANG</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant">LOKASI</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant">TOTAL LOT</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant">BERAT NETTO</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant">GRADE DOMINAN</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant">STATUS</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant text-right">AKSI</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-outline-variant">
|
||||
<!-- Warehouse Row -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
<span class="font-table-data text-table-data text-on-surface">Gudang Jakarta Utama</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-body-sm text-on-surface-variant">Jakarta Timur, DKI Jakarta</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">412</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">682.45 kg</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="px-2 py-0.5 bg-teal-50 text-primary border border-teal-100 rounded text-[10px] font-bold">AAA (45%)</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="px-2 py-0.5 bg-green-50 text-green-700 rounded-full text-[10px] font-bold">AKTIF</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="text-primary hover:text-teal-900 font-bold text-xs">DETAIL</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Warehouse Row -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
<span class="font-table-data text-table-data text-on-surface">Plant Surabaya - Room A</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-body-sm text-on-surface-variant">Sidoarjo, Jawa Timur</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">288</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">415.10 kg</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="px-2 py-0.5 bg-teal-50 text-primary border border-teal-100 rounded text-[10px] font-bold">AA (32%)</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="px-2 py-0.5 bg-green-50 text-green-700 rounded-full text-[10px] font-bold">AKTIF</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="text-primary hover:text-teal-900 font-bold text-xs">DETAIL</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Warehouse Row -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-orange-500"></div>
|
||||
<span class="font-table-data text-table-data text-on-surface">Logistics Medan</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-body-sm text-on-surface-variant">Belawan, Sumatera Utara</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">156</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">328.25 kg</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="px-2 py-0.5 bg-teal-50 text-primary border border-teal-100 rounded text-[10px] font-bold">B (28%)</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="px-2 py-0.5 bg-orange-50 text-orange-700 rounded-full text-[10px] font-bold">TRANSIT</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="text-primary hover:text-teal-900 font-bold text-xs">DETAIL</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Warehouse Row -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 rounded-full bg-blue-500"></div>
|
||||
<span class="font-table-data text-table-data text-on-surface">QC Processing Lab</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-body-sm text-on-surface-variant">Tangerang, Banten</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">45</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">0 kg</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="text-body-sm text-on-surface-variant italic">-</span>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="px-2 py-0.5 bg-blue-50 text-blue-700 rounded-full text-[10px] font-bold">STANDBY</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="text-primary hover:text-teal-900 font-bold text-xs">DETAIL</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="p-4 border-t border-outline-variant bg-slate-50 flex items-center justify-between">
|
||||
<p class="text-body-sm text-on-surface-variant">Menampilkan 4 dari 12 lokasi gudang</p>
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="p-1 rounded hover:bg-slate-200 border border-transparent disabled:opacity-30" disabled="">
|
||||
<span class="material-symbols-outlined">chevron_left</span>
|
||||
</button>
|
||||
<button class="px-2.5 py-1 text-xs font-bold bg-primary text-white rounded">1</button>
|
||||
<button class="px-2.5 py-1 text-xs font-bold hover:bg-slate-200 rounded">2</button>
|
||||
<button class="px-2.5 py-1 text-xs font-bold hover:bg-slate-200 rounded">3</button>
|
||||
<button class="p-1 rounded hover:bg-slate-200 border border-transparent">
|
||||
<span class="material-symbols-outlined">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Contextual FAB -->
|
||||
<div class="fixed bottom-8 right-8 z-50">
|
||||
<button class="group flex items-center gap-2 bg-primary text-white pl-4 pr-5 py-3 rounded-full shadow-lg hover:shadow-xl active:scale-95 transition-all">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
<span class="font-bold text-sm tracking-wide">INPUT STOCK OPNAME</span>
|
||||
</button>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/laporan_stok_1/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/laporan_stok_1/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 399 KiB |
533
design-assets/stitch_abel_stock/laporan_stok_2/code.html
Normal file
533
design-assets/stitch_abel_stock/laporan_stok_2/code.html
Normal file
@ -0,0 +1,533 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;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": "#4e6073",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"outline": "#6f797a",
|
||||
"background": "#f8fafa",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"error-container": "#ffdad6",
|
||||
"tertiary": "#60320f",
|
||||
"on-secondary-container": "#526478",
|
||||
"surface-container": "#eceeee",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"on-error-container": "#93000a",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"surface-tint": "#1d6871",
|
||||
"on-primary-container": "#92d5df",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"inverse-surface": "#2e3131",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"on-surface": "#191c1d",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"surface": "#f8fafa",
|
||||
"primary-container": "#0d5e67",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"error": "#ba1a1a",
|
||||
"surface-bright": "#f8fafa",
|
||||
"primary": "#00454c",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"on-error": "#ffffff",
|
||||
"surface-variant": "#e1e3e3",
|
||||
"on-background": "#191c1d",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-dim": "#d8dadb",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-container": "#7c4824"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"compact-padding": "8px",
|
||||
"row-height-sm": "32px",
|
||||
"row-height-md": "48px",
|
||||
"container-margin": "24px",
|
||||
"gutter": "16px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-base": ["Inter"],
|
||||
"h1": ["Inter"],
|
||||
"display-lot": ["Inter"],
|
||||
"table-data": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"h2": ["Inter"],
|
||||
"label-caps": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"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"}],
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 2px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body-base text-on-background antialiased">
|
||||
<!-- Side Navigation -->
|
||||
<aside class="fixed left-0 top-0 h-full w-64 bg-slate-50 border-r border-slate-200 flex flex-col py-4 z-50">
|
||||
<div class="px-6 mb-8">
|
||||
<h2 class="text-teal-900 font-black text-lg">Walet Operations</h2>
|
||||
<p class="text-[11px] text-slate-500 uppercase tracking-widest font-bold">V1.0.4-Operational</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1 px-3">
|
||||
<a class="flex items-center gap-3 px-3 h-10 text-slate-600 hover:bg-slate-100 duration-150 ease-in-out font-medium text-[13px]" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="dashboard">dashboard</span>
|
||||
Dashboard
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 h-10 bg-teal-50 text-teal-700 border-r-4 border-teal-600 duration-150 ease-in-out font-medium text-[13px]" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="inventory_2">inventory_2</span>
|
||||
Inventory Stock
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 h-10 text-slate-600 hover:bg-slate-100 duration-150 ease-in-out font-medium text-[13px]" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="account_tree">account_tree</span>
|
||||
Traceability Logs
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 h-10 text-slate-600 hover:bg-slate-100 duration-150 ease-in-out font-medium text-[13px]" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="database">database</span>
|
||||
Master Data
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 h-10 text-slate-600 hover:bg-slate-100 duration-150 ease-in-out font-medium text-[13px]" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="qr_code_scanner">qr_code_scanner</span>
|
||||
Barcode Scanner
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-3 pt-4 border-t border-slate-200 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 h-10 text-slate-600 hover:bg-slate-100 duration-150 ease-in-out font-medium text-[13px]" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="help_outline">help_outline</span>
|
||||
Support
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 h-10 text-slate-600 hover:bg-slate-100 duration-150 ease-in-out font-medium text-[13px]" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="logout">logout</span>
|
||||
Sign Out
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="ml-64 min-h-screen">
|
||||
<!-- Top Bar -->
|
||||
<header class="sticky top-0 z-40 bg-white border-b border-slate-200 shadow-sm flex items-center justify-between px-6 h-14 w-full">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-teal-800 font-bold tracking-tight text-lg">SarangTrace ERP</span>
|
||||
<div class="h-6 w-px bg-slate-200 mx-2"></div>
|
||||
<h1 class="font-h1 text-h1 text-on-surface">Laporan Stok Inventaris</h1>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-50 transition-colors rounded-lg">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-50 transition-colors rounded-lg">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
</button>
|
||||
<div class="w-8 h-8 bg-primary-container rounded-full flex items-center justify-center text-white font-bold text-xs">
|
||||
JD
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Filters Section -->
|
||||
<section class="p-6 bg-surface border-b border-outline-variant">
|
||||
<div class="flex flex-wrap items-end gap-4">
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1">RENTANG TANGGAL</label>
|
||||
<div class="relative">
|
||||
<input class="w-full h-10 bg-white border border-outline-variant px-3 py-2 text-body-sm focus:ring-2 focus:ring-primary-container focus:border-primary-container outline-none" type="text" value="01 Jan 2024 - 31 Jan 2024"/>
|
||||
<span class="material-symbols-outlined absolute right-3 top-2 text-slate-400 pointer-events-none" data-icon="calendar_today">calendar_today</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-w-[160px]">
|
||||
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1">GUDANG</label>
|
||||
<select class="w-full h-10 bg-white border border-outline-variant px-3 py-2 text-body-sm focus:ring-2 focus:ring-primary-container outline-none">
|
||||
<option>Semua Gudang</option>
|
||||
<option>Gudang Utama (Pusat)</option>
|
||||
<option>Gudang Transit A</option>
|
||||
<option>Gudang Ekspor</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex-1 min-w-[160px]">
|
||||
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1">KATEGORI ITEM</label>
|
||||
<select class="w-full h-10 bg-white border border-outline-variant px-3 py-2 text-body-sm focus:ring-2 focus:ring-primary-container outline-none">
|
||||
<option>Semua Kategori</option>
|
||||
<option>Bahan Baku (Raw)</option>
|
||||
<option>Semi-Processed</option>
|
||||
<option>Siap Ekspor (Finished)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex-1 min-w-[120px]">
|
||||
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1">GRADE</label>
|
||||
<select class="w-full h-10 bg-white border border-outline-variant px-3 py-2 text-body-sm focus:ring-2 focus:ring-primary-container outline-none">
|
||||
<option>Semua Grade</option>
|
||||
<option>Grade SSS</option>
|
||||
<option>Grade AA</option>
|
||||
<option>Grade A</option>
|
||||
<option>Grade B</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="h-10 px-6 bg-primary text-white font-bold text-body-sm flex items-center gap-2 hover:bg-opacity-90 transition-all">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="filter_list">filter_list</span>
|
||||
TERAPKAN FILTER
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- KPI Bento Grid -->
|
||||
<section class="p-6 grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
<div class="bg-white border border-outline-variant p-4 flex flex-col justify-between shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<div>
|
||||
<p class="font-label-caps text-label-caps text-on-surface-variant">TOTAL STOK (KG)</p>
|
||||
<p class="font-display-lot text-display-lot text-primary mt-1">1,245.82</p>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<span class="bg-green-100 text-green-800 text-[10px] font-bold px-1.5 py-0.5 rounded flex items-center">
|
||||
<span class="material-symbols-outlined text-[12px]" data-icon="trending_up">trending_up</span>
|
||||
4.2%
|
||||
</span>
|
||||
<span class="text-body-sm text-slate-400">vs bulan lalu</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-outline-variant p-4 flex flex-col justify-between shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<div>
|
||||
<p class="font-label-caps text-label-caps text-on-surface-variant">TOTAL NILAI (IDR)</p>
|
||||
<p class="font-display-lot text-display-lot text-on-surface mt-1">18.42M</p>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<span class="bg-green-100 text-green-800 text-[10px] font-bold px-1.5 py-0.5 rounded flex items-center">
|
||||
<span class="material-symbols-outlined text-[12px]" data-icon="trending_up">trending_up</span>
|
||||
1.8%
|
||||
</span>
|
||||
<span class="text-body-sm text-slate-400">vs bulan lalu</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-outline-variant p-4 flex flex-col justify-between shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<div>
|
||||
<p class="font-label-caps text-label-caps text-on-surface-variant">SUSUT (SHRINKAGE)</p>
|
||||
<p class="font-display-lot text-display-lot text-error mt-1">2.14%</p>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<span class="bg-red-100 text-red-800 text-[10px] font-bold px-1.5 py-0.5 rounded flex items-center">
|
||||
<span class="material-symbols-outlined text-[12px]" data-icon="trending_up">trending_up</span>
|
||||
0.4%
|
||||
</span>
|
||||
<span class="text-body-sm text-slate-400">Target < 2%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-outline-variant p-4 flex flex-col justify-between shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<div>
|
||||
<p class="font-label-caps text-label-caps text-on-surface-variant">PERPUTARAN (TURNOVER)</p>
|
||||
<p class="font-display-lot text-display-lot text-tertiary-container mt-1">4.5x</p>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center gap-2">
|
||||
<span class="bg-green-100 text-green-800 text-[10px] font-bold px-1.5 py-0.5 rounded flex items-center">
|
||||
<span class="material-symbols-outlined text-[12px]" data-icon="check_circle">check_circle</span>
|
||||
Sehat
|
||||
</span>
|
||||
<span class="text-body-sm text-slate-400">Rata-rata industri</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Main Visuals (Chart and Table) -->
|
||||
<section class="px-6 pb-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- Chart: Stock Trends -->
|
||||
<div class="lg:col-span-2 bg-white border border-outline-variant flex flex-col shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<div class="p-4 border-b border-outline-variant flex items-center justify-between">
|
||||
<h2 class="font-h2 text-h2">Tren Pergerakan Stok</h2>
|
||||
<div class="flex gap-2">
|
||||
<button class="px-2 py-1 bg-slate-100 text-slate-600 text-xs font-bold rounded">MINGGUAN</button>
|
||||
<button class="px-2 py-1 bg-primary text-white text-xs font-bold rounded">BULANAN</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 p-6 flex flex-col">
|
||||
<div class="flex-1 min-h-[300px] w-full relative">
|
||||
<!-- Mock Chart Visualization -->
|
||||
<div class="absolute inset-0 flex items-end justify-between px-2 pt-10">
|
||||
<div class="w-8 bg-primary/10 rounded-t-sm relative group h-[40%]">
|
||||
<div class="absolute -top-6 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 bg-black text-white text-[10px] px-1 rounded transition-opacity">840kg</div>
|
||||
</div>
|
||||
<div class="w-8 bg-primary/10 rounded-t-sm relative group h-[45%]"></div>
|
||||
<div class="w-8 bg-primary/10 rounded-t-sm relative group h-[55%]"></div>
|
||||
<div class="w-8 bg-primary/10 rounded-t-sm relative group h-[50%]"></div>
|
||||
<div class="w-8 bg-primary/20 rounded-t-sm relative group h-[65%]"></div>
|
||||
<div class="w-8 bg-primary/20 rounded-t-sm relative group h-[75%]"></div>
|
||||
<div class="w-8 bg-primary/40 rounded-t-sm relative group h-[85%]"></div>
|
||||
<div class="w-8 bg-primary/40 rounded-t-sm relative group h-[80%]"></div>
|
||||
<div class="w-8 bg-primary/60 rounded-t-sm relative group h-[90%]"></div>
|
||||
<div class="w-8 bg-primary/60 rounded-t-sm relative group h-[95%]"></div>
|
||||
<div class="w-8 bg-primary/80 rounded-t-sm relative group h-[88%]"></div>
|
||||
<div class="w-8 bg-primary rounded-t-sm relative group h-[100%]">
|
||||
<div class="absolute -top-6 left-1/2 -translate-x-1/2 bg-black text-white text-[10px] px-1 rounded">1,245kg</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Axis Labels -->
|
||||
<div class="absolute bottom-[-24px] left-0 right-0 flex justify-between px-2 text-[10px] text-slate-400 font-bold">
|
||||
<span>JAN</span><span>FEB</span><span>MAR</span><span>APR</span><span>MEI</span><span>JUN</span><span>JUL</span><span>AGU</span><span>SEP</span><span>OKT</span><span>NOV</span><span>DES</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 border-t border-outline-variant bg-surface-container-low flex items-center gap-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 bg-primary rounded-full"></div>
|
||||
<span class="text-body-sm font-medium">Stok Tersedia</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 bg-secondary-fixed-dim rounded-full"></div>
|
||||
<span class="text-body-sm font-medium">Stok Terkunci (QC)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Table: Category Breakdown -->
|
||||
<div class="bg-white border border-outline-variant flex flex-col shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<div class="p-4 border-b border-outline-variant flex items-center justify-between">
|
||||
<h2 class="font-h2 text-h2">Rincian Per Kategori</h2>
|
||||
<button class="p-1 hover:bg-slate-50 rounded">
|
||||
<span class="material-symbols-outlined text-[20px] text-slate-400" data-icon="more_vert">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="overflow-auto custom-scrollbar flex-1">
|
||||
<table class="w-full text-left">
|
||||
<thead class="sticky top-0 bg-slate-50 border-b border-outline-variant z-10">
|
||||
<tr>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant">KATEGORI</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant text-right">STOK (KG)</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant text-right">NILAI (JT)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-outline-variant">
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-teal-500"></span>
|
||||
<span class="font-table-data text-table-data">Grade SSS - Mangkok</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right font-table-data text-table-data">242.50</td>
|
||||
<td class="px-4 py-3 text-right font-table-data text-table-data">4,850.0</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-teal-400"></span>
|
||||
<span class="font-table-data text-table-data">Grade AA - Oval</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right font-table-data text-table-data">315.20</td>
|
||||
<td class="px-4 py-3 text-right font-table-data text-table-data">5,358.4</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-teal-300"></span>
|
||||
<span class="font-table-data text-table-data">Grade A - Segitiga</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right font-table-data text-table-data">198.15</td>
|
||||
<td class="px-4 py-3 text-right font-table-data text-table-data">2,972.2</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-amber-400"></span>
|
||||
<span class="font-table-data text-table-data">Bahan Baku (Raw)</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right font-table-data text-table-data">420.00</td>
|
||||
<td class="px-4 py-3 text-right font-table-data text-table-data">4,200.0</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-slate-300"></span>
|
||||
<span class="font-table-data text-table-data">Lainnya (Patahan)</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right font-table-data text-table-data">69.97</td>
|
||||
<td class="px-4 py-3 text-right font-table-data text-table-data">1,049.5</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="p-4 bg-surface-container-low border-t border-outline-variant">
|
||||
<button class="w-full h-9 border border-teal-600 text-teal-700 font-bold text-body-sm hover:bg-teal-50 transition-all flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="description">description</span>
|
||||
LIHAT LAPORAN LENGKAP
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Detailed Inventory Logs Table -->
|
||||
<section class="px-6 pb-6">
|
||||
<div class="bg-white border border-outline-variant shadow-[0px_2px_4px_rgba(0,0,0,0.05)] overflow-hidden">
|
||||
<div class="p-4 border-b border-outline-variant flex items-center justify-between">
|
||||
<h2 class="font-h2 text-h2">Detail Log Pergerakan Inventaris</h2>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="relative">
|
||||
<input class="h-9 w-64 bg-surface-container-low border border-outline-variant px-3 py-1 text-body-sm focus:ring-1 focus:ring-primary-container outline-none" placeholder="Cari Lot ID..." type="text"/>
|
||||
<span class="material-symbols-outlined absolute right-3 top-1.5 text-slate-400 text-[18px]" data-icon="search">search</span>
|
||||
</div>
|
||||
<button class="h-9 px-3 border border-outline-variant bg-white flex items-center gap-2 hover:bg-slate-50 transition-all text-body-sm font-medium">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="file_download">file_download</span>
|
||||
Export Excel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left whitespace-nowrap">
|
||||
<thead class="bg-slate-50 border-b border-outline-variant">
|
||||
<tr>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant">LOT ID</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant">TANGGAL</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant">TIPE TRANSAKSI</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant">KATEGORI</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant text-right">BERAT (KG)</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant text-right">KADAR AIR</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant">STATUS</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-on-surface-variant text-right">AKSI</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-outline-variant">
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-3 font-table-data text-table-data text-teal-800">#LOT-2024-0581</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">15 Jan 2024, 09:12</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">Masuk (Gudang Utama)</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">Raw Material</td>
|
||||
<td class="px-4 py-3 text-right font-table-data text-table-data text-on-surface">25.50</td>
|
||||
<td class="px-4 py-3 text-right font-table-data text-table-data">12.5%</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-green-100 text-green-800">
|
||||
TERSEDIA
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="text-slate-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="visibility">visibility</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-3 font-table-data text-table-data text-teal-800">#LOT-2024-0579</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">14 Jan 2024, 14:45</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">Proses (Cleaning)</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">Semi-Processed</td>
|
||||
<td class="px-4 py-3 text-right font-table-data text-table-data text-on-surface">12.20</td>
|
||||
<td class="px-4 py-3 text-right font-table-data text-table-data">8.2%</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-amber-100 text-amber-800 uppercase">
|
||||
DALAM QC
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="text-slate-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="visibility">visibility</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-3 font-table-data text-table-data text-teal-800">#LOT-2024-0575</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">14 Jan 2024, 08:30</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">Keluar (Ekspor)</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">Finished Goods</td>
|
||||
<td class="px-4 py-3 text-right font-table-data text-table-data text-on-surface">50.00</td>
|
||||
<td class="px-4 py-3 text-right font-table-data text-table-data">5.0%</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-blue-100 text-blue-800 uppercase">
|
||||
DIKIRIM
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="text-slate-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="visibility">visibility</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-3 font-table-data text-table-data text-teal-800">#LOT-2023-9942</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">12 Jan 2024, 16:20</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">Adjustment (Susut)</td>
|
||||
<td class="px-4 py-3 font-table-data text-table-data">Raw Material</td>
|
||||
<td class="px-4 py-3 text-right font-table-data text-table-data text-error">-0.45</td>
|
||||
<td class="px-4 py-3 text-right font-table-data text-table-data">-</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-red-100 text-red-800 uppercase">
|
||||
SUSUT
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="text-slate-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="visibility">visibility</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="p-4 border-t border-outline-variant bg-slate-50 flex items-center justify-between">
|
||||
<span class="text-body-sm text-slate-500">Menampilkan 1-15 dari 1,248 transaksi</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="w-8 h-8 flex items-center justify-center border border-outline-variant bg-white hover:bg-slate-50 disabled:opacity-50">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="chevron_left">chevron_left</span>
|
||||
</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center bg-primary text-white font-bold text-xs">1</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center border border-outline-variant bg-white hover:bg-slate-50 text-xs">2</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center border border-outline-variant bg-white hover:bg-slate-50 text-xs">3</button>
|
||||
<span class="px-1 text-slate-400">...</span>
|
||||
<button class="w-8 h-8 flex items-center justify-center border border-outline-variant bg-white hover:bg-slate-50 text-xs">84</button>
|
||||
<button class="w-8 h-8 flex items-center justify-center border border-outline-variant bg-white hover:bg-slate-50">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="chevron_right">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Floating Action Button (FAB) - For New Movement Log -->
|
||||
<button class="fixed bottom-8 right-8 w-14 h-14 bg-primary text-white rounded-full shadow-lg flex items-center justify-center hover:scale-105 transition-all z-50">
|
||||
<span class="material-symbols-outlined" data-icon="add">add</span>
|
||||
</button>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/laporan_stok_2/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/laporan_stok_2/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 302 KiB |
177
design-assets/stitch_abel_stock/login_sistem_inventory/code.html
Normal file
177
design-assets/stitch_abel_stock/login_sistem_inventory/code.html
Normal file
@ -0,0 +1,177 @@
|
||||
<html lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-variant": "#e1e3e3",
|
||||
"tertiary-container": "#7c4824",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"primary": "#00454c",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"error": "#ba1a1a",
|
||||
"outline": "#6f797a",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"tertiary": "#60320f",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"surface-bright": "#f8fafa",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"on-primary-container": "#92d5df",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"on-surface": "#191c1d",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"surface-dim": "#d8dadb",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"surface-container": "#eceeee",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"on-error-container": "#93000a",
|
||||
"secondary": "#4e6073",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-background": "#191c1d",
|
||||
"inverse-surface": "#2e3131",
|
||||
"on-error": "#ffffff",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"primary-container": "#0d5e67",
|
||||
"background": "#f8fafa",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-tint": "#1d6871",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"surface": "#f8fafa",
|
||||
"on-secondary-container": "#526478"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter": "16px",
|
||||
"container-margin": "24px",
|
||||
"row-height-sm": "32px",
|
||||
"row-height-md": "48px",
|
||||
"compact-padding": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display-lot": ["Inter"],
|
||||
"body-base": ["Inter"],
|
||||
"label-caps": ["Inter"],
|
||||
"h2": ["Inter"],
|
||||
"h1": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"table-data": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"display-lot": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"h1": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "500"}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</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 min-h-screen flex items-center justify-center">
|
||||
<main class="w-full max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between p-container-margin md:gap-16">
|
||||
<div class="hidden md:flex flex-1 flex-col items-center justify-center space-y-8">
|
||||
<div class="relative w-full max-w-md aspect-square bg-surface-container rounded-xl overflow-hidden shadow-sm border border-outline-variant">
|
||||
<img alt="Logo Sarang Inventory Pro" class="w-full h-full object-cover opacity-90" data-alt="Close-up of premium edible bird nests in a clean warehouse setting with soft teal lighting and professional atmosphere" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBcipFNsMUT4XbRCkOtm3g4GLHTvyM7vfgH6Gm5Myj-4UZjkQl4vATiJYgMjCA_oYCtIgtsRU5BYZLM-Xg-guZY8Bfze0zFTGqFAFyzFa8QTALIGK8I21csvMEzwummGnH7NnH4MTyLz_2IKacjh-uWve_mEpDPjNGqlqBi729kN5GCIC2mY9rPvSikxb93CLnon1DP4NaCWbftbG_3EqPIKnkLb8qoAaZlL2YlfsPXCAIQjcLoFmwvhu7JnQmngO9FQITX6zYkNw"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-primary/60 to-transparent flex flex-col justify-end p-8">
|
||||
<h2 class="font-display-lot text-display-lot text-white mb-2">Sarang Inventory Pro</h2>
|
||||
<p class="font-body-sm text-body-sm text-white/80">Solusi Manajemen Inventaris Sarang Burung Walet Profesional.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="flex items-center justify-center gap-2 text-primary font-h2 text-h2 mb-2">
|
||||
<span class="material-symbols-outlined" data-icon="verified" style="font-variation-settings: 'FILL' 1;">verified</span>
|
||||
Terpercaya di Seluruh Indonesia
|
||||
</div>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant max-w-xs">Akurasi data untuk kualitas ekspor yang terjamin dan traceability lot yang presisi.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full max-w-md bg-surface-container-lowest p-8 md:p-12 border border-outline-variant rounded-lg shadow-sm">
|
||||
<div class="md:hidden flex justify-center mb-8">
|
||||
<img alt="Sarang Logo" class="h-16 w-16 object-contain" data-alt="Minimalist teal logo icon representing an edible birds nest with clean lines and professional design" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBUI1ZaqHRlTVChiRGNFMWvaFgxdk4cAjnlO_yoz99FFmzm84x9Ms10AYAc2JtFaeIgLEeccyr0IhzYyMyzVUHLYBrNBWOfg29tsj6yfIrs8wXm-Bh-KEJbNPz7FaEPbuYEPtJ4evPaXJuR9_wZI4DjrXERU0LgbSDZxMyl59dbYThBvDqLXOwWVQrbcYBnGd7v0f58cxjNnpWZIMZaAV_H0hxngvAPGNGtZJ54ne_nr8PS21B9F-P_9Pbx5RiHmsTlHTy3y0ttNw"/>
|
||||
</div>
|
||||
<header class="mb-10 text-left">
|
||||
<h1 class="font-h1 text-h1 text-on-surface mb-2">Selamat Datang Kembali</h1>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Masuk ke Operational Hub SarangWMS untuk mengelola lot inventaris Anda.</p>
|
||||
</header>
|
||||
<form class="space-y-6" onsubmit="return false">
|
||||
<div class="space-y-1.5">
|
||||
<label class="font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider block" for="identity">Email atau Username</label>
|
||||
<div class="relative">
|
||||
<span class="absolute left-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-outline text-[20px]" data-icon="person">person</span>
|
||||
<input class="w-full pl-10 pr-4 py-2.5 bg-surface border border-outline-variant rounded-lg focus:ring-2 focus:ring-primary focus:border-primary font-body-base text-body-base placeholder:text-outline/50 transition-all outline-none" id="identity" name="identity" placeholder="nama@perusahaan.com" type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<div class="flex justify-between items-end">
|
||||
<label class="font-label-caps text-label-caps text-on-surface-variant uppercase tracking-wider block" for="password">Kata Sandi</label>
|
||||
<a class="font-label-caps text-label-caps text-primary hover:underline" href="#">Lupa Password?</a>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<span class="absolute left-3 top-1/2 -translate-y-1/2 material-symbols-outlined text-outline text-[20px]" data-icon="lock">lock</span>
|
||||
<input class="w-full pl-10 pr-12 py-2.5 bg-surface border border-outline-variant rounded-lg focus:ring-2 focus:ring-primary focus:border-primary font-body-base text-body-base placeholder:text-outline/50 transition-all outline-none" id="password" name="password" placeholder="••••••••" type="password"/>
|
||||
<button class="absolute right-3 top-1/2 -translate-y-1/2 text-outline hover:text-primary transition-colors" type="button">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="visibility">visibility</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-3 py-1">
|
||||
<input class="w-4 h-4 rounded border-outline-variant text-primary focus:ring-primary" id="remember" type="checkbox"/>
|
||||
<label class="font-body-sm text-body-sm text-on-surface-variant" for="remember">Ingat perangkat ini</label>
|
||||
</div>
|
||||
<button class="w-full bg-primary text-on-primary font-h2 text-h2 py-3 rounded-lg hover:bg-primary-container hover:text-on-primary-container transition-all flex items-center justify-center gap-2 group" type="submit">
|
||||
Masuk Sekarang
|
||||
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform" data-icon="arrow_forward">arrow_forward</span>
|
||||
</button>
|
||||
</form>
|
||||
<footer class="mt-12 pt-8 border-t border-outline-variant/30 text-center space-y-4">
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Belum memiliki akun operasional? <a class="text-primary font-h2 hover:underline" href="#">Hubungi Admin</a></p>
|
||||
<div class="flex flex-wrap justify-center gap-x-6 gap-y-2 opacity-60">
|
||||
<a class="font-label-caps text-label-caps hover:text-primary transition-colors" href="#">Bantuan</a>
|
||||
<a class="font-label-caps text-label-caps hover:text-primary transition-colors" href="#">Kebijakan Privasi</a>
|
||||
<a class="font-label-caps text-label-caps hover:text-primary transition-colors" href="#">Syarat & Ketentuan</a>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
<div class="fixed bottom-0 left-0 w-full p-4 flex justify-between items-center text-on-surface-variant/40 font-label-caps text-label-caps pointer-events-none">
|
||||
<div>v2.4.0-PRO</div>
|
||||
<div>© 2024 SarangWMS Global</div>
|
||||
</div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 337 KiB |
@ -0,0 +1,158 @@
|
||||
---
|
||||
name: Lot-Based Inventory System
|
||||
colors:
|
||||
surface: '#f8fafa'
|
||||
surface-dim: '#d8dadb'
|
||||
surface-bright: '#f8fafa'
|
||||
surface-container-lowest: '#ffffff'
|
||||
surface-container-low: '#f2f4f4'
|
||||
surface-container: '#eceeee'
|
||||
surface-container-high: '#e6e8e9'
|
||||
surface-container-highest: '#e1e3e3'
|
||||
on-surface: '#191c1d'
|
||||
on-surface-variant: '#3f484a'
|
||||
inverse-surface: '#2e3131'
|
||||
inverse-on-surface: '#eff1f1'
|
||||
outline: '#6f797a'
|
||||
outline-variant: '#bfc8ca'
|
||||
surface-tint: '#1d6871'
|
||||
primary: '#00454c'
|
||||
on-primary: '#ffffff'
|
||||
primary-container: '#0d5e67'
|
||||
on-primary-container: '#92d5df'
|
||||
inverse-primary: '#8ed1db'
|
||||
secondary: '#4e6073'
|
||||
on-secondary: '#ffffff'
|
||||
secondary-container: '#cfe2f9'
|
||||
on-secondary-container: '#526478'
|
||||
tertiary: '#60320f'
|
||||
on-tertiary: '#ffffff'
|
||||
tertiary-container: '#7c4824'
|
||||
on-tertiary-container: '#ffbb91'
|
||||
error: '#ba1a1a'
|
||||
on-error: '#ffffff'
|
||||
error-container: '#ffdad6'
|
||||
on-error-container: '#93000a'
|
||||
primary-fixed: '#aaeef8'
|
||||
primary-fixed-dim: '#8ed1db'
|
||||
on-primary-fixed: '#001f23'
|
||||
on-primary-fixed-variant: '#004f57'
|
||||
secondary-fixed: '#d1e4fb'
|
||||
secondary-fixed-dim: '#b5c8df'
|
||||
on-secondary-fixed: '#091d2e'
|
||||
on-secondary-fixed-variant: '#36485b'
|
||||
tertiary-fixed: '#ffdbc7'
|
||||
tertiary-fixed-dim: '#feb78a'
|
||||
on-tertiary-fixed: '#311300'
|
||||
on-tertiary-fixed-variant: '#6b3a17'
|
||||
background: '#f8fafa'
|
||||
on-background: '#191c1d'
|
||||
surface-variant: '#e1e3e3'
|
||||
typography:
|
||||
display-lot:
|
||||
fontFamily: Inter
|
||||
fontSize: 24px
|
||||
fontWeight: '700'
|
||||
lineHeight: 32px
|
||||
letterSpacing: -0.02em
|
||||
h1:
|
||||
fontFamily: Inter
|
||||
fontSize: 20px
|
||||
fontWeight: '600'
|
||||
lineHeight: 28px
|
||||
h2:
|
||||
fontFamily: Inter
|
||||
fontSize: 16px
|
||||
fontWeight: '600'
|
||||
lineHeight: 24px
|
||||
body-base:
|
||||
fontFamily: Inter
|
||||
fontSize: 14px
|
||||
fontWeight: '400'
|
||||
lineHeight: 20px
|
||||
body-sm:
|
||||
fontFamily: Inter
|
||||
fontSize: 13px
|
||||
fontWeight: '400'
|
||||
lineHeight: 18px
|
||||
table-data:
|
||||
fontFamily: Inter
|
||||
fontSize: 13px
|
||||
fontWeight: '500'
|
||||
lineHeight: 16px
|
||||
label-caps:
|
||||
fontFamily: Inter
|
||||
fontSize: 11px
|
||||
fontWeight: '700'
|
||||
lineHeight: 16px
|
||||
letterSpacing: 0.05em
|
||||
rounded:
|
||||
sm: 0.125rem
|
||||
DEFAULT: 0.25rem
|
||||
md: 0.375rem
|
||||
lg: 0.5rem
|
||||
xl: 0.75rem
|
||||
full: 9999px
|
||||
spacing:
|
||||
container-margin: 24px
|
||||
gutter: 16px
|
||||
compact-padding: 8px
|
||||
row-height-sm: 32px
|
||||
row-height-md: 48px
|
||||
---
|
||||
|
||||
## Brand & Style
|
||||
|
||||
The design system is engineered for high-stakes operational environments where precision and speed are paramount. The visual language communicates reliability and institutional trust, specifically tailored for the bird’s nest (Sarang Burung Walet) export and processing industry.
|
||||
|
||||
The aesthetic follows a **Corporate Modern** approach. It avoids unnecessary decoration, focusing instead on structural clarity and high information density. The interface feels like a high-performance tool—utilitarian, crisp, and robust. By utilizing a "Scan-First" philosophy, the design ensures that lot codes, weights, and processing stages are immediately identifiable within complex data environments.
|
||||
|
||||
## Colors
|
||||
|
||||
The palette is anchored by a sophisticated **Deep Teal**, chosen for its balance between professional authority and the natural, organic origins of the product.
|
||||
|
||||
- **Primary Deep Teal:** Used for primary actions, active navigation states, and key branding elements.
|
||||
- **Surface & Backgrounds:** A tiered system of whites and very light grays (Slate 50/White) creates a clean workspace that minimizes eye strain during long operational shifts.
|
||||
- **Functional Status Colors:** High-saturation greens, oranges, and reds are reserved strictly for operational status (e.g., 'In Quality Control', 'Pending Export', 'Contaminated').
|
||||
- **Neutral Gray:** Specifically designated for 'Closed' or 'Archived' lots to visually de-emphasize completed data.
|
||||
|
||||
## Typography
|
||||
|
||||
This design system utilizes **Inter** for its exceptional legibility in data-heavy contexts. The typographic scale is condensed to prioritize content density without sacrificing readability.
|
||||
|
||||
- **Data Optimization:** The `table-data` style uses a Medium weight (500) to ensure that alphanumeric lot codes are legible even at smaller sizes.
|
||||
- **Emphasis:** A specialized `display-lot` style is used for header-level lot identification, ensuring the primary object of focus is never missed.
|
||||
- **Labels:** Uppercase labels with slight letter spacing are used for table headers and form field captions to create a clear hierarchy between the UI structure and the user's data.
|
||||
|
||||
## Layout & Spacing
|
||||
|
||||
The layout employs a **Fluid Grid** system with fixed sidebars for navigation. To accommodate high information density, the spacing scale is built on a 4px baseline grid.
|
||||
|
||||
- **Information Density:** Tables and forms utilize `compact-padding` to maximize the number of visible rows on a single screen, reducing the need for excessive scrolling.
|
||||
- **Grid Structure:** A 12-column system is used for dashboard layouts, while inventory logs utilize a full-width fluid layout to maximize the horizontal space for multi-column data (e.g., Lot ID, Harvest Date, Grade, Weight, Moisture Content, Status).
|
||||
- **Margins:** Generous `container-margin` ensures the interface feels professional and organized, preventing the dense data from feeling cluttered.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
Hierarchy is established through **Tonal Layers** and **Low-Contrast Outlines** rather than aggressive shadows.
|
||||
|
||||
- **Surface Levels:** The background uses `bg_primary`, while active work surfaces like cards and table containers use `bg_secondary`.
|
||||
- **Borders:** Every container is defined by a 1px solid border in `border_subtle`. This provides a clear "box" for data without adding visual weight.
|
||||
- **Shadows:** A single, consistent "Soft Drop" shadow (0px 2px 4px rgba(0,0,0,0.05)) is used exclusively for floating elements like dropdown menus and modals to lift them off the work surface.
|
||||
|
||||
## Shapes
|
||||
|
||||
The shape language is **Soft (0.25rem)**, reflecting a precise and geometric personality.
|
||||
|
||||
- **Components:** Buttons, input fields, and checkboxes all use the base 4px (0.25rem) radius.
|
||||
- **Badges:** Status badges use a slightly higher `rounded-lg` (0.5rem) to differentiate them as interactive or informational "pills" within the rigid rectangular grid of the data tables.
|
||||
- **Selection States:** Focus states and active row selections should use sharp, clear colored borders (Primary) to eliminate any ambiguity regarding user focus.
|
||||
|
||||
## Components
|
||||
|
||||
- **Lot Status Badges:** Compact pills with light background tints and dark text of the corresponding status color (e.g., Light Green background with Dark Green text).
|
||||
- **Data Tables:** High-density rows with subtle hover states (#F1F5F9). Headers must remain sticky during vertical scrolls.
|
||||
- **Input Fields:** Inset borders with a 2px Teal focus ring. For numerical data like "Weight (kg)", include right-aligned unit labels within the field.
|
||||
- **Primary Buttons:** Solid Teal backgrounds with white text. Secondary buttons use a Teal outline with a transparent background.
|
||||
- **Inventory Cards:** Used for summary stats (e.g., "Total Stock", "Pending QC"). These feature a large numerical display and a small trend indicator.
|
||||
- **Progress Steppers:** Horizontal indicators showing the lifecycle of a lot—from "Raw Material" to "Processed" to "Export Ready."
|
||||
439
design-assets/stitch_abel_stock/lot_detail/code.html
Normal file
439
design-assets/stitch_abel_stock/lot_detail/code.html
Normal file
@ -0,0 +1,439 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Detail Lot - SwiftLot Walet</title>
|
||||
<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;
|
||||
}
|
||||
body {
|
||||
background-color: #f8fafa;
|
||||
}
|
||||
.timeline-line::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 11px;
|
||||
top: 24px;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background-color: #e6e8e9;
|
||||
}
|
||||
.timeline-item:last-child .timeline-line::before {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-base text-on-surface">
|
||||
<!-- TopNavBar -->
|
||||
<header class="fixed top-0 z-40 h-14 w-full bg-white dark:bg-slate-900 flex justify-between items-center px-6 border-b border-slate-200 dark:border-slate-800 shadow-sm font-inter text-sm antialiased">
|
||||
<div class="flex items-center gap-8">
|
||||
<span class="text-lg font-bold text-[#0D5E67] dark:text-white tracking-tight">SwiftLot Walet</span>
|
||||
<div class="hidden md:flex items-center gap-6">
|
||||
<span class="text-[#0D5E67] font-semibold cursor-pointer active:opacity-80">Inventaris</span>
|
||||
<span class="text-slate-600 dark:text-slate-400 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors px-2 py-1 rounded">Pengadaan</span>
|
||||
<span class="text-slate-600 dark:text-slate-400 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors px-2 py-1 rounded">Kontrol Kualitas</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2 px-3 py-1.5 bg-slate-100 rounded-lg">
|
||||
<span class="material-symbols-outlined text-slate-500 text-lg">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-xs w-48" placeholder="Cari Kode Lot..." type="text"/>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-[#0D5E67] cursor-pointer">notifications</span>
|
||||
<span class="material-symbols-outlined text-[#0D5E67] cursor-pointer">help_outline</span>
|
||||
<div class="h-8 w-8 rounded-full bg-primary-container flex items-center justify-center text-on-primary-container font-bold text-xs">
|
||||
JD
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- 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-30 pt-16">
|
||||
<div class="px-6 mb-8 flex items-center gap-3">
|
||||
<div class="h-10 w-10 bg-teal-900 rounded flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-white" data-icon="factory">factory</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-teal-900 dark:text-teal-100 font-black text-sm">Ops Sarang</h2>
|
||||
<p class="text-[11px] text-slate-500 uppercase tracking-widest font-bold">Pabrik A</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 px-4 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 rounded cursor-pointer group">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
<span class="font-medium text-[13px]">Dasbor</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 rounded cursor-pointer group">
|
||||
<span class="material-symbols-outlined" data-icon="shopping_cart">shopping_cart</span>
|
||||
<span class="font-medium text-[13px]">Pembelian</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 rounded cursor-pointer group">
|
||||
<span class="material-symbols-outlined" data-icon="receipt_long">receipt_long</span>
|
||||
<span class="font-medium text-[13px]">Penerimaan</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 rounded cursor-pointer group">
|
||||
<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
|
||||
<span class="font-medium text-[13px]">Inventaris</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 rounded cursor-pointer group">
|
||||
<span class="material-symbols-outlined" data-icon="monitoring">monitoring</span>
|
||||
<span class="font-medium text-[13px]">Analitik</span>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="px-4 mt-auto space-y-1">
|
||||
<button class="w-full bg-[#0D5E67] text-white py-2.5 rounded flex items-center justify-center gap-2 mb-4 hover:opacity-90 active:scale-[0.98] transition-transform">
|
||||
<span class="material-symbols-outlined text-sm" data-icon="add_circle">add_circle</span>
|
||||
<span class="text-[13px] font-bold">Scan Lot Baru</span>
|
||||
</button>
|
||||
<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 rounded cursor-pointer transition-all">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="font-medium text-[13px]">Pengaturan</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 rounded cursor-pointer transition-all">
|
||||
<span class="material-symbols-outlined" data-icon="contact_support">contact_support</span>
|
||||
<span class="font-medium text-[13px]">Bantuan</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-64 pt-14 min-h-screen bg-background">
|
||||
<div class="p-container-margin">
|
||||
<!-- Summary Header -->
|
||||
<div class="bg-surface-container-lowest border border-outline-variant p-6 rounded-lg mb-gutter shadow-sm">
|
||||
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="bg-primary-container text-on-primary-container p-3 rounded-lg">
|
||||
<span class="material-symbols-outlined text-3xl" data-icon="qr_code_2">qr_code_2</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-3">
|
||||
<h1 class="font-display-lot text-display-lot text-primary">LOT-WAL-2023-0892</h1>
|
||||
<span class="bg-[#D1E4FB] text-[#091D2E] text-[11px] font-bold px-2 py-0.5 rounded-full uppercase tracking-wider">Aktif</span>
|
||||
</div>
|
||||
<p class="text-secondary font-body-sm mt-1">Dibuat pada 14 Okt 2023 oleh Tim Operasional A</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-8 pr-4">
|
||||
<div class="text-center">
|
||||
<p class="font-label-caps text-outline uppercase">Kualitas</p>
|
||||
<p class="font-h1 text-on-surface">Super A++</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="font-label-caps text-outline uppercase">Jenis</p>
|
||||
<p class="font-h1 text-on-surface">Bentuk Mangkok</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="font-label-caps text-outline uppercase">Jumlah Saat Ini</p>
|
||||
<p class="font-h1 text-primary">12.450 kg</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bento Layout Content -->
|
||||
<div class="grid grid-cols-12 gap-gutter items-start">
|
||||
<!-- Left Column: Primary Data -->
|
||||
<div class="col-span-12 lg:col-span-8 space-y-gutter">
|
||||
<!-- Details Card & Qty Breakdown -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-gutter">
|
||||
<!-- Details Card -->
|
||||
<section class="bg-white border border-outline-variant rounded-lg p-5">
|
||||
<div class="flex items-center gap-2 mb-4 border-b border-surface-container pb-2">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="info">info</span>
|
||||
<h2 class="font-h2 text-primary">Detail Administrasi</h2>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<p class="font-label-caps text-outline uppercase mb-1">Pemasok</p>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded bg-surface-container flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-sm" data-icon="person">person</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-table-data text-on-surface">Borneo Harvest Co.</p>
|
||||
<p class="text-[11px] text-secondary">Akun BCA: **** 9012</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p class="font-label-caps text-outline uppercase mb-1">Ref. Penerimaan</p>
|
||||
<a class="text-[#0D5E67] font-table-data flex items-center gap-1 hover:underline" href="#">
|
||||
<span class="material-symbols-outlined text-xs" data-icon="link">link</span>
|
||||
RC-88192
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-caps text-outline uppercase mb-1">Gudang</p>
|
||||
<p class="font-table-data text-on-surface">Zona B-4 / Ruang Dingin</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Qty Breakdown -->
|
||||
<section class="bg-white border border-outline-variant rounded-lg p-5">
|
||||
<div class="flex items-center gap-2 mb-4 border-b border-surface-container pb-2">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="analytics">analytics</span>
|
||||
<h2 class="font-h2 text-primary">Audit Jumlah</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-y-4">
|
||||
<div>
|
||||
<p class="font-label-caps text-outline mb-1">Penerimaan Awal</p>
|
||||
<p class="font-table-data text-on-surface">15.000 kg</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-caps text-outline mb-1">Stok Tersedia</p>
|
||||
<p class="font-table-data text-primary text-base">12.450 kg</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-caps text-outline mb-1">Dipesan (Penjualan)</p>
|
||||
<p class="font-table-data text-[#7C4824]">2.000 kg</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-caps text-outline mb-1">Rusak/Susut</p>
|
||||
<p class="font-table-data text-error">0.550 kg</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 pt-3 border-t border-dashed border-surface-container">
|
||||
<div class="flex justify-between items-center text-[11px] text-secondary">
|
||||
<span>Verifikasi berat terakhir:</span>
|
||||
<span class="font-medium">Hari ini, 09:45 WIB</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Movement History Timeline -->
|
||||
<section class="bg-white border border-outline-variant rounded-lg p-5">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="route">route</span>
|
||||
<h2 class="font-h2 text-primary">Lini Masa Pergerakan & Pemrosesan</h2>
|
||||
</div>
|
||||
<button class="text-xs font-bold text-[#0D5E67] uppercase tracking-wider hover:underline">Lihat Log Lengkap</button>
|
||||
</div>
|
||||
<div class="space-y-6 pl-2 relative">
|
||||
<!-- Timeline items -->
|
||||
<div class="timeline-item flex gap-4 relative timeline-line pb-6">
|
||||
<div class="z-10 h-6 w-6 rounded-full bg-primary flex items-center justify-center border-4 border-white">
|
||||
<span class="material-symbols-outlined text-[12px] text-white" data-icon="check" data-weight="fill">check</span>
|
||||
</div>
|
||||
<div class="flex-1 -mt-0.5">
|
||||
<div class="flex justify-between">
|
||||
<p class="font-table-data text-on-surface">Alokasi Penjualan (LOT-RES-99)</p>
|
||||
<span class="text-[11px] text-secondary">21 Okt, 14:20</span>
|
||||
</div>
|
||||
<p class="text-body-sm text-secondary mt-1">2.000 kg dialokasikan untuk Pesanan #ORD-552. Dipesan di Zona B-4.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item flex gap-4 relative timeline-line pb-6">
|
||||
<div class="z-10 h-6 w-6 rounded-full bg-primary flex items-center justify-center border-4 border-white">
|
||||
<span class="material-symbols-outlined text-[12px] text-white" data-icon="check" data-weight="fill">check</span>
|
||||
</div>
|
||||
<div class="flex-1 -mt-0.5">
|
||||
<div class="flex justify-between">
|
||||
<p class="font-table-data text-on-surface">Perpindahan Gudang</p>
|
||||
<span class="text-[11px] text-secondary">18 Okt, 09:12</span>
|
||||
</div>
|
||||
<p class="text-body-sm text-secondary mt-1">Dipindahkan dari Ruang Pengeringan ke Ruang Dingin Zona B-4.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item flex gap-4 relative timeline-line pb-6">
|
||||
<div class="z-10 h-6 w-6 rounded-full bg-primary flex items-center justify-center border-4 border-white">
|
||||
<span class="material-symbols-outlined text-[12px] text-white" data-icon="check" data-weight="fill">check</span>
|
||||
</div>
|
||||
<div class="flex-1 -mt-0.5">
|
||||
<div class="flex justify-between">
|
||||
<p class="font-table-data text-on-surface">Penyortiran & Penentuan Kualitas Selesai</p>
|
||||
<span class="text-[11px] text-secondary">15 Okt, 11:30</span>
|
||||
</div>
|
||||
<p class="text-body-sm text-secondary mt-1">Lot dipecah dari Induk LOT-RAW-442. Disertifikasi sebagai Kualitas Super A++.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item flex gap-4 relative timeline-line">
|
||||
<div class="z-10 h-6 w-6 rounded-full bg-secondary flex items-center justify-center border-4 border-white">
|
||||
<span class="material-symbols-outlined text-[12px] text-white" data-icon="login">login</span>
|
||||
</div>
|
||||
<div class="flex-1 -mt-0.5">
|
||||
<div class="flex justify-between">
|
||||
<p class="font-table-data text-on-surface">Penerimaan Awal</p>
|
||||
<span class="text-[11px] text-secondary">14 Okt, 08:00</span>
|
||||
</div>
|
||||
<p class="text-body-sm text-secondary mt-1">Bahan mentah diterima dari Borneo Harvest Co. Berat: 15.000 kg.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<!-- Right Column: Sidebar Actions & Traceability -->
|
||||
<div class="col-span-12 lg:col-span-4 space-y-gutter">
|
||||
<!-- Actions Panel -->
|
||||
<section class="bg-[#0D5E67] rounded-lg p-5 text-white shadow-md">
|
||||
<h2 class="font-h2 text-white mb-4 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-white" data-icon="bolt">bolt</span>
|
||||
Aksi Cepat
|
||||
</h2>
|
||||
<div class="space-y-3">
|
||||
<button class="w-full bg-white/10 hover:bg-white/20 text-white font-bold py-3 rounded border border-white/20 flex items-center px-4 gap-3 transition-colors text-sm">
|
||||
<span class="material-symbols-outlined" data-icon="print">print</span>
|
||||
Cetak Label QR
|
||||
</button>
|
||||
<button class="w-full bg-white/10 hover:bg-white/20 text-white font-bold py-3 rounded border border-white/20 flex items-center px-4 gap-3 transition-colors text-sm">
|
||||
<span class="material-symbols-outlined" data-icon="sync_alt">sync_alt</span>
|
||||
Pindah Lokasi
|
||||
</button>
|
||||
<button class="w-full bg-white/10 hover:bg-white/20 text-white font-bold py-3 rounded border border-white/20 flex items-center px-4 gap-3 transition-colors text-sm">
|
||||
<span class="material-symbols-outlined" data-icon="edit_square">edit_square</span>
|
||||
Ubah Kualitas / Sortir
|
||||
</button>
|
||||
<button class="w-full bg-[#FFDAD6] hover:bg-[#FFB4AB] text-[#93000A] font-bold py-3 rounded flex items-center px-4 gap-3 transition-colors text-sm">
|
||||
<span class="material-symbols-outlined" data-icon="pan_tool">pan_tool</span>
|
||||
Tahan Lot
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Traceability Tree -->
|
||||
<section class="bg-white border border-outline-variant rounded-lg p-5">
|
||||
<div class="flex items-center gap-2 mb-5">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="account_tree">account_tree</span>
|
||||
<h2 class="font-h2 text-primary">Silsilah</h2>
|
||||
</div>
|
||||
<div class="space-y-6">
|
||||
<!-- Origin -->
|
||||
<div>
|
||||
<p class="font-label-caps text-outline uppercase mb-2">Asal (Induk)</p>
|
||||
<div class="p-3 border border-dashed border-primary/30 rounded bg-primary/5 flex justify-between items-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary text-sm" data-icon="subdirectory_arrow_right">subdirectory_arrow_right</span>
|
||||
<span class="font-table-data text-primary">LOT-RAW-442</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-outline cursor-pointer" data-icon="visibility">visibility</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Children -->
|
||||
<div>
|
||||
<p class="font-label-caps text-outline uppercase mb-2">Pecahan (Anak)</p>
|
||||
<div class="space-y-2">
|
||||
<div class="p-3 border border-surface-container rounded flex justify-between items-center group hover:bg-surface-container-low transition-colors">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-secondary text-sm" data-icon="chevron_right">chevron_right</span>
|
||||
<span class="font-table-data text-on-surface">LOT-SAL-8821</span>
|
||||
</div>
|
||||
<span class="text-[11px] text-secondary">Siap Ekspor</span>
|
||||
</div>
|
||||
<div class="p-3 border border-surface-container rounded flex justify-between items-center group hover:bg-surface-container-low transition-colors">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-secondary text-sm" data-icon="chevron_right">chevron_right</span>
|
||||
<span class="font-table-data text-on-surface">LOT-SAL-8822</span>
|
||||
</div>
|
||||
<span class="text-[11px] text-secondary">Menunggu QC</span>
|
||||
</div>
|
||||
<p class="text-[11px] text-center text-secondary py-1 italic">Akhir Silsilah</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- QR Preview Decorative Card -->
|
||||
<section class="bg-surface-container-high rounded-lg p-5 border border-outline-variant flex flex-col items-center">
|
||||
<div class="bg-white p-4 rounded shadow-inner mb-4 w-40 h-40 flex items-center justify-center">
|
||||
<img alt="Kode QR" class="w-full h-full opacity-80" data-alt="crisp black and white qr code centered on a clean white background with technical detail" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBSJS3qNrm63SEXbJ1lYDrJKwBXXyfWSC_UfWLYBEV40xSxNJy5tFptW0O3EXSFG24UB1TGmBWE2yIwztGUP119rFanYrw3iVBwelWbMLPjbbmALs5-mX1lnYM9_Skc18sM1K3uXVky2awroJhwz5xEC6BiwbhfGLqg5tzbup9-Bzhc9vKdTbJoy5Fz24OiwUtyLlRorFTPGvQSa09VkM4pIdiX_UiZcJn9m4UWuJdP4FAQUCOZ2DOAAXES-FbHFKtiYLpq5rfwuQ"/>
|
||||
</div>
|
||||
<p class="font-label-caps text-outline text-center">Label Dibuat Sistem</p>
|
||||
<p class="font-table-data text-on-surface-variant text-center mt-1">ID: LW-23-0892</p>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/lot_detail/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/lot_detail/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 351 KiB |
441
design-assets/stitch_abel_stock/master_jenis_grade/code.html
Normal file
441
design-assets/stitch_abel_stock/master_jenis_grade/code.html
Normal file
@ -0,0 +1,441 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-variant": "#e1e3e3",
|
||||
"tertiary-container": "#7c4824",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"primary": "#00454c",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"error": "#ba1a1a",
|
||||
"outline": "#6f797a",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"tertiary": "#60320f",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"surface-bright": "#f8fafa",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"on-primary-container": "#92d5df",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"on-surface": "#191c1d",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"surface-dim": "#d8dadb",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"surface-container": "#eceeee",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"on-error-container": "#93000a",
|
||||
"secondary": "#4e6073",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-background": "#191c1d",
|
||||
"inverse-surface": "#2e3131",
|
||||
"on-error": "#ffffff",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"primary-container": "#0d5e67",
|
||||
"background": "#f8fafa",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-tint": "#1d6871",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"surface": "#f8fafa",
|
||||
"on-secondary-container": "#526478"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter": "16px",
|
||||
"container-margin": "24px",
|
||||
"row-height-sm": "32px",
|
||||
"row-height-md": "48px",
|
||||
"compact-padding": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display-lot": ["Inter"],
|
||||
"body-base": ["Inter"],
|
||||
"label-caps": ["Inter"],
|
||||
"h2": ["Inter"],
|
||||
"h1": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"table-data": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"display-lot": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"h1": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "500"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
body {
|
||||
background-color: #f8fafa;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-base text-on-surface antialiased overflow-hidden flex h-screen">
|
||||
<!-- SideNavBar (Authority: JSON & Style Guidance) -->
|
||||
<aside class="fixed left-0 top-0 h-screen w-64 border-r border-slate-200 bg-slate-50 flex flex-col py-4 space-y-1 z-50">
|
||||
<div class="px-6 mb-8 flex items-center gap-3">
|
||||
<img alt="Warehouse Logo" class="w-8 h-8 rounded-lg" data-alt="professional minimalist logo for a bird's nest processing factory featuring clean lines and teal accents" src="https://lh3.googleusercontent.com/aida-public/AB6AXuADCM_hRlZSgRGssfTnenNlfEClLGWx_Yo-BLdLyVQF32Q7ftqZCYCyjFPDAmd6Q449SeFbwvY0NSI-3RAMg2wzw-1G_1n9Ji0aq5nWEv5BdYOUA2UdUWX-ZgCsCMCvEq4G66hs9OkymEy4DXc0eI0inak2qAR5tkzJ0tQT41PcA55caPszKr9Ay-OUOT0bNNaVmt-_lohu2hOPer-21sWC3oU0OCLlhTz1Hb-7OdSTNDgXbb8dBtICstF_XsYA9fejw0L-_8ZPFA"/>
|
||||
<div>
|
||||
<h1 class="text-teal-800 font-black tracking-tighter text-lg leading-none">SarangWMS</h1>
|
||||
<p class="text-[10px] text-slate-500 font-medium tracking-widest uppercase mt-1">Operational Hub</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 px-3 space-y-1">
|
||||
<a class="flex items-center px-3 py-2 text-slate-600 hover:text-teal-700 hover:bg-slate-100 transition-all duration-200 ease-in-out rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined mr-3 text-xl">dashboard</span>
|
||||
<span class="font-medium text-sm">Dashboard</span>
|
||||
</a>
|
||||
<!-- Active State: Master Data -->
|
||||
<a class="flex items-center px-3 py-2 bg-teal-50 text-teal-800 border-r-4 border-teal-600 transition-all duration-200 ease-in-out rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined mr-3 text-xl">database</span>
|
||||
<span class="font-medium text-sm">Master Data</span>
|
||||
</a>
|
||||
<a class="flex items-center px-3 py-2 text-slate-600 hover:text-teal-700 hover:bg-slate-100 transition-all duration-200 ease-in-out rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined mr-3 text-xl">inventory_2</span>
|
||||
<span class="font-medium text-sm">Inventory Logs</span>
|
||||
</a>
|
||||
<a class="flex items-center px-3 py-2 text-slate-600 hover:text-teal-700 hover:bg-slate-100 transition-all duration-200 ease-in-out rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined mr-3 text-xl">edit_note</span>
|
||||
<span class="font-medium text-sm">Stock Adjust</span>
|
||||
</a>
|
||||
<a class="flex items-center px-3 py-2 text-slate-600 hover:text-teal-700 hover:bg-slate-100 transition-all duration-200 ease-in-out rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined mr-3 text-xl">swap_horiz</span>
|
||||
<span class="font-medium text-sm">Transfers</span>
|
||||
</a>
|
||||
<a class="flex items-center px-3 py-2 text-slate-600 hover:text-teal-700 hover:bg-slate-100 transition-all duration-200 ease-in-out rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined mr-3 text-xl">verified</span>
|
||||
<span class="font-medium text-sm">QC Reports</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-3 pt-4 border-t border-slate-200 space-y-1">
|
||||
<button class="w-full flex items-center px-3 py-2 text-slate-600 hover:bg-slate-100 rounded-lg">
|
||||
<span class="material-symbols-outlined mr-3 text-xl">support_agent</span>
|
||||
<span class="font-medium text-sm">Support</span>
|
||||
</button>
|
||||
<button class="w-full flex items-center px-3 py-2 text-error hover:bg-red-50 rounded-lg">
|
||||
<span class="material-symbols-outlined mr-3 text-xl">logout</span>
|
||||
<span class="font-medium text-sm">Logout</span>
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="flex-1 ml-64 flex flex-col h-screen overflow-hidden">
|
||||
<!-- TopAppBar (Authority: JSON) -->
|
||||
<header class="flex justify-between items-center h-14 px-6 w-full z-40 bg-white border-b border-slate-200 sticky top-0">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-teal-800 font-bold text-lg">Sarang Inventory Pro</span>
|
||||
<div class="h-4 w-px bg-slate-300 mx-2"></div>
|
||||
<h2 class="font-h1 text-h1 text-on-surface">Master Jenis & Grade</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex items-center gap-4 text-slate-500">
|
||||
<span class="material-symbols-outlined cursor-pointer hover:text-teal-700 transition-colors">notifications</span>
|
||||
<span class="material-symbols-outlined cursor-pointer hover:text-teal-700 transition-colors">settings</span>
|
||||
<span class="material-symbols-outlined cursor-pointer hover:text-teal-700 transition-colors">help_outline</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 pl-4 border-l border-slate-200">
|
||||
<div class="text-right">
|
||||
<p class="text-sm font-bold text-teal-900 leading-tight">Admin Gudang</p>
|
||||
<p class="text-[10px] text-slate-500 uppercase tracking-tighter">Superuser</p>
|
||||
</div>
|
||||
<img alt="Manager Avatar" class="w-8 h-8 rounded-full ring-2 ring-teal-50" data-alt="close up profile photo of a professional warehouse manager in office attire" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCRFmLATnCBjyyO2ekXhznh65JBnErrXJsEs2x9HALMpbtPVFsDFFhbPTpZklV2mPY86iaOgKyDeGA9NT-etVWi_gtYsl9RVwLPYB3PdRwU5nLzEGmmSt-O8wg6LwVJXG3OvdFwKGQeDi8YBMlZcaF02enJPAMGmSSmbO0-0GuVy-bw0IMbKOF8lMF5jlYg7_WYv1SAqoIYihRXQvNK93l5JNM1-eYDOQAHk09fa2QwdoAJaPO4S0Hb86THN9MjNHM6dCa22_C5jg"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Canvas Area -->
|
||||
<div class="flex-1 p-6 overflow-y-auto bg-surface space-y-6">
|
||||
<!-- Action Bar -->
|
||||
<div class="flex justify-between items-end">
|
||||
<div>
|
||||
<h3 class="font-h2 text-h2 text-primary">Standardisasi Produk</h3>
|
||||
<p class="text-body-sm text-on-surface-variant">Konfigurasi standar kualitas dan harga untuk operasional gudang.</p>
|
||||
</div>
|
||||
<button class="bg-primary text-on-primary px-4 py-2 rounded shadow-sm hover:opacity-90 transition-all flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-lg">add_circle</span>
|
||||
<span class="font-medium text-sm">Tambah Jenis/Grade</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Bento Statistics Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div class="bg-white border border-outline-variant p-4 rounded-xl flex flex-col justify-between">
|
||||
<span class="text-label-caps text-on-surface-variant uppercase">Total Jenis</span>
|
||||
<div class="mt-2 flex items-baseline gap-2">
|
||||
<span class="text-display-lot text-primary">12</span>
|
||||
<span class="text-xs text-secondary-fixed-dim font-bold">+2 bulan ini</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-outline-variant p-4 rounded-xl flex flex-col justify-between">
|
||||
<span class="text-label-caps text-on-surface-variant uppercase">Grade Aktif</span>
|
||||
<div class="mt-2 flex items-baseline gap-2">
|
||||
<span class="text-display-lot text-primary">4</span>
|
||||
<span class="text-xs text-on-surface-variant">AAA, AA, A, B</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-outline-variant p-4 rounded-xl flex flex-col justify-between">
|
||||
<span class="text-label-caps text-on-surface-variant uppercase">Harga Standard (Rata-rata)</span>
|
||||
<div class="mt-2 flex items-baseline gap-2">
|
||||
<span class="text-display-lot text-primary">14.2M</span>
|
||||
<span class="text-xs text-on-surface-variant">IDR/Kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-outline-variant p-4 rounded-xl flex flex-col justify-between">
|
||||
<span class="text-label-caps text-on-surface-variant uppercase">Terakhir Update</span>
|
||||
<div class="mt-2 flex items-baseline gap-2 text-on-surface-variant">
|
||||
<span class="material-symbols-outlined text-lg">history</span>
|
||||
<span class="text-body-base">Hari ini, 09:12</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Table Section -->
|
||||
<div class="bg-white border border-outline-variant rounded-xl overflow-hidden shadow-sm">
|
||||
<div class="px-6 py-4 border-b border-outline-variant flex justify-between items-center bg-slate-50/50">
|
||||
<div class="flex items-center gap-3 bg-white border border-outline-variant px-3 py-1.5 rounded-lg w-72">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">search</span>
|
||||
<input class="border-none focus:ring-0 p-0 text-sm bg-transparent w-full placeholder:text-slate-400" placeholder="Cari jenis atau kualitas..." type="text"/>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="p-2 hover:bg-surface-container rounded-lg transition-colors border border-outline-variant bg-white">
|
||||
<span class="material-symbols-outlined text-xl text-on-surface-variant">filter_list</span>
|
||||
</button>
|
||||
<button class="p-2 hover:bg-surface-container rounded-lg transition-colors border border-outline-variant bg-white">
|
||||
<span class="material-symbols-outlined text-xl text-on-surface-variant">download</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-slate-50 border-b border-outline-variant">
|
||||
<th class="px-6 py-4 text-label-caps text-on-surface-variant uppercase">Nama Jenis</th>
|
||||
<th class="px-6 py-4 text-label-caps text-on-surface-variant uppercase text-center">Grade</th>
|
||||
<th class="px-6 py-4 text-label-caps text-on-surface-variant uppercase">Deskripsi Kualitas</th>
|
||||
<th class="px-6 py-4 text-label-caps text-on-surface-variant uppercase text-right">Harga Beli (IDR)</th>
|
||||
<th class="px-6 py-4 text-label-caps text-on-surface-variant uppercase text-right">Harga Jual (IDR)</th>
|
||||
<th class="px-6 py-4 text-label-caps text-on-surface-variant uppercase text-center">Status</th>
|
||||
<th class="px-6 py-4 text-label-caps text-on-surface-variant uppercase"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-outline-variant">
|
||||
<!-- Row 1 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded bg-teal-100 flex items-center justify-center text-teal-800">
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-table-data text-on-surface">Mangkok Putih</p>
|
||||
<p class="text-[11px] text-on-surface-variant uppercase">ID: BRG-001</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<span class="px-2.5 py-0.5 rounded-full bg-primary text-on-primary text-[11px] font-bold">AAA</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<p class="text-body-sm text-on-surface max-w-xs truncate">Warna putih kristal, bentuk sempurna, kadar air < 12%</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right font-table-data">14,500,000</td>
|
||||
<td class="px-6 py-4 text-right font-table-data text-primary">18,200,000</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<span class="inline-flex items-center rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">Aktif</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined">more_vert</span></button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded bg-slate-100 flex items-center justify-center text-slate-800">
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-table-data text-on-surface">Mangkok Putih</p>
|
||||
<p class="text-[11px] text-on-surface-variant uppercase">ID: BRG-002</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<span class="px-2.5 py-0.5 rounded-full bg-teal-600 text-on-primary text-[11px] font-bold">AA</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<p class="text-body-sm text-on-surface max-w-xs truncate">Putih bersih, ada sedikit serabut, bentuk utuh</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right font-table-data">12,200,000</td>
|
||||
<td class="px-6 py-4 text-right font-table-data text-primary">15,800,000</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<span class="inline-flex items-center rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">Aktif</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined">more_vert</span></button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded bg-orange-50 flex items-center justify-center text-orange-800">
|
||||
<span class="material-symbols-outlined text-orange-400">inventory_2</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-table-data text-on-surface">Sudut/Patahan</p>
|
||||
<p class="text-[11px] text-on-surface-variant uppercase">ID: BRG-045</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<span class="px-2.5 py-0.5 rounded-full bg-tertiary text-on-tertiary text-[11px] font-bold">B</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<p class="text-body-sm text-on-surface max-w-xs truncate">Patahan besar, warna putih krem, bersih</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right font-table-data">8,500,000</td>
|
||||
<td class="px-6 py-4 text-right font-table-data text-primary">11,200,000</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<span class="inline-flex items-center rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">Aktif</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined">more_vert</span></button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded bg-slate-100 flex items-center justify-center text-slate-800">
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-table-data text-on-surface">Plontos Putih</p>
|
||||
<p class="text-[11px] text-on-surface-variant uppercase">ID: BRG-009</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<span class="px-2.5 py-0.5 rounded-full bg-teal-500 text-on-primary text-[11px] font-bold">A</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<p class="text-body-sm text-on-surface max-w-xs truncate">Warna putih, bentuk segitiga/setengah mangkok</p>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right font-table-data">10,500,000</td>
|
||||
<td class="px-6 py-4 text-right font-table-data text-primary">13,400,000</td>
|
||||
<td class="px-6 py-4 text-center">
|
||||
<span class="inline-flex items-center rounded-full bg-slate-100 px-2 py-1 text-xs font-medium text-slate-600 ring-1 ring-inset ring-slate-500/20">Draft</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined">more_vert</span></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Pagination -->
|
||||
<div class="px-6 py-3 border-t border-outline-variant flex items-center justify-between bg-white">
|
||||
<span class="text-body-sm text-on-surface-variant">Menampilkan 1-4 dari 12 data</span>
|
||||
<div class="flex gap-1">
|
||||
<button class="p-1 border border-outline-variant rounded hover:bg-slate-50 disabled:opacity-50" disabled="">
|
||||
<span class="material-symbols-outlined text-sm">chevron_left</span>
|
||||
</button>
|
||||
<button class="px-2.5 py-1 text-xs font-bold bg-primary text-on-primary rounded">1</button>
|
||||
<button class="px-2.5 py-1 text-xs font-medium border border-outline-variant rounded hover:bg-slate-50">2</button>
|
||||
<button class="px-2.5 py-1 text-xs font-medium border border-outline-variant rounded hover:bg-slate-50">3</button>
|
||||
<button class="p-1 border border-outline-variant rounded hover:bg-slate-50">
|
||||
<span class="material-symbols-outlined text-sm">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Legend/Info Section -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="p-4 bg-secondary-container text-on-secondary-container rounded-xl">
|
||||
<h4 class="font-h2 text-sm mb-2 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-lg">info</span>
|
||||
Catatan Standardisasi
|
||||
</h4>
|
||||
<ul class="text-body-sm space-y-1.5 opacity-90">
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="w-1 h-1 rounded-full bg-current mt-2 shrink-0"></span>
|
||||
Harga standard direfresh setiap hari Senin pukul 08:00 WIB.
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="w-1 h-1 rounded-full bg-current mt-2 shrink-0"></span>
|
||||
Selisih harga jual-beli dipatok minimal 15% untuk operasional.
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="w-1 h-1 rounded-full bg-current mt-2 shrink-0"></span>
|
||||
QC wajib mengacu pada deskripsi kualitas di atas untuk grading Lot baru.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="p-4 border border-outline-variant bg-white rounded-xl">
|
||||
<h4 class="font-h2 text-sm text-on-surface mb-3 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-lg">trending_up</span>
|
||||
Analisis Margin Terakhir
|
||||
</h4>
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<div class="flex justify-between text-[11px] font-bold mb-1 uppercase text-on-surface-variant">
|
||||
<span>Mangkok Putih AAA</span>
|
||||
<span>25.5% Margin</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-primary h-full w-[75%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex justify-between text-[11px] font-bold mb-1 uppercase text-on-surface-variant">
|
||||
<span>Sudut/Patahan B</span>
|
||||
<span>31.7% Margin</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-teal-500 h-full w-[88%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- FAB for Quick Actions (Mobile/Contextual) -->
|
||||
<button class="fixed bottom-6 right-6 w-14 h-14 bg-primary text-on-primary rounded-full shadow-lg flex items-center justify-center hover:scale-105 transition-transform md:hidden">
|
||||
<span class="material-symbols-outlined text-3xl">add</span>
|
||||
</button>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/master_jenis_grade/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/master_jenis_grade/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 274 KiB |
393
design-assets/stitch_abel_stock/pencarian_scan_qr/code.html
Normal file
393
design-assets/stitch_abel_stock/pencarian_scan_qr/code.html
Normal file
@ -0,0 +1,393 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-primary-container": "#92d5df",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-tint": "#1d6871",
|
||||
"primary": "#00454c",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"on-background": "#191c1d",
|
||||
"tertiary": "#60320f",
|
||||
"surface": "#f8fafa",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-surface": "#191c1d",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"error": "#ba1a1a",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"error-container": "#ffdad6",
|
||||
"on-error": "#ffffff",
|
||||
"surface-variant": "#e1e3e3",
|
||||
"outline": "#6f797a",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"on-secondary-container": "#526478",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"tertiary-container": "#7c4824",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"surface-bright": "#f8fafa",
|
||||
"secondary": "#4e6073",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"primary-container": "#0d5e67",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"surface-dim": "#d8dadb",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"background": "#f8fafa",
|
||||
"surface-container": "#eceeee",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"inverse-surface": "#2e3131"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter": "16px",
|
||||
"row-height-sm": "32px",
|
||||
"row-height-md": "48px",
|
||||
"container-margin": "24px",
|
||||
"compact-padding": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display-lot": ["Inter"],
|
||||
"h2": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"label-caps": ["Inter"],
|
||||
"body-base": ["Inter"],
|
||||
"table-data": ["Inter"],
|
||||
"h1": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"display-lot": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "500"}],
|
||||
"h1": ["20px", {"lineHeight": "28px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-surface font-body-base text-on-surface antialiased">
|
||||
<!-- TopNavBar -->
|
||||
<header class="fixed top-0 left-0 w-full z-40 flex justify-between items-center px-6 h-16 bg-white border-b border-slate-200 shadow-sm">
|
||||
<div class="flex items-center gap-3">
|
||||
<img alt="Sistem Inventaris Walet Logo" class="h-8 w-8 object-contain" data-alt="Minimalist teal-colored logo of a swiftlet bird in flight, vector style, professional corporate identity" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCWamUWCmb6jDBEfnKTi3DTRQmiQ2AD05-b1F1ql2KW1lw_Plh3v4IROiWLjSfBlzQnzVST04eptbZLLz6qR0poRRyIA4ij95JJFsbXYj00KuTQg5HiKrspMIsOpoIiQY--2FdKNeYg4wCsb2N8MP-DX8nt_5g2v5LPB2FT15afsZbj3pw5Rr8014jESizXmSp6F14K_m7UY53ma9p5U_FkIfGI8yJ6qYTBPthfATPWV7eamUQcH94S2CqlNNw-VzkGvpGwtkXZDg"/>
|
||||
<span class="font-inter text-xl font-bold text-teal-700">Sistem Inventaris Walet</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative hidden md:block">
|
||||
<input class="bg-slate-50 border-none rounded-lg px-4 py-2 text-sm w-64 focus:ring-2 focus:ring-primary" placeholder="Cari data lot..." type="text"/>
|
||||
<span class="material-symbols-outlined absolute right-3 top-2 text-slate-400">search</span>
|
||||
</div>
|
||||
<button class="p-2 hover:bg-slate-50 transition-colors rounded-full">
|
||||
<span class="material-symbols-outlined text-slate-500">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 hover:bg-slate-50 transition-colors rounded-full">
|
||||
<span class="material-symbols-outlined text-slate-500">help_outline</span>
|
||||
</button>
|
||||
<button class="ml-2 bg-primary text-on-primary px-4 py-2 rounded-lg text-sm font-semibold flex items-center gap-2 active:opacity-80 transition-all duration-150">
|
||||
<span class="material-symbols-outlined text-sm">qr_code_scanner</span>
|
||||
Scan Barcode
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<!-- SideNavBar -->
|
||||
<aside class="fixed left-0 top-0 h-full w-64 flex flex-col py-6 bg-slate-50 border-r border-slate-200 z-30 pt-20">
|
||||
<div class="px-6 mb-8 flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-lg bg-teal-100 flex items-center justify-center text-teal-700">
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-inter text-lg font-black text-teal-800">Inventory Walet</p>
|
||||
<p class="font-inter text-[10px] font-medium uppercase tracking-wider text-slate-500">Sistem Traceability</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1 px-2">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-transform duration-200" href="#">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span class="font-inter text-xs font-medium uppercase tracking-wider">Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-transform duration-200" href="#">
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
<span class="font-inter text-xs font-medium uppercase tracking-wider">Laporan Stok</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-transform duration-200" href="#">
|
||||
<span class="material-symbols-outlined">database</span>
|
||||
<span class="font-inter text-xs font-medium uppercase tracking-wider">Data Master</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 bg-teal-50 text-teal-700 rounded-r-lg border-l-4 border-teal-700 transition-transform duration-200" href="#">
|
||||
<span class="material-symbols-outlined">qr_code_scanner</span>
|
||||
<span class="font-inter text-xs font-medium uppercase tracking-wider">Pelacakan</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-transform duration-200" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="font-inter text-xs font-medium uppercase tracking-wider">Pengaturan</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-4 py-6 border-t border-slate-200 space-y-2">
|
||||
<button class="w-full bg-primary text-on-primary py-3 rounded-lg font-bold text-xs uppercase tracking-widest active:scale-95 duration-75">
|
||||
Tambah Lot Baru
|
||||
</button>
|
||||
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-sm">help</span>
|
||||
<span class="font-inter text-xs font-medium uppercase tracking-wider">Bantuan</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 hover:text-error transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-sm">logout</span>
|
||||
<span class="font-inter text-xs font-medium uppercase tracking-wider">Log Keluar</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content -->
|
||||
<main class="ml-64 pt-16 min-h-screen">
|
||||
<div class="p-container-margin">
|
||||
<!-- Header Section -->
|
||||
<div class="mb-8 flex flex-col md:flex-row md:items-end justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="font-h1 text-h1 text-on-surface mb-1">Scan Lookup</h1>
|
||||
<p class="font-body-base text-body-base text-on-surface-variant">Pencarian cepat status dan histori lot sarang burung walet.</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-slate-400 font-label-caps uppercase">
|
||||
<span class="material-symbols-outlined text-sm">schedule</span>
|
||||
Terakhir diperbarui: 12 Okt 2023, 14:30
|
||||
</div>
|
||||
</div>
|
||||
<!-- Lookup Dashboard Grid -->
|
||||
<div class="grid grid-cols-12 gap-6">
|
||||
<!-- Left: Scan & Input Panel -->
|
||||
<div class="col-span-12 lg:col-span-4 space-y-6">
|
||||
<div class="bg-white p-6 rounded-xl border border-outline-variant shadow-sm">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="font-h2 text-h2 text-primary">Input Lot ID</h2>
|
||||
<span class="material-symbols-outlined text-primary">camera_alt</span>
|
||||
</div>
|
||||
<!-- QR Scanner Placeholder UI -->
|
||||
<div class="relative aspect-square w-full bg-slate-900 rounded-lg overflow-hidden mb-6 flex items-center justify-center">
|
||||
<div class="absolute inset-0 opacity-20" style="background-image: radial-gradient(circle, #ffffff 1px, transparent 1px); background-size: 20px 20px;"></div>
|
||||
<div class="relative z-10 text-center">
|
||||
<div class="w-48 h-48 border-2 border-primary border-dashed rounded-2xl flex items-center justify-center mb-4 relative">
|
||||
<div class="absolute -top-1 -left-1 w-6 h-6 border-t-4 border-l-4 border-primary"></div>
|
||||
<div class="absolute -top-1 -right-1 w-6 h-6 border-t-4 border-r-4 border-primary"></div>
|
||||
<div class="absolute -bottom-1 -left-1 w-6 h-6 border-b-4 border-l-4 border-primary"></div>
|
||||
<div class="absolute -bottom-1 -right-1 w-6 h-6 border-b-4 border-r-4 border-primary"></div>
|
||||
<span class="material-symbols-outlined text-white text-6xl opacity-20">qr_code_2</span>
|
||||
</div>
|
||||
<p class="text-white text-body-sm font-medium">Arahkan kamera ke QR Code</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block font-label-caps text-on-surface-variant uppercase mb-2">Masukkan Manual ID</label>
|
||||
<div class="relative">
|
||||
<input class="w-full bg-surface-container-low border border-outline-variant rounded-lg px-4 py-3 font-display-lot text-primary focus:ring-2 focus:ring-primary focus:outline-none transition-all" type="text" value="LOT-2023-XB99"/>
|
||||
<button class="absolute right-2 top-2 p-1.5 bg-primary text-on-primary rounded">
|
||||
<span class="material-symbols-outlined text-lg">search</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full py-4 border-2 border-primary text-primary font-bold rounded-lg hover:bg-primary/5 transition-colors flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined">image</span>
|
||||
Unggah dari Galeri
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Quick Stats Card -->
|
||||
<div class="bg-secondary-container p-6 rounded-xl border border-secondary/20">
|
||||
<h2 class="font-h2 text-h2 text-on-secondary-container mb-4">Statistik Pencarian</h2>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-body-sm text-secondary">Total Scan Hari Ini</span>
|
||||
<span class="font-bold text-on-secondary-container">142 Scan</span>
|
||||
</div>
|
||||
<div class="w-full bg-white/50 h-1.5 rounded-full overflow-hidden">
|
||||
<div class="bg-primary h-full w-[75%]"></div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center text-xs text-secondary italic">
|
||||
<span>Target harian: 200 lot</span>
|
||||
<span>71% tercapai</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right: Result Panel -->
|
||||
<div class="col-span-12 lg:col-span-8 space-y-6">
|
||||
<!-- Result Card Header -->
|
||||
<div class="bg-white rounded-xl border border-outline-variant shadow-sm overflow-hidden">
|
||||
<div class="bg-primary p-6 text-on-primary flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
||||
<div>
|
||||
<p class="font-label-caps text-on-primary-container uppercase opacity-80 mb-1">Lot Identifikasi</p>
|
||||
<h2 class="font-display-lot text-display-lot tracking-tight">LOT-2023-XB99</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 bg-white/10 px-4 py-2 rounded-lg backdrop-blur-sm">
|
||||
<span class="material-symbols-outlined text-lg" style="font-variation-settings: 'FILL' 1;">verified</span>
|
||||
<span class="font-h2 text-h2">Terverifikasi QC</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Data Grid -->
|
||||
<div class="p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 border-b border-slate-100">
|
||||
<div>
|
||||
<p class="font-label-caps text-on-surface-variant uppercase mb-1">Status Saat Ini</p>
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full bg-green-100 text-green-800 text-xs font-bold border border-green-200">
|
||||
Siap Ekspor
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-caps text-on-surface-variant uppercase mb-1">Berat Bersih</p>
|
||||
<p class="font-h2 text-h2 text-primary">2.450 <span class="text-xs font-medium text-on-surface-variant">kg</span></p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-caps text-on-surface-variant uppercase mb-1">Kualitas / Grade</p>
|
||||
<p class="font-h2 text-h2 text-primary">Super AAA</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-caps text-on-surface-variant uppercase mb-1">Kadar Air</p>
|
||||
<p class="font-h2 text-h2 text-primary">12.5 <span class="text-xs font-medium text-on-surface-variant">%</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<!-- Traceability List -->
|
||||
<div>
|
||||
<h3 class="font-h2 text-h2 text-on-surface mb-4">Riwayat Perjalanan</h3>
|
||||
<div class="space-y-6 relative before:content-[''] before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-[2px] before:bg-slate-200">
|
||||
<div class="relative pl-10">
|
||||
<div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-primary flex items-center justify-center z-10">
|
||||
<span class="material-symbols-outlined text-[12px] text-white">warehouse</span>
|
||||
</div>
|
||||
<p class="font-h2 text-[14px] leading-tight">Gudang Penyimpanan Final</p>
|
||||
<p class="text-body-sm text-on-surface-variant">Seksi C - Rak 04 | 12 Okt 2023, 09:15</p>
|
||||
</div>
|
||||
<div class="relative pl-10">
|
||||
<div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-slate-200 flex items-center justify-center z-10">
|
||||
<span class="material-symbols-outlined text-[12px] text-slate-500">fact_check</span>
|
||||
</div>
|
||||
<p class="font-h2 text-[14px] leading-tight">Pengecekan Kualitas Akhir</p>
|
||||
<p class="text-body-sm text-on-surface-variant">QC Passed oleh Budi S. | 11 Okt 2023, 15:40</p>
|
||||
</div>
|
||||
<div class="relative pl-10">
|
||||
<div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-slate-200 flex items-center justify-center z-10">
|
||||
<span class="material-symbols-outlined text-[12px] text-slate-500">dry_cleaning</span>
|
||||
</div>
|
||||
<p class="font-h2 text-[14px] leading-tight">Tahap Pengeringan</p>
|
||||
<p class="text-body-sm text-on-surface-variant">Suhu 35°C - Kelembaban 40% | 10 Okt 2023</p>
|
||||
</div>
|
||||
<div class="relative pl-10">
|
||||
<div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-slate-200 flex items-center justify-center z-10">
|
||||
<span class="material-symbols-outlined text-[12px] text-slate-500">inventory</span>
|
||||
</div>
|
||||
<p class="font-h2 text-[14px] leading-tight">Penerimaan Bahan Baku</p>
|
||||
<p class="text-body-sm text-on-surface-variant">Dari Vendor: Lestari Alam | 08 Okt 2023</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Map & Location Details -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="font-h2 text-h2 text-on-surface">Lokasi Saat Ini</h3>
|
||||
<div class="rounded-lg overflow-hidden border border-outline-variant h-40 bg-slate-100 relative group">
|
||||
<img alt="Map of warehouse location" class="w-full h-full object-cover grayscale opacity-60 group-hover:grayscale-0 transition-all duration-500" data-alt="Schematic professional architectural map of a large industrial warehouse interior layout with highlighted storage sections" data-location="Jakarta Warehouse" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBS6ZmJgtHXJQmNnGnKU_PX4qPwtyi18w8NfPSZSk_HSea76pLF0SA39Oq6hSlH2OISE36WBe_7WGcRYm0acIargHvLBihVzsR4KbEQHrcBr1EJQocg7VvphDUliBN3sVCNsTw6IK9gbu93Kwj6r-wt4-jJli6RhDgkvf_vOx0AY6yK5FqhGd1CU703wY0zH2Hsw8p5qrYFpB2Rw7DdrKvocElq2HNPzvw85u3MRSmZZaAgZ0chwrELqdvod_4FOVjJKFPUDPeVmg"/>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-10 h-10 bg-primary/20 rounded-full animate-ping absolute"></div>
|
||||
<span class="material-symbols-outlined text-primary text-4xl relative z-10" style="font-variation-settings: 'FILL' 1;">location_on</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 bg-surface-container-low rounded-lg border border-outline-variant">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-primary">apartment</span>
|
||||
<div>
|
||||
<p class="font-h2 text-[14px]">Gudang Utama Jakarta</p>
|
||||
<p class="text-xs text-on-surface-variant">Jl. Industri Walet No. 8, Jakarta Utara</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="flex-1 py-3 bg-primary text-on-primary rounded-lg font-bold text-xs uppercase tracking-widest active:scale-95 transition-all">Cetak Label</button>
|
||||
<button class="flex-1 py-3 border-2 border-primary text-primary rounded-lg font-bold text-xs uppercase tracking-widest active:scale-95 transition-all">Pindahkan Lot</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Related Lots / Items -->
|
||||
<div class="bg-white rounded-xl border border-outline-variant shadow-sm overflow-hidden">
|
||||
<div class="p-6 border-b border-slate-100 flex justify-between items-center">
|
||||
<h2 class="font-h2 text-h2 text-on-surface">Lot Terkait dalam Pengiriman</h2>
|
||||
<button class="text-primary font-bold text-xs uppercase hover:underline">Lihat Semua</button>
|
||||
</div>
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-slate-50">
|
||||
<th class="px-6 py-3 text-left font-label-caps text-on-surface-variant uppercase">Lot ID</th>
|
||||
<th class="px-6 py-3 text-left font-label-caps text-on-surface-variant uppercase">Berat</th>
|
||||
<th class="px-6 py-3 text-left font-label-caps text-on-surface-variant uppercase">Grade</th>
|
||||
<th class="px-6 py-3 text-left font-label-caps text-on-surface-variant uppercase">Status</th>
|
||||
<th class="px-6 py-3 text-right"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="border-t border-slate-100 hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-4 font-table-data">LOT-2023-XB97</td>
|
||||
<td class="px-6 py-4 font-table-data">1.200 kg</td>
|
||||
<td class="px-6 py-4 font-table-data">Super AAA</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2 py-0.5 rounded-full bg-green-100 text-green-700 text-[10px] font-bold">READY</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-primary"><span class="material-symbols-outlined text-lg">open_in_new</span></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-t border-slate-100 hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-4 font-table-data">LOT-2023-XB98</td>
|
||||
<td class="px-6 py-4 font-table-data">0.850 kg</td>
|
||||
<td class="px-6 py-4 font-table-data">Grade A</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2 py-0.5 rounded-full bg-green-100 text-green-700 text-[10px] font-bold">READY</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="text-primary"><span class="material-symbols-outlined text-lg">open_in_new</span></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Floating Action Button (for Mobile Quick Scan) -->
|
||||
<button class="md:hidden fixed bottom-6 right-6 w-14 h-14 bg-primary text-on-primary rounded-full shadow-lg flex items-center justify-center z-50">
|
||||
<span class="material-symbols-outlined">qr_code_scanner</span>
|
||||
</button>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/pencarian_scan_qr/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/pencarian_scan_qr/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 356 KiB |
260
design-assets/stitch_abel_stock/picking_gudang_mobile/code.html
Normal file
260
design-assets/stitch_abel_stock/picking_gudang_mobile/code.html
Normal file
@ -0,0 +1,260 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Sarang Ops - Layar Picking</title>
|
||||
<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;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background min-h-screen flex flex-col">
|
||||
<!-- Top Navigation Bar (Shared Component) -->
|
||||
<header class="flex justify-between items-center h-14 px-6 w-full bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 shadow-sm fixed top-0 z-40">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-[#0D5E67] cursor-pointer" data-icon="arrow_back">arrow_back</span>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-lg font-bold text-[#0D5E67] dark:text-white tracking-tight">SO-2023-0892</span>
|
||||
<span class="font-label-caps text-[10px] text-slate-500 uppercase">Sales Order</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="material-symbols-outlined text-slate-600 dark:text-slate-400 cursor-pointer" data-icon="help_outline">help_outline</span>
|
||||
<div class="w-8 h-8 rounded-full overflow-hidden border border-slate-200">
|
||||
<img alt="User profile" data-alt="Professional warehouse supervisor portrait, clean lighting, corporate style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCCkepvjR3I1p1wdJoIsFS8IwnyZQxlMnyYHJqw49QRUHHDhreZhQW37jb1v8LskeLDEXCYCRIYH2bHl96R0-FR7o3F-iM-S7yIcMfVUhf5_TZQ5-9fonMWY8RuDfQhE-si_sbADGtaDFdtxNwDDoON5Pv_2_D4-P1O5CuG6c6ya8-hq7mHSpXrQ8MAwXvl_uEl0fIBWq9ttAK1oL2HeksnxrWsEAcvmyZTunSun7dgqQxh5JAEDi0l72wB9XXpb7NgkMK8pUvcBQ"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="flex-grow pt-20 pb-24 px-4 max-w-md mx-auto w-full">
|
||||
<!-- Progress Summary Card -->
|
||||
<section class="bg-white rounded-xl border border-outline-variant p-4 mb-6 shadow-sm">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<h2 class="font-h2 text-on-surface">Progres Pengambilan</h2>
|
||||
<span class="font-display-lot text-primary">2/5 <span class="text-body-sm font-normal text-slate-500">Item</span></span>
|
||||
</div>
|
||||
<div class="w-full bg-surface-container-high rounded-full h-2.5">
|
||||
<div class="bg-primary h-2.5 rounded-full" style="width: 40%"></div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-2">
|
||||
<span class="text-body-sm text-slate-500">40% Selesai</span>
|
||||
<span class="text-body-sm text-slate-500">3 Tersisa</span>
|
||||
</div>
|
||||
</section>
|
||||
<!-- QR Scanner Area -->
|
||||
<section class="mb-6">
|
||||
<div class="relative rounded-xl overflow-hidden aspect-square bg-black flex items-center justify-center border-4 border-primary/20">
|
||||
<div class="absolute inset-0 opacity-40">
|
||||
<img class="w-full h-full object-cover" data-alt="Close up of a person using a mobile phone to scan a QR code on a package in a warehouse" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCijmxb9rtn-wW11U0C9Equb_H6JTRcUEKWd38nCFMJGCHFHVRpCNtclbCqcihhPopzqj-QPGjV5bhf7nJfvQ91sFUB_ikXaYKtYRArdGihBpEM-GA1R9_XJAJhhrURDw7Hu6UxlBlsAqc9xa2NNWAT_VaMaOR0hTD9-KWkrBLzXHk0vBr8F_XcMdf5RvAVmYpg0IjOemal9IyBq0LPqI9q7NvYNFToyeOrdV3KPUd-XTx-DzYC88FVzDuvee2VAgF4MpAByF76_Q"/>
|
||||
</div>
|
||||
<!-- Scanner Overlay -->
|
||||
<div class="relative z-10 w-48 h-48 border-2 border-white/80 rounded-lg">
|
||||
<div class="absolute -top-1 -left-1 w-6 h-6 border-t-4 border-l-4 border-primary-fixed-dim"></div>
|
||||
<div class="absolute -top-1 -right-1 w-6 h-6 border-t-4 border-r-4 border-primary-fixed-dim"></div>
|
||||
<div class="absolute -bottom-1 -left-1 w-6 h-6 border-b-4 border-l-4 border-primary-fixed-dim"></div>
|
||||
<div class="absolute -bottom-1 -right-1 w-6 h-6 border-b-4 border-r-4 border-primary-fixed-dim"></div>
|
||||
<!-- Scanning Line -->
|
||||
<div class="w-full h-0.5 bg-primary-fixed-dim shadow-[0_0_15px_#8ed1db] absolute top-1/2 -translate-y-1/2"></div>
|
||||
</div>
|
||||
<div class="absolute bottom-4 left-0 right-0 text-center">
|
||||
<span class="bg-black/60 text-white px-3 py-1 rounded-full text-body-sm backdrop-blur-sm">Scan QR Code pada Lot</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Item List / Picking Queue -->
|
||||
<div class="space-y-4">
|
||||
<h3 class="font-label-caps text-slate-500 mb-2">DAFTAR ITEM TERJADWAL</h3>
|
||||
<!-- Item Card: Active/Next -->
|
||||
<div class="bg-white border-2 border-primary rounded-xl p-4 shadow-sm relative overflow-hidden">
|
||||
<div class="absolute top-0 right-0 bg-primary text-white px-3 py-1 text-[10px] font-bold rounded-bl-lg">AKTIF</div>
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<span class="font-display-lot text-lg block">LOT-SW-23110</span>
|
||||
<span class="font-label-caps text-primary">GRADE AAA+</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="font-label-caps text-slate-500 block">LOKASI RAK</span>
|
||||
<span class="font-h2 text-primary">A1-22-B</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4 py-3 border-y border-slate-100 my-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-body-sm text-slate-500">Target Qty</span>
|
||||
<span class="font-table-data text-base">5.00 kg</span>
|
||||
</div>
|
||||
<div class="flex flex-col border-l border-slate-100 pl-4">
|
||||
<span class="text-body-sm text-slate-500">Diambil</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<input class="w-20 h-8 border-slate-200 rounded text-table-data text-primary focus:ring-primary focus:border-primary" type="number" value="5.00"/>
|
||||
<span class="text-body-sm font-bold">kg</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-full bg-primary text-white font-h2 py-3 rounded-lg flex justify-center items-center gap-2 active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined" data-icon="check_circle">check_circle</span>
|
||||
Konfirmasi Pengambilan
|
||||
</button>
|
||||
</div>
|
||||
<!-- Item Card: Pending -->
|
||||
<div class="bg-slate-50 border border-outline-variant rounded-xl p-4 opacity-75">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<span class="font-h2 block text-slate-700">LOT-SW-23111</span>
|
||||
<span class="font-label-caps text-slate-500">GRADE AA</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="font-label-caps text-slate-400 block">LOKASI RAK</span>
|
||||
<span class="font-h2 text-slate-600">B2-04-A</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-3 text-body-sm">
|
||||
<span class="text-slate-500">Target: 2.50 kg</span>
|
||||
<span class="text-slate-400 italic">Antre</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Item Card: Completed -->
|
||||
<div class="bg-secondary-container/20 border border-secondary-container rounded-xl p-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="bg-green-100 text-green-700 p-1 rounded-full">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="done">done</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-h2 block text-slate-400 line-through">LOT-SW-23098</span>
|
||||
<span class="font-label-caps text-slate-400">SELESAI (1.20 kg)</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-[10px] bg-white border border-slate-200 text-slate-400 px-2 py-1 rounded">08:45 WIB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Navigation Bar (Shared Component - Mobile Only View) -->
|
||||
<nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-slate-200 h-16 flex items-center justify-around z-40 md:hidden">
|
||||
<div class="flex flex-col items-center justify-center text-slate-500 hover:text-primary transition-colors cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
<span class="text-[10px] font-medium mt-0.5">Dashboard</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-primary transition-colors cursor-pointer border-t-2 border-primary pt-1">
|
||||
<span class="material-symbols-outlined" data-icon="inventory">inventory</span>
|
||||
<span class="text-[10px] font-bold mt-0.5">Picking</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-slate-500 hover:text-primary transition-colors cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
|
||||
<span class="text-[10px] font-medium mt-0.5">Inventory</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-slate-500 hover:text-primary transition-colors cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="text-[10px] font-medium mt-0.5">Settings</span>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Floating Action Button - Only for main screens -->
|
||||
<div class="fixed bottom-20 right-6 z-30">
|
||||
<button class="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 text-[28px]" data-icon="add_a_photo">add_a_photo</span>
|
||||
</button>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/picking_gudang_mobile/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/picking_gudang_mobile/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 310 KiB |
366
design-assets/stitch_abel_stock/purchase_form/code.html
Normal file
366
design-assets/stitch_abel_stock/purchase_form/code.html
Normal file
@ -0,0 +1,366 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Formulir Pembelian - SwiftLot Walet</title>
|
||||
<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;
|
||||
}
|
||||
.hide-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body-base text-on-background antialiased flex">
|
||||
<!-- SideNavBar (Shared Component) -->
|
||||
<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 rounded bg-primary-container flex items-center justify-center text-white">
|
||||
<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-teal-900 dark:text-teal-100 font-black text-[15px] leading-none">Sarang Ops</h1>
|
||||
<p class="text-[11px] text-slate-500 font-medium">Pabrik Pengolahan A</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1 px-3">
|
||||
<a 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 rounded active:scale-[0.98]" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
<span class="font-inter text-[13px] font-medium">Dashboard</span>
|
||||
</a>
|
||||
<!-- Active State: Purchase -->
|
||||
<a 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 rounded active:scale-[0.98]" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="shopping_cart">shopping_cart</span>
|
||||
<span class="font-inter text-[13px] font-medium">Pembelian</span>
|
||||
</a>
|
||||
<a 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 rounded active:scale-[0.98]" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="receipt_long">receipt_long</span>
|
||||
<span class="font-inter text-[13px] font-medium">Kuitansi</span>
|
||||
</a>
|
||||
<a 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 rounded active:scale-[0.98]" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
|
||||
<span class="font-inter text-[13px] font-medium">Inventaris</span>
|
||||
</a>
|
||||
<a 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 rounded active:scale-[0.98]" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="monitoring">monitoring</span>
|
||||
<span class="font-inter text-[13px] font-medium">Analitik</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-3 mt-auto space-y-1">
|
||||
<button class="w-full mb-4 bg-[#0D5E67] text-white py-2.5 rounded text-[13px] font-semibold flex items-center justify-center gap-2 hover:opacity-90 active:scale-[0.98] transition-all">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="add">add</span>
|
||||
Scan Lot Baru
|
||||
</button>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 transition-all rounded" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="font-inter text-[13px] font-medium">Pengaturan</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:text-[#0D5E67] hover:bg-slate-100 transition-all rounded" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="contact_support">contact_support</span>
|
||||
<span class="font-inter text-[13px] font-medium">Bantuan</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content -->
|
||||
<main class="flex-1 ml-64 min-h-screen flex flex-col">
|
||||
<!-- TopNavBar (Shared Component) -->
|
||||
<header class="sticky top-0 z-40 w-full flex justify-between items-center h-14 px-6 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 shadow-sm">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="font-inter text-lg font-bold text-[#0D5E67] dark:text-white tracking-tight">SwiftLot Walet</span>
|
||||
<div class="h-6 w-[1px] bg-slate-200 mx-2"></div>
|
||||
<h2 class="font-h2 text-h2 text-primary">Formulir Pembelian Baru</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-5">
|
||||
<div class="relative group">
|
||||
<span class="material-symbols-outlined text-slate-600 dark:text-slate-400 cursor-pointer" data-icon="notifications">notifications</span>
|
||||
<span class="absolute top-0 right-0 w-2 h-2 bg-error rounded-full"></span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-slate-600 dark:text-slate-400 cursor-pointer" data-icon="help_outline">help_outline</span>
|
||||
<div class="flex items-center gap-2 pl-2 cursor-pointer">
|
||||
<img alt="User profile" class="w-8 h-8 rounded-full border border-slate-200 object-cover" data-alt="portrait of a professional supply chain manager in a bright office environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD-y__w3tcRMOguNsqtAJT7TMj2QhhJLYkYzmTuwzT-Izil12sZY-sPq8oPDMsQdTn3xwo4VoFKGu6E4BBlMVWCw1Zdlo6fdurR9yFabpj-jPvpKVzo8q2JnfX63jMZUcRU5OxZGINUXCz2OAYJ8wWF-6XtZIVi_FzpsWyJ7pAJCA4dc5eBuC1CpX4YfCl2JdVWWdYh0PJOimMZjaDw50yetwvPN3pGF-SpQWVkasvM4z8H-2foOC6kgDkELSxHpa9Osa_JQWM8KQ"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Canvas -->
|
||||
<div class="p-container-margin flex-1 flex flex-col gap-gutter">
|
||||
<!-- Header Section: Form Fields -->
|
||||
<section class="bg-surface-container-lowest border border-outline-variant rounded shadow-sm p-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="font-label-caps text-label-caps text-outline uppercase">No. Pembelian</label>
|
||||
<input class="bg-surface-container-low border-outline-variant rounded px-3 py-2 text-body-sm font-medium focus:ring-0 cursor-not-allowed" readonly="" type="text" value="PUR-20231027-001"/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="font-label-caps text-label-caps text-outline uppercase">Pemasok</label>
|
||||
<select class="border-outline-variant rounded px-3 py-2 text-body-sm focus:ring-2 focus:ring-[#0D5E67] focus:border-[#0D5E67] outline-none transition-all">
|
||||
<option>Seafood Harvest Co.</option>
|
||||
<option>West Coast Walet Hub</option>
|
||||
<option>Global Nest Exporters</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="font-label-caps text-label-caps text-outline uppercase">Tanggal Pembelian</label>
|
||||
<div class="relative">
|
||||
<input class="w-full border-outline-variant rounded px-3 py-2 text-body-sm focus:ring-2 focus:ring-[#0D5E67] focus:border-[#0D5E67] outline-none" type="date" value="2023-10-27"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="font-label-caps text-label-caps text-outline uppercase">No. Faktur Pemasok</label>
|
||||
<input class="border-outline-variant rounded px-3 py-2 text-body-sm focus:ring-2 focus:ring-[#0D5E67] focus:border-[#0D5E67] outline-none" placeholder="INV/2023/X12" type="text"/>
|
||||
</div>
|
||||
<div class="md:col-span-2 lg:col-span-3 flex flex-col gap-1">
|
||||
<label class="font-label-caps text-label-caps text-outline uppercase">Catatan</label>
|
||||
<textarea class="border-outline-variant rounded px-3 py-2 text-body-sm focus:ring-2 focus:ring-[#0D5E67] focus:border-[#0D5E67] outline-none" placeholder="Masukkan detail spesifik transaksi..." rows="1"></textarea>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<label class="font-label-caps text-label-caps text-outline uppercase">Pratinjau Info Bank</label>
|
||||
<div class="bg-surface-container-low border border-dashed border-outline-variant rounded px-3 py-2 h-full">
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="material-symbols-outlined text-primary text-sm" data-icon="account_balance">account_balance</span>
|
||||
<span class="text-body-sm font-semibold">Standard Chartered</span>
|
||||
</div>
|
||||
<p class="text-[12px] text-on-surface-variant font-mono">Acc: 9920-xxxx-1122</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Line Items Section: Table -->
|
||||
<section class="flex-1 bg-surface-container-lowest border border-outline-variant rounded shadow-sm overflow-hidden flex flex-col">
|
||||
<div class="px-6 py-4 border-b border-outline-variant flex justify-between items-center bg-surface-bright">
|
||||
<h3 class="font-h2 text-h2 text-primary">Item Inventaris</h3>
|
||||
<button class="flex items-center gap-1.5 text-[#0D5E67] hover:bg-[#0D5E67]/5 px-3 py-1.5 rounded transition-all active:scale-95">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="add_circle">add_circle</span>
|
||||
<span class="font-table-data text-table-data">Tambah Baris</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="overflow-x-auto flex-1">
|
||||
<table class="w-full text-left border-collapse min-w-[1000px]">
|
||||
<thead>
|
||||
<tr class="bg-surface-container text-on-surface-variant font-label-caps text-[11px] uppercase tracking-wider">
|
||||
<th class="px-6 py-3 border-b border-outline-variant">Jenis Item</th>
|
||||
<th class="px-4 py-3 border-b border-outline-variant">Kualitas</th>
|
||||
<th class="px-4 py-3 border-b border-outline-variant text-right">Jumlah</th>
|
||||
<th class="px-4 py-3 border-b border-outline-variant">Satuan</th>
|
||||
<th class="px-4 py-3 border-b border-outline-variant text-right">Harga Satuan</th>
|
||||
<th class="px-4 py-3 border-b border-outline-variant text-right">Subtotal</th>
|
||||
<th class="px-4 py-3 border-b border-outline-variant">Status</th>
|
||||
<th class="px-4 py-3 border-b border-outline-variant">Catatan</th>
|
||||
<th class="px-6 py-3 border-b border-outline-variant text-center w-10"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-table-data font-table-data divide-y divide-outline-variant/30">
|
||||
<!-- Row 1 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-6 py-compact-padding">
|
||||
<select class="w-full bg-transparent border-none p-0 focus:ring-0 text-table-data cursor-pointer">
|
||||
<option>Sarang Mentah - Mangkok</option>
|
||||
<option>Sarang Mentah - Sudut</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding">
|
||||
<select class="w-full bg-transparent border-none p-0 focus:ring-0 text-table-data cursor-pointer">
|
||||
<option>Super AAA</option>
|
||||
<option>Grade A</option>
|
||||
<option>Grade B</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding text-right">
|
||||
<input class="w-20 text-right bg-transparent border-none p-0 focus:ring-0 text-table-data" type="number" value="12.50"/>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding">
|
||||
<span class="text-on-surface-variant">kg</span>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding text-right">
|
||||
<input class="w-24 text-right bg-transparent border-none p-0 focus:ring-0 text-table-data" type="number" value="12500"/>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding text-right font-semibold text-primary">156,250.00</td>
|
||||
<td class="px-4 py-compact-padding">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-green-100 text-green-800 text-[11px] font-bold">
|
||||
RAW_MAT
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding">
|
||||
<input class="w-full bg-transparent border-none p-0 focus:ring-0 text-table-data placeholder:opacity-30" placeholder="-" type="text"/>
|
||||
</td>
|
||||
<td class="px-6 py-compact-padding text-center">
|
||||
<span class="material-symbols-outlined text-slate-300 hover:text-error cursor-pointer transition-colors" data-icon="delete">delete</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-6 py-compact-padding">
|
||||
<select class="w-full bg-transparent border-none p-0 focus:ring-0 text-table-data cursor-pointer">
|
||||
<option>Sarang Mentah - Sudut</option>
|
||||
<option>Sarang Mentah - Mangkok</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding">
|
||||
<select class="w-full bg-transparent border-none p-0 focus:ring-0 text-table-data cursor-pointer">
|
||||
<option>Grade B</option>
|
||||
<option>Super AAA</option>
|
||||
<option>Grade A</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding text-right">
|
||||
<input class="w-20 text-right bg-transparent border-none p-0 focus:ring-0 text-table-data" type="number" value="4.25"/>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding">
|
||||
<span class="text-on-surface-variant">kg</span>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding text-right">
|
||||
<input class="w-24 text-right bg-transparent border-none p-0 focus:ring-0 text-table-data" type="number" value="8200"/>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding text-right font-semibold text-primary">34,850.00</td>
|
||||
<td class="px-4 py-compact-padding">
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-blue-100 text-blue-800 text-[11px] font-bold">
|
||||
PENDING_QC
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-compact-padding">
|
||||
<input class="w-full bg-transparent border-none p-0 focus:ring-0 text-table-data" type="text" value="Kelembaban tinggi"/>
|
||||
</td>
|
||||
<td class="px-6 py-compact-padding text-center">
|
||||
<span class="material-symbols-outlined text-slate-300 hover:text-error cursor-pointer transition-colors" data-icon="delete">delete</span>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Empty Add Row Helper -->
|
||||
<tr class="bg-surface-container-low border-t border-outline-variant">
|
||||
<td class="px-6 py-2 text-center" colspan="9">
|
||||
<button class="text-body-sm font-medium text-outline hover:text-primary transition-colors flex items-center justify-center gap-2 mx-auto">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="add">add</span>
|
||||
Masukkan entri lot baru
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Footer Summary Section -->
|
||||
<div class="bg-surface-container px-6 py-4 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
||||
<div class="flex gap-8">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-label-caps text-label-caps text-outline uppercase">Total Baris</span>
|
||||
<span class="font-display-lot text-[18px] text-primary">02 Entri</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-label-caps text-label-caps text-outline uppercase">Total Berat</span>
|
||||
<span class="font-display-lot text-[18px] text-primary">16.75 kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-4 bg-primary-container px-6 py-3 rounded shadow-lg text-white">
|
||||
<span class="font-label-caps text-label-caps uppercase opacity-80">Total Keseluruhan</span>
|
||||
<span class="font-display-lot text-display-lot">USD 191,100.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Actions Footer -->
|
||||
<footer class="flex justify-between items-center py-4">
|
||||
<button class="px-6 py-2 text-body-base font-semibold text-error hover:bg-error/5 rounded transition-all">
|
||||
Batal
|
||||
</button>
|
||||
<div class="flex gap-3">
|
||||
<button class="px-8 py-2.5 bg-white border border-[#0D5E67] text-[#0D5E67] font-semibold rounded-lg hover:bg-[#0D5E67]/5 active:scale-95 transition-all">
|
||||
Simpan Draft
|
||||
</button>
|
||||
<button class="px-10 py-2.5 bg-[#0D5E67] text-white font-semibold rounded-lg shadow-md hover:opacity-90 active:scale-95 transition-all">
|
||||
Kirim Pembelian
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/purchase_form/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/purchase_form/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
417
design-assets/stitch_abel_stock/receipt_form/code.html
Normal file
417
design-assets/stitch_abel_stock/receipt_form/code.html
Normal file
@ -0,0 +1,417 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Formulir Penerimaan - SwiftLot Walet</title>
|
||||
<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"/>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.compact-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
.compact-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.compact-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
<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>
|
||||
</head>
|
||||
<body class="bg-background font-body-base text-on-surface min-h-screen">
|
||||
<!-- 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-[1px] bg-slate-200 mx-2"></div>
|
||||
<h2 class="font-h1 text-h1 text-on-surface">Formulir Penerimaan Barang</h2>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-2 px-3 py-1.5 bg-slate-50 border border-slate-200 rounded">
|
||||
<span class="material-symbols-outlined text-slate-400 text-sm">notifications</span>
|
||||
<span class="material-symbols-outlined text-slate-400 text-sm">help_outline</span>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full overflow-hidden border border-slate-200">
|
||||
<img alt="User profile" class="w-full h-full object-cover" data-alt="Professional headshot of a corporate inventory manager for a high-end logistics company" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBYUHb23_FlhaKb0YLS1pNIC3A7L07VmAYYc3PC6s3oKRPwxHcKGnwgQso2ITf528my0JYawpiuOy1SVr52zXRjfqGr0fFxPhEkd2KZUDbYt1LF_QlRot7wZXLaaRX4VU4zp4-prh0xpoBOdh3Zg4dUJ0ldPlW4Yj-dJIO6I976nfoLW6y170S1CBwwvC7p1MgzMSaJNcq4T6dJtHeAFi35GFV68iVmTVgHpeQB4hrFbDpq6bQN1kXuuo9Xzijqi35u6zmlIriWkA"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- SideNavBar -->
|
||||
<aside class="fixed left-0 top-14 h-[calc(100vh-3.5rem)] w-64 bg-slate-50 dark:bg-slate-950 border-r border-slate-200 dark:border-slate-800 flex flex-col py-4 font-inter text-[13px] font-medium">
|
||||
<nav class="flex-1 space-y-1 px-3">
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 active:scale-[0.98]" href="#">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span>Dasbor</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 active:scale-[0.98]" href="#">
|
||||
<span class="material-symbols-outlined">shopping_cart</span>
|
||||
<span>Pembelian</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 bg-white dark:bg-slate-900 text-[#0D5E67] border-r-4 border-[#0D5E67] shadow-sm transition-all duration-150 active:scale-[0.98]" href="#">
|
||||
<span class="material-symbols-outlined">receipt_long</span>
|
||||
<span>Penerimaan</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 active:scale-[0.98]" href="#">
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
<span>Inventaris</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2.5 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 transition-all duration-150 active:scale-[0.98]" href="#">
|
||||
<span class="material-symbols-outlined">monitoring</span>
|
||||
<span>Analitik</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-3 mb-6">
|
||||
<button class="w-full py-2 bg-primary-container text-white rounded font-bold shadow-sm hover:opacity-90 active:scale-[0.98] transition-all flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">add_circle</span>
|
||||
<span>Scan Lot Baru</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-3 border-t border-slate-200 pt-4 space-y-1">
|
||||
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 hover:bg-slate-100 rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">settings</span>
|
||||
<span>Pengaturan</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2 text-slate-500 hover:bg-slate-100 rounded" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">contact_support</span>
|
||||
<span>Bantuan</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content -->
|
||||
<main class="ml-64 mt-14 p-6 overflow-x-hidden">
|
||||
<div class="max-w-7xl mx-auto space-y-6">
|
||||
<!-- Header Section: Form Fields -->
|
||||
<div class="grid grid-cols-12 gap-6">
|
||||
<!-- Receipt Metadata -->
|
||||
<div class="col-span-8 bg-white border border-outline-variant p-5 shadow-sm rounded">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="font-h2 text-h2 text-primary flex items-center gap-2">
|
||||
<span class="material-symbols-outlined">edit_document</span>
|
||||
Informasi Dasar
|
||||
</h3>
|
||||
<span class="text-label-caps font-label-caps px-2 py-0.5 bg-slate-100 text-slate-600 rounded">DRAFT</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-x-6 gap-y-4">
|
||||
<div>
|
||||
<label class="block font-label-caps text-label-caps text-outline mb-1">NO. PENERIMAAN (AUTO)</label>
|
||||
<input class="w-full bg-surface-container-low border-none font-table-data text-table-data py-2 px-3 rounded text-on-surface-variant cursor-not-allowed" readonly="" type="text" value="GRN/2023/10/0421"/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-label-caps text-label-caps text-outline mb-1">REFERENSI PEMBELIAN</label>
|
||||
<div class="relative">
|
||||
<select class="w-full border-outline border focus:ring-2 focus:ring-primary-container font-table-data text-table-data py-2 px-3 rounded appearance-none cursor-pointer">
|
||||
<option>PO-2023-WB-098 (Premium Walet Group)</option>
|
||||
<option>PO-2023-WB-102 (Sumatra Nest Co)</option>
|
||||
<option>PO-2023-WB-105 (Kalimantan Swiftlet Assoc)</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-2 top-2 text-slate-400 pointer-events-none">search</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-label-caps text-label-caps text-outline mb-1">PEMASOK</label>
|
||||
<input class="w-full bg-surface-container-low border-none font-table-data text-table-data py-2 px-3 rounded text-on-surface-variant cursor-not-allowed" readonly="" type="text" value="Premium Walet Group Ltd"/>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block font-label-caps text-label-caps text-outline mb-1">TANGGAL TERIMA</label>
|
||||
<input class="w-full border-outline border focus:ring-2 focus:ring-primary-container font-table-data text-table-data py-2 px-3 rounded" type="date" value="2023-10-27"/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-label-caps text-label-caps text-outline mb-1">NAMA PENERIMA</label>
|
||||
<input class="w-full border-outline border focus:ring-2 focus:ring-primary-container font-table-data text-table-data py-2 px-3 rounded" placeholder="Masukkan nama..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Supplier Bank Info -->
|
||||
<div class="col-span-4 bg-white border border-outline-variant p-5 shadow-sm rounded flex flex-col">
|
||||
<h3 class="font-h2 text-h2 text-primary flex items-center gap-2 mb-4">
|
||||
<span class="material-symbols-outlined">account_balance</span>
|
||||
Info Pembayaran Pemasok
|
||||
</h3>
|
||||
<div class="space-y-3 flex-1">
|
||||
<div class="p-3 bg-secondary-container rounded-sm border border-blue-100">
|
||||
<label class="block font-label-caps text-label-caps text-on-secondary-fixed-variant mb-0.5">NAMA BANK</label>
|
||||
<div class="font-table-data text-table-data text-on-secondary-container">BCA International - Central Branch</div>
|
||||
</div>
|
||||
<div class="p-3 bg-secondary-container rounded-sm border border-blue-100">
|
||||
<label class="block font-label-caps text-label-caps text-on-secondary-fixed-variant mb-0.5">NOMOR REKENING</label>
|
||||
<div class="font-table-data text-table-data text-on-secondary-container">8830-441-2291</div>
|
||||
</div>
|
||||
<div class="p-3 bg-secondary-container rounded-sm border border-blue-100">
|
||||
<label class="block font-label-caps text-label-caps text-on-secondary-fixed-variant mb-0.5">PEMILIK REKENING</label>
|
||||
<div class="font-table-data text-table-data text-on-secondary-container">PREMIUM WALET GROUP LTD</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Lines Table -->
|
||||
<div class="bg-white border border-outline-variant shadow-sm rounded overflow-hidden">
|
||||
<div class="px-5 py-4 border-b border-outline-variant flex justify-between items-center bg-surface-container-lowest">
|
||||
<h3 class="font-h2 text-h2 text-on-surface flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary">list_alt</span>
|
||||
Item Baris Inventaris
|
||||
</h3>
|
||||
<div class="flex gap-4">
|
||||
<div class="flex items-center gap-2 px-3 py-1 bg-surface-container-high rounded-full">
|
||||
<span class="text-label-caps font-label-caps text-outline">DIPESAN:</span>
|
||||
<span class="font-display-lot text-[14px] text-on-surface">1,250.00 kg</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 px-3 py-1 bg-green-50 rounded-full border border-green-200">
|
||||
<span class="text-label-caps font-label-caps text-green-700">DISETUJUI:</span>
|
||||
<span class="font-display-lot text-[14px] text-green-800">1,180.00 kg</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto compact-scrollbar">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-surface-container-low border-b border-outline-variant">
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-outline">DESKRIPSI ITEM</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-outline text-right">DIPESAN</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-outline w-24">DITERIMA</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-outline w-24">DISETUJUI</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-outline w-24">DITOLAK</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-outline text-right">BIAYA SATUAN</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-outline">GUDANG</th>
|
||||
<th class="px-4 py-3 font-label-caps text-label-caps text-outline">LOKASI</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-outline-variant">
|
||||
<!-- Row 1 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-2">
|
||||
<div class="font-table-data text-table-data">Grade 3A - Super White</div>
|
||||
<div class="text-[11px] text-slate-400">LOT-REF: SW-001</div>
|
||||
</td>
|
||||
<td class="px-4 py-2 text-right font-table-data text-table-data">500.00 kg</td>
|
||||
<td class="px-4 py-2">
|
||||
<input class="w-full text-right border-outline border focus:ring-1 focus:ring-primary-container font-table-data text-table-data py-1 px-2 rounded" type="number" value="500.00"/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input class="w-full text-right border-green-300 border focus:ring-1 focus:ring-green-500 font-table-data text-table-data py-1 px-2 rounded bg-green-50" type="number" value="480.00"/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input class="w-full text-right border-error border focus:ring-1 focus:ring-error font-table-data text-table-data py-1 px-2 rounded bg-error-container text-on-error-container" type="number" value="20.00"/>
|
||||
</td>
|
||||
<td class="px-4 py-2 text-right font-table-data text-table-data">$1,200.00</td>
|
||||
<td class="px-4 py-2">
|
||||
<select class="w-full border-outline border text-[12px] py-1 px-2 rounded">
|
||||
<option>Main WH - Zone A</option>
|
||||
<option>Cold Storage 1</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<select class="w-full border-outline border text-[12px] py-1 px-2 rounded">
|
||||
<option>Rack A-01</option>
|
||||
<option>Rack A-02</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-4 py-2">
|
||||
<div class="font-table-data text-table-data">Grade 2B - Light Yellow</div>
|
||||
<div class="text-[11px] text-slate-400">LOT-REF: LY-004</div>
|
||||
</td>
|
||||
<td class="px-4 py-2 text-right font-table-data text-table-data">750.00 kg</td>
|
||||
<td class="px-4 py-2">
|
||||
<input class="w-full text-right border-outline border focus:ring-1 focus:ring-primary-container font-table-data text-table-data py-1 px-2 rounded" type="number" value="750.00"/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input class="w-full text-right border-green-300 border focus:ring-1 focus:ring-green-500 font-table-data text-table-data py-1 px-2 rounded bg-green-50" type="number" value="700.00"/>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<input class="w-full text-right border-error border focus:ring-1 focus:ring-error font-table-data text-table-data py-1 px-2 rounded bg-error-container text-on-error-container" type="number" value="50.00"/>
|
||||
</td>
|
||||
<td class="px-4 py-2 text-right font-table-data text-table-data">$850.00</td>
|
||||
<td class="px-4 py-2">
|
||||
<select class="w-full border-outline border text-[12px] py-1 px-2 rounded">
|
||||
<option>Main WH - Zone B</option>
|
||||
<option>Cold Storage 2</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<select class="w-full border-outline border text-[12px] py-1 px-2 rounded">
|
||||
<option>Rack B-14</option>
|
||||
<option>Rack B-15</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Validation Summary Bar -->
|
||||
<div class="bg-surface-container-low px-5 py-3 border-t border-outline-variant flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 text-on-error-container font-body-sm text-body-sm">
|
||||
<span class="material-symbols-outlined text-[18px]">warning</span>
|
||||
<span>Validasi: Item Ditolak + Disetujui Baris 1 (500) sama dengan Diterima (500). Sistem OK.</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="text-label-caps font-label-caps text-outline mr-2">TOTAL ITEM:</span>
|
||||
<span class="font-h2 text-h2 text-primary">2 Item</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Actions -->
|
||||
<div class="flex justify-between items-center bg-white p-4 border border-outline-variant rounded shadow-sm">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="px-4 py-2 text-slate-600 font-semibold hover:bg-slate-50 transition-colors flex items-center gap-2">
|
||||
<span class="material-symbols-outlined">delete_outline</span>
|
||||
Hapus
|
||||
</button>
|
||||
<button class="px-4 py-2 border border-primary text-primary font-semibold hover:bg-teal-50 transition-colors flex items-center gap-2 rounded">
|
||||
<span class="material-symbols-outlined">save</span>
|
||||
Simpan Draft
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="text-right mr-4">
|
||||
<div class="text-label-caps font-label-caps text-outline">ESTIMASI LOT</div>
|
||||
<div class="font-h1 text-h1 text-primary">12 Lot Baru</div>
|
||||
</div>
|
||||
<button class="bg-primary-container text-white px-8 py-2.5 rounded font-bold shadow-lg hover:brightness-110 active:scale-[0.98] transition-all flex items-center gap-3">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">inventory_2</span>
|
||||
Selesaikan & Buat Lot
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Contextual Info Cards (Bento Style) -->
|
||||
<section class="ml-64 px-6 pb-12">
|
||||
<div class="max-w-7xl mx-auto grid grid-cols-3 gap-6">
|
||||
<div class="bg-white p-4 border border-outline-variant rounded shadow-sm">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<div class="text-label-caps font-label-caps text-outline mb-1">TREN KUALITAS</div>
|
||||
<div class="font-h1 text-h1">94.4% Hasil</div>
|
||||
</div>
|
||||
<div class="p-2 bg-green-50 text-green-600 rounded">
|
||||
<span class="material-symbols-outlined">trending_up</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 h-1 w-full bg-slate-100 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-green-500" style="width: 94%"></div>
|
||||
</div>
|
||||
<div class="mt-2 text-[11px] text-slate-500">Rata-rata tingkat penerimaan dari pemasok ini kuartal ini.</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 border border-outline-variant rounded shadow-sm flex items-center gap-4">
|
||||
<div class="w-16 h-16 bg-slate-100 rounded flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-3xl text-slate-400">qr_code_2</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-label-caps font-label-caps text-outline mb-0.5">PELABELAN OTOMATIS</div>
|
||||
<div class="font-h2 text-h2">12 Label Siap</div>
|
||||
<div class="text-[11px] text-primary-container font-semibold mt-1 flex items-center gap-1">
|
||||
<span class="material-symbols-outlined text-[14px]">print</span>
|
||||
Antrian cetak terhubung
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative overflow-hidden bg-primary-container rounded shadow-sm flex flex-col justify-end p-4 group">
|
||||
<img class="absolute inset-0 w-full h-full object-cover opacity-20 transition-transform duration-700 group-hover:scale-110" data-alt="Close up of high quality edible bird nests in a clean warehouse environment with industrial lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCyVXCingJDg1yF9nwNVeOKPutQEpxFvnJolhNKNMHvPBeAduiLchlPZgI4l_hmj9SKmEwm0cxM83I3lY2YK9bu1ewPJkV9AIMZRCRgpJaGSO0dIXAKFZrGDk3a2VP8MHkBBJF2aWBOB7ptBHRJFmt9PxFvLxqjZO82TmxoaGuuNFPRuBzTVMKy_75RfNtqJvCrr5aAbD58uB-ZzLDy0lNPD9X0mlMP0Xu8lwMLjKSruKg9E-6X9cWsosENbgRZA3jQt27EABcC9w"/>
|
||||
<div class="relative z-10">
|
||||
<div class="text-white/70 text-label-caps font-label-caps mb-1">TIP OPERASIONAL</div>
|
||||
<div class="text-white font-h2 text-h2">Verifikasi Tingkat Kelembaban</div>
|
||||
<p class="text-white/80 text-[11px] mt-1 leading-relaxed">Pastikan semua grade Super White berada dalam rentang kelembaban 12-14% sebelum finalisasi rak penyimpanan.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/receipt_form/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/receipt_form/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 341 KiB |
350
design-assets/stitch_abel_stock/scan_lookup/code.html
Normal file
350
design-assets/stitch_abel_stock/scan_lookup/code.html
Normal file
@ -0,0 +1,350 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;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": "#4e6073",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"outline": "#6f797a",
|
||||
"background": "#f8fafa",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"error-container": "#ffdad6",
|
||||
"tertiary": "#60320f",
|
||||
"on-secondary-container": "#526478",
|
||||
"surface-container": "#eceeee",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"on-error-container": "#93000a",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"surface-tint": "#1d6871",
|
||||
"on-primary-container": "#92d5df",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"inverse-surface": "#2e3131",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"on-surface": "#191c1d",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"surface": "#f8fafa",
|
||||
"primary-container": "#0d5e67",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"error": "#ba1a1a",
|
||||
"surface-bright": "#f8fafa",
|
||||
"primary": "#00454c",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"on-error": "#ffffff",
|
||||
"surface-variant": "#e1e3e3",
|
||||
"on-background": "#191c1d",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-dim": "#d8dadb",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-container": "#7c4824"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"compact-padding": "8px",
|
||||
"row-height-sm": "32px",
|
||||
"row-height-md": "48px",
|
||||
"container-margin": "24px",
|
||||
"gutter": "16px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-base": ["Inter"],
|
||||
"h1": ["Inter"],
|
||||
"display-lot": ["Inter"],
|
||||
"table-data": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"h2": ["Inter"],
|
||||
"label-caps": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"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"}],
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.scanner-overlay {
|
||||
background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.6) 100%);
|
||||
}
|
||||
.scan-frame {
|
||||
box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body-base text-on-background selection:bg-primary-fixed selection:text-on-primary-fixed">
|
||||
<!-- Sidebar Navigation -->
|
||||
<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">
|
||||
<h2 class="text-teal-900 font-black font-h1">Walet Operations</h2>
|
||||
<p class="text-[11px] text-slate-500 font-medium">V1.0.4-Operational</p>
|
||||
</div>
|
||||
<nav class="flex-1 px-3 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 hover:text-teal-600 rounded-lg transition-all duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 hover:text-teal-600 rounded-lg transition-all duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
|
||||
<span>Inventory Stock</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 hover:text-teal-600 rounded-lg transition-all duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="account_tree">account_tree</span>
|
||||
<span>Traceability Logs</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 hover:text-teal-600 rounded-lg transition-all duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="database">database</span>
|
||||
<span>Master Data</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 bg-teal-50 text-teal-700 border-r-4 border-teal-600 rounded-l-lg transition-all duration-150 ease-in-out font-inter text-[13px] font-medium" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="qr_code_scanner">qr_code_scanner</span>
|
||||
<span>Barcode Scanner</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-3 pt-4 border-t border-slate-200">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 rounded-lg transition-all font-inter text-[13px] font-medium" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
<span>Support</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-100 rounded-lg transition-all font-inter text-[13px] font-medium" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="logout">logout</span>
|
||||
<span>Sign Out</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Top AppBar -->
|
||||
<header class="fixed top-0 right-0 left-64 h-14 bg-white border-b border-slate-200 flex items-center justify-between px-6 z-40 shadow-sm">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-lg font-bold tracking-tight text-teal-800 font-h1">SarangTrace ERP</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-50 rounded-full transition-colors active:opacity-80">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-50 rounded-full transition-colors active:opacity-80">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
</button>
|
||||
<div class="h-8 w-8 rounded-full bg-slate-200 overflow-hidden border border-slate-200">
|
||||
<img alt="User Profile" class="w-full h-full object-cover" data-alt="professional portrait of a warehouse supervisor in a clean industrial setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuARVXYHFOGloaGEc95MlVgvd7qA1tOCFpdByU9ijmuXuO4f_-Vq09xJtx1idx0paPaCVA5n-kv90SlftFo_PjYc6bTtLwfRnhRb8U-dCmnYxC8L76_oEXJsE50ApRL8LR90UDpGD0ECsGAYO-DjFKe_-UC1h8VGy09pyybilbKuGt4RKuHTAqSUXyMyq7iBXnmETuw4qDuCWTz8sFnwKq6BXJUeebaWs5ERKCBCm4msGCve0OfxHw7t_ORGEiNrh_ZWuBpRDFGvcQ"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-64 pt-14 min-h-screen bg-surface">
|
||||
<div class="p-container-margin">
|
||||
<!-- Header Section -->
|
||||
<div class="mb-6 flex justify-between items-end">
|
||||
<div>
|
||||
<h1 class="font-h1 text-h1 text-on-surface mb-1">Scan Lookup</h1>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Pindai kode QR atau masukkan ID Lot secara manual untuk melihat detail operasional.</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<span class="px-3 py-1 bg-teal-50 text-teal-700 text-label-caps rounded-full border border-teal-200">STATUS: OPERASIONAL</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Scanner & Input Section -->
|
||||
<div class="grid grid-cols-12 gap-gutter">
|
||||
<!-- Left: Scanner View -->
|
||||
<div class="col-span-12 lg:col-span-7">
|
||||
<div class="bg-black rounded-xl overflow-hidden relative aspect-video shadow-sm border border-outline-variant">
|
||||
<img alt="Scanner View" class="w-full h-full object-cover opacity-60" data-alt="POV through a smartphone camera scanning a QR code on a wooden crate in a bright warehouse" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAOCNtRY7V_VboiKG3-z1LGtxYZr4XaDszqWPa6IIGbhfHdNlGehWcCtNfwVrQzsf2s8rEfxSm6AHWW0kj0hq4jCT47h5lRgP15u87Sr6-rxmYH27xCXeCqlaRLmiKLlDa9MxDSlnqajPl9dqtYT0Uk-NZJnk93eH1N8S7Q6ofLLj8K-T8iw078jTO3sOMQYb40oHlbtCL8jr9cmfqRCyHf_oJqSmpwOQo5YIMqvVCqeHvcdSx_P3BAVnsui7HTj3JgamlUsve-nQ"/>
|
||||
<!-- Scanning UI Overlays -->
|
||||
<div class="absolute inset-0 flex flex-col items-center justify-center">
|
||||
<div class="w-64 h-64 border-2 border-teal-400 rounded-lg scan-frame relative">
|
||||
<div class="absolute inset-x-0 top-0 h-0.5 bg-teal-400 shadow-[0_0_15px_rgba(45,212,191,0.8)] animate-pulse"></div>
|
||||
<!-- Corner Markers -->
|
||||
<div class="absolute -top-1 -left-1 w-6 h-6 border-t-4 border-l-4 border-teal-500"></div>
|
||||
<div class="absolute -top-1 -right-1 w-6 h-6 border-t-4 border-r-4 border-teal-500"></div>
|
||||
<div class="absolute -bottom-1 -left-1 w-6 h-6 border-b-4 border-l-4 border-teal-500"></div>
|
||||
<div class="absolute -bottom-1 -right-1 w-6 h-6 border-b-4 border-r-4 border-teal-500"></div>
|
||||
</div>
|
||||
<p class="mt-6 text-white font-body-base bg-black/40 backdrop-blur-md px-4 py-2 rounded-full">Posisikan Kode di Tengah Bingkai</p>
|
||||
</div>
|
||||
<!-- Scanner Controls -->
|
||||
<div class="absolute bottom-4 right-4 flex flex-col gap-2">
|
||||
<button class="w-10 h-10 bg-white/10 hover:bg-white/20 backdrop-blur-md text-white rounded-full flex items-center justify-center transition-all">
|
||||
<span class="material-symbols-outlined" data-icon="flashlight_on">flashlight_on</span>
|
||||
</button>
|
||||
<button class="w-10 h-10 bg-white/10 hover:bg-white/20 backdrop-blur-md text-white rounded-full flex items-center justify-center transition-all">
|
||||
<span class="material-symbols-outlined" data-icon="zoom_in">zoom_in</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Manual Input Field -->
|
||||
<div class="mt-4 bg-white p-4 rounded-xl border border-slate-200 shadow-sm flex items-center gap-4">
|
||||
<div class="flex-1 relative">
|
||||
<input class="w-full pl-10 pr-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-teal-600 focus:border-transparent outline-none font-body-base" placeholder="Masukkan ID Lot Manual (Contoh: SBW-2023-10-001)" type="text"/>
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" data-icon="keyboard">keyboard</span>
|
||||
</div>
|
||||
<button class="px-6 py-3 bg-primary text-white font-h2 rounded-lg hover:bg-teal-900 transition-colors flex items-center gap-2">
|
||||
<span class="material-symbols-outlined" data-icon="search">search</span>
|
||||
Cari
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right: Results Panel -->
|
||||
<div class="col-span-12 lg:col-span-5 flex flex-col gap-gutter">
|
||||
<!-- Result Card -->
|
||||
<div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden flex flex-col">
|
||||
<div class="p-4 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
|
||||
<span class="text-label-caps text-slate-500 uppercase">Hasil Pemindaian Terakhir</span>
|
||||
<span class="text-label-caps text-teal-600 bg-teal-50 px-2 py-0.5 rounded">TERDETEKSI</span>
|
||||
</div>
|
||||
<div class="p-6 flex-1">
|
||||
<div class="flex items-start justify-between mb-6">
|
||||
<div>
|
||||
<h3 class="font-display-lot text-display-lot text-teal-900 mb-1">SBW-LOT-4412</h3>
|
||||
<p class="font-body-sm text-body-sm text-slate-500">Kategori: Sarang Putih (Super)</p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-label-caps text-slate-400 mb-1">STATUS LOT</div>
|
||||
<span class="px-3 py-1 bg-green-50 text-green-700 text-label-caps rounded-full border border-green-100 font-bold">READY TO EXPORT</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Data Grid -->
|
||||
<div class="grid grid-cols-2 gap-y-6 gap-x-4 mb-8">
|
||||
<div>
|
||||
<label class="text-label-caps text-slate-400 block mb-1">GRADE PRODUK</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-teal-600 text-lg" data-icon="verified">verified</span>
|
||||
<span class="font-h2 text-h2 text-on-surface">AAA+ (Premium)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-label-caps text-slate-400 block mb-1">BERAT BERSIH</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-teal-600 text-lg" data-icon="weight">weight</span>
|
||||
<span class="font-h2 text-h2 text-on-surface">12.450 kg</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-label-caps text-slate-400 block mb-1">LOKASI GUDANG</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-teal-600 text-lg" data-icon="location_on">location_on</span>
|
||||
<span class="font-h2 text-h2 text-on-surface">Sector B, Rack 42</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-label-caps text-slate-400 block mb-1">KADAR AIR</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-teal-600 text-lg" data-icon="humidity_low">humidity_low</span>
|
||||
<span class="font-h2 text-h2 text-on-surface">8.4%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Progress Lifecycle -->
|
||||
<div class="mb-8">
|
||||
<label class="text-label-caps text-slate-400 block mb-3 uppercase">Tahap Operasional</label>
|
||||
<div class="relative flex items-center justify-between">
|
||||
<div class="absolute left-0 top-1/2 -translate-y-1/2 w-full h-0.5 bg-slate-200"></div>
|
||||
<div class="absolute left-0 top-1/2 -translate-y-1/2 w-3/4 h-0.5 bg-teal-600"></div>
|
||||
<div class="relative z-10 w-6 h-6 rounded-full bg-teal-600 border-4 border-white shadow-sm flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[10px] text-white" data-icon="check" data-weight="fill">check</span>
|
||||
</div>
|
||||
<div class="relative z-10 w-6 h-6 rounded-full bg-teal-600 border-4 border-white shadow-sm flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[10px] text-white" data-icon="check" data-weight="fill">check</span>
|
||||
</div>
|
||||
<div class="relative z-10 w-6 h-6 rounded-full bg-teal-600 border-4 border-white shadow-sm flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[10px] text-white" data-icon="check" data-weight="fill">check</span>
|
||||
</div>
|
||||
<div class="relative z-10 w-6 h-6 rounded-full bg-slate-200 border-4 border-white shadow-sm"></div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-2">
|
||||
<span class="text-[10px] font-bold text-teal-800">BAHAN BAKU</span>
|
||||
<span class="text-[10px] font-bold text-teal-800">SORTASI</span>
|
||||
<span class="text-[10px] font-bold text-teal-800">PACKING</span>
|
||||
<span class="text-[10px] font-bold text-slate-400">PENGIRIMAN</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Action Buttons -->
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<button class="col-span-2 py-3 bg-primary text-white font-h2 rounded-lg hover:bg-teal-900 transition-colors flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined" data-icon="visibility">visibility</span>
|
||||
Lihat Detail
|
||||
</button>
|
||||
<button class="py-3 border border-teal-600 text-teal-700 font-h2 rounded-lg hover:bg-teal-50 transition-colors flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined" data-icon="print">print</span>
|
||||
Print Label
|
||||
</button>
|
||||
<button class="py-3 border border-teal-600 text-teal-700 font-h2 rounded-lg hover:bg-teal-50 transition-colors flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined" data-icon="move_down">move_down</span>
|
||||
Pindah Lokasi
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- History / Recent Scans (Simplified Bento) -->
|
||||
<div class="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h4 class="font-h2 text-h2 text-teal-900">Scan Terakhir</h4>
|
||||
<a class="text-body-sm text-teal-600 hover:underline" href="#">Lihat Semua</a>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-3 p-2 hover:bg-slate-50 rounded-lg cursor-pointer transition-colors border-l-2 border-transparent hover:border-teal-500">
|
||||
<div class="w-10 h-10 rounded bg-slate-100 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-500" data-icon="barcode">barcode</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="text-table-data text-on-surface">SBW-LOT-3990</div>
|
||||
<div class="text-[11px] text-slate-400 uppercase">2 menit yang lalu • Raw Material</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-slate-300" data-icon="chevron_right">chevron_right</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-2 hover:bg-slate-50 rounded-lg cursor-pointer transition-colors border-l-2 border-transparent hover:border-teal-500">
|
||||
<div class="w-10 h-10 rounded bg-slate-100 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-slate-500" data-icon="qr_code">qr_code</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="text-table-data text-on-surface">SBW-LOT-2281</div>
|
||||
<div class="text-[11px] text-slate-400 uppercase">15 menit yang lalu • Sorting</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-slate-300" data-icon="chevron_right">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- FAB for Quick Actions -->
|
||||
<button class="fixed bottom-8 right-8 w-14 h-14 bg-primary text-white rounded-full shadow-lg flex items-center justify-center hover:scale-105 transition-transform active:scale-95 z-50">
|
||||
<span class="material-symbols-outlined" data-icon="add" style="font-variation-settings: 'wght' 600;">add</span>
|
||||
</button>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/scan_lookup/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/scan_lookup/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 502 KiB |
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 |
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 |
372
design-assets/stitch_abel_stock/transfer_antar_gudang/code.html
Normal file
372
design-assets/stitch_abel_stock/transfer_antar_gudang/code.html
Normal file
@ -0,0 +1,372 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-variant": "#e1e3e3",
|
||||
"tertiary-container": "#7c4824",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"primary": "#00454c",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"error": "#ba1a1a",
|
||||
"outline": "#6f797a",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"tertiary": "#60320f",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"surface-bright": "#f8fafa",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"on-primary-container": "#92d5df",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"on-surface": "#191c1d",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"surface-dim": "#d8dadb",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"surface-container": "#eceeee",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"on-error-container": "#93000a",
|
||||
"secondary": "#4e6073",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-background": "#191c1d",
|
||||
"inverse-surface": "#2e3131",
|
||||
"on-error": "#ffffff",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"primary-container": "#0d5e67",
|
||||
"background": "#f8fafa",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-tint": "#1d6871",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"surface": "#f8fafa",
|
||||
"on-secondary-container": "#526478"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter": "16px",
|
||||
"container-margin": "24px",
|
||||
"row-height-sm": "32px",
|
||||
"row-height-md": "48px",
|
||||
"compact-padding": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display-lot": ["Inter"],
|
||||
"body-base": ["Inter"],
|
||||
"label-caps": ["Inter"],
|
||||
"h2": ["Inter"],
|
||||
"h1": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"table-data": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"display-lot": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"h1": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "500"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.no-scrollbar::-webkit-scrollbar { display: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background antialiased flex">
|
||||
<!-- SideNavBar -->
|
||||
<aside class="fixed left-0 top-0 h-screen w-64 border-r border-slate-200 bg-slate-50 flex flex-col h-full py-4 space-y-1 z-50">
|
||||
<div class="px-6 mb-8">
|
||||
<div class="flex items-center gap-3">
|
||||
<img alt="Warehouse Logo" class="w-10 h-10 rounded" data-alt="minimalist professional corporate logo for a logistics company using teal and white color palette" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDzHht_N2ne3a1nwn1MaPtt55wbWMs8YhSGQ9U30D_-BPIkFsitrfhdFFpcwJyQi13PpaJBWPp8ikNCKwsRBemweY8uuBgaZC4c_Ldj0U4RkcJz43n76GHOHNrJOzEPPetIj2IeJfLWXWk92nuDEigft-TG1_ozbYYjAk_-jzrH0JjJqGJlNKpgisHWLjNd8zFoYKPAEfghpzux6rZcJIIKeVwAHBllgoncJXo7dN2TA5PMlYmcM63_QeuXY7XYXZszoujQFnP5VQ"/>
|
||||
<div>
|
||||
<h1 class="text-teal-800 font-black tracking-tighter text-lg leading-tight">SarangWMS</h1>
|
||||
<p class="text-[10px] text-slate-500 font-medium tracking-widest uppercase">Operational Hub</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 px-3 space-y-1">
|
||||
<a class="flex items-center px-3 py-2 text-slate-600 hover:text-teal-700 hover:bg-slate-100 rounded-lg transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="dashboard">dashboard</span>
|
||||
<span class="font-medium text-sm">Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center px-3 py-2 text-slate-600 hover:text-teal-700 hover:bg-slate-100 rounded-lg transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="database">database</span>
|
||||
<span class="font-medium text-sm">Master Data</span>
|
||||
</a>
|
||||
<a class="flex items-center px-3 py-2 text-slate-600 hover:text-teal-700 hover:bg-slate-100 rounded-lg transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="inventory_2">inventory_2</span>
|
||||
<span class="font-medium text-sm">Inventory Logs</span>
|
||||
</a>
|
||||
<a class="flex items-center px-3 py-2 text-slate-600 hover:text-teal-700 hover:bg-slate-100 rounded-lg transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="edit_note">edit_note</span>
|
||||
<span class="font-medium text-sm">Stock Adjust</span>
|
||||
</a>
|
||||
<a class="flex items-center px-3 py-2 bg-teal-50 text-teal-800 border-r-4 border-teal-600 rounded-sm transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="swap_horiz">swap_horiz</span>
|
||||
<span class="font-medium text-sm">Transfers</span>
|
||||
</a>
|
||||
<a class="flex items-center px-3 py-2 text-slate-600 hover:text-teal-700 hover:bg-slate-100 rounded-lg transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="verified">verified</span>
|
||||
<span class="font-medium text-sm">QC Reports</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-3 mt-auto space-y-1">
|
||||
<a class="flex items-center px-3 py-2 text-slate-600 hover:bg-slate-100 rounded-lg transition-all" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="support_agent">support_agent</span>
|
||||
<span class="font-medium text-sm">Support</span>
|
||||
</a>
|
||||
<a class="flex items-center px-3 py-2 text-slate-600 hover:bg-slate-100 rounded-lg transition-all" href="#">
|
||||
<span class="material-symbols-outlined mr-3" data-icon="logout">logout</span>
|
||||
<span class="font-medium text-sm">Logout</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content -->
|
||||
<main class="ml-64 flex-1 min-h-screen flex flex-col">
|
||||
<!-- TopNavBar -->
|
||||
<header class="bg-white sticky top-0 z-40 border-b border-slate-200 flex justify-between items-center h-14 px-6 w-full">
|
||||
<div class="flex items-center flex-1">
|
||||
<div class="relative w-64">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-sm">search</span>
|
||||
<input class="w-full bg-slate-50 border-none rounded-md py-1.5 pl-9 pr-4 text-xs focus:ring-2 focus:ring-teal-600/20" placeholder="Cari lot atau lokasi..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="text-slate-500 hover:bg-slate-50 p-2 rounded-full transition-colors 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="text-slate-500 hover:bg-slate-50 p-2 rounded-full transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
</button>
|
||||
<button class="text-slate-500 hover:bg-slate-50 p-2 rounded-full transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
</button>
|
||||
<div class="h-8 w-[1px] bg-slate-200 mx-1"></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="text-right">
|
||||
<p class="text-xs font-bold text-slate-700">Ahmad Manager</p>
|
||||
<p class="text-[10px] text-teal-600 font-medium">Warehouse Head</p>
|
||||
</div>
|
||||
<img alt="Manager Avatar" class="w-8 h-8 rounded-full border border-slate-200" data-alt="professional portrait of a warehouse manager in a clean warehouse office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBAeDICWVEbtZxsjdraD21POyPjMTZOSBH8UIYN_ex3N52iGvDxbfBlGk7NmA2itgerUL4ZEjcX5w-aRhpg1_SWpAzCq3_HHarCN09zQpcyY-xyBT-XW-j9xeGrwbJJvVyp-kYlyDEzp6mANJDS6B0kh__8sPRThpjsNa8hDQ-yqVopvoQgepsYoWuPcQcGLHHBGQEFZ2uNtzo7xVXotzjGCgT4GCIR8AkFLe67HshdWuaZRlogsizyezW79UyUq5hoeTh5rtE-wA"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Canvas -->
|
||||
<div class="p-container-margin">
|
||||
<!-- Header Section -->
|
||||
<div class="mb-8 flex justify-between items-end">
|
||||
<div>
|
||||
<nav class="flex items-center gap-2 text-xs text-slate-500 mb-2 font-medium">
|
||||
<span>Inventory</span>
|
||||
<span class="material-symbols-outlined text-[10px]">chevron_right</span>
|
||||
<span class="text-teal-700 font-bold">Transfer Antar Gudang</span>
|
||||
</nav>
|
||||
<h2 class="font-h1 text-h1 text-on-surface">Transfer Lot Internal</h2>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">Lakukan pemindahan stok antar gedung atau rak penyimpanan di dalam area operasional.</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="px-4 py-2 text-teal-700 border border-teal-600 rounded-lg text-sm font-semibold hover:bg-teal-50 transition-colors">Batal</button>
|
||||
<button class="px-4 py-2 bg-primary text-white rounded-lg text-sm font-semibold hover:bg-teal-900 transition-shadow shadow-sm">Simpan Transfer</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-12 gap-6">
|
||||
<!-- Main Form Column -->
|
||||
<div class="col-span-12 lg:col-span-8 space-y-6">
|
||||
<!-- Step 1: Lot Information -->
|
||||
<div class="bg-white border border-outline-variant rounded-xl overflow-hidden shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-6 h-6 rounded-full bg-primary text-white flex items-center justify-center text-[10px] font-bold">1</span>
|
||||
<h3 class="font-h2 text-h2 text-on-surface">Pilih Lot Inventaris</h3>
|
||||
</div>
|
||||
<span class="px-2 py-1 bg-secondary-container text-on-secondary-container text-[10px] font-bold rounded uppercase tracking-wider">Wajib Diisi</span>
|
||||
</div>
|
||||
<div class="p-6 grid grid-cols-2 gap-4">
|
||||
<div class="col-span-2">
|
||||
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1.5 uppercase">LOT ID / BARCODE</label>
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">qr_code_scanner</span>
|
||||
<select class="w-full bg-surface border-outline focus:ring-2 focus:ring-primary rounded-lg py-2.5 pl-10 text-body-base font-body-base appearance-none cursor-pointer">
|
||||
<option value="">Pilih Lot yang akan dipindah...</option>
|
||||
<option value="LOT-SBW-2023-001">LOT-SBW-2023-001 (Super Grade A - 15.5 kg)</option>
|
||||
<option value="LOT-SBW-2023-042">LOT-SBW-2023-042 (Premium Bowl - 8.2 kg)</option>
|
||||
<option value="LOT-SBW-2023-115">LOT-SBW-2023-115 (Triangular Grade - 22.0 kg)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1.5 uppercase">GUDANG ASAL</label>
|
||||
<input class="w-full bg-surface-container-low border-outline-variant text-slate-500 rounded-lg py-2.5 text-body-base font-body-base" readonly="" type="text" value="Gudang Utama (Main Hub)"/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1.5 uppercase">LOKASI ASAL</label>
|
||||
<input class="w-full bg-surface-container-low border-outline-variant text-slate-500 rounded-lg py-2.5 text-body-base font-body-base" readonly="" type="text" value="RAK-A-04-12"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Step 2: Destination -->
|
||||
<div class="bg-white border border-outline-variant rounded-xl overflow-hidden shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-6 h-6 rounded-full bg-primary text-white flex items-center justify-center text-[10px] font-bold">2</span>
|
||||
<h3 class="font-h2 text-h2 text-on-surface">Detail Tujuan Transfer</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1.5 uppercase">PILIH GUDANG TUJUAN</label>
|
||||
<select class="w-full bg-surface border-outline focus:ring-2 focus:ring-primary rounded-lg py-2.5 text-body-base font-body-base">
|
||||
<option value="">Pilih Gudang...</option>
|
||||
<option value="WH2">Gudang Karantina (WH-02)</option>
|
||||
<option value="WH3">Gudang Ekspor (WH-03)</option>
|
||||
<option value="WH4">Area Pembersihan (Processing)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1.5 uppercase">PILIH LOKASI TUJUAN</label>
|
||||
<select class="w-full bg-surface border-outline focus:ring-2 focus:ring-primary rounded-lg py-2.5 text-body-base font-body-base">
|
||||
<option value="">Pilih Rak/Slot...</option>
|
||||
<option value="R1">RAK-EX-01</option>
|
||||
<option value="R2">RAK-EX-02</option>
|
||||
<option value="R3">RAK-EX-03</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1.5 uppercase">QTY TRANSFER</label>
|
||||
<div class="relative">
|
||||
<input class="w-full bg-surface border-outline focus:ring-2 focus:ring-primary rounded-lg py-2.5 pr-16 text-body-base font-bold text-primary" placeholder="0.00" type="number"/>
|
||||
<span class="absolute right-4 top-1/2 -translate-y-1/2 text-xs font-bold text-on-surface-variant">KILOGRAM</span>
|
||||
</div>
|
||||
<p class="text-[11px] text-slate-500 mt-1 font-medium italic">*Maksimal transfer: 15.5 kg (stok tersedia)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Step 3: Administration -->
|
||||
<div class="bg-white border border-outline-variant rounded-xl overflow-hidden shadow-[0px_2px_4px_rgba(0,0,0,0.05)]">
|
||||
<div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between bg-slate-50/50">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-6 h-6 rounded-full bg-primary text-white flex items-center justify-center text-[10px] font-bold">3</span>
|
||||
<h3 class="font-h2 text-h2 text-on-surface">Administrasi & Tanggal</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-6 grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1.5 uppercase">PETUGAS PELAKSANA</label>
|
||||
<div class="flex items-center gap-3 bg-surface-container-low p-2 rounded-lg border border-outline-variant">
|
||||
<img alt="Staff" class="w-6 h-6 rounded-full" data-alt="close up headshot of a logistics worker wearing a safety vest" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAS1LIfEoBfZoDvVw5vLWT-JZ-G_9vAeN9V6PAHShd9LYYkkpf6gEUUogLVpO_h7t2zk5GIIl2OpXVHBoAGqynNaUmUL0YNMOYMtmSmDHi0zOwvLQW508dz6xp1fyY1ykib1FpkPjruXUSIU5faVKzZbXsw25MshZwX13U1rXls1RElvfNpcYxW3OwSyg_cIv5SJ10aicLqLh9eoH-fZiStom7UmNHlGvhf2wu4sytS4ZDCvGn77A-qCnKPtRLZhaDD514X7zFWIQ"/>
|
||||
<span class="text-body-sm font-medium text-slate-700">Budi Pratama (W-Staff)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1.5 uppercase">TANGGAL TRANSFER</label>
|
||||
<div class="relative">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">calendar_today</span>
|
||||
<input class="w-full bg-surface border-outline focus:ring-2 focus:ring-primary rounded-lg py-2.5 pl-10 text-body-base font-body-base" type="date" value="2023-11-24"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<label class="block font-label-caps text-label-caps text-on-surface-variant mb-1.5 uppercase">CATATAN TRANSFER (OPSIONAL)</label>
|
||||
<textarea class="w-full bg-surface border-outline focus:ring-2 focus:ring-primary rounded-lg p-3 text-body-base font-body-base" placeholder="Alasan pemindahan atau detail tambahan..." rows="2"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sidebar Information Column -->
|
||||
<div class="col-span-12 lg:col-span-4 space-y-6">
|
||||
<!-- Real-time Summary Card -->
|
||||
<div class="bg-primary text-white rounded-xl p-6 shadow-xl relative overflow-hidden">
|
||||
<div class="relative z-10">
|
||||
<h4 class="font-label-caps text-label-caps text-on-primary-container mb-4 uppercase">Ringkasan Transfer</h4>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex justify-between items-center pb-3 border-b border-teal-800">
|
||||
<span class="text-sm opacity-80">Lot Terpilih</span>
|
||||
<span class="text-sm font-bold">---</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center pb-3 border-b border-teal-800">
|
||||
<span class="text-sm opacity-80">Dari</span>
|
||||
<span class="text-sm font-bold">Main Hub</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center pb-3 border-b border-teal-800">
|
||||
<span class="text-sm opacity-80">Ke</span>
|
||||
<span class="text-sm font-bold">---</span>
|
||||
</div>
|
||||
<div class="pt-2">
|
||||
<p class="text-xs opacity-70 mb-1">Estimasi Berat Transfer</p>
|
||||
<p class="text-3xl font-black">0.00 <span class="text-sm font-normal">kg</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined absolute -bottom-4 -right-4 text-9xl opacity-10 rotate-12" data-icon="swap_horiz">swap_horiz</span>
|
||||
</div>
|
||||
<!-- Safety Checklist -->
|
||||
<div class="bg-white border border-outline-variant rounded-xl p-6 shadow-sm">
|
||||
<h4 class="font-h2 text-h2 text-on-surface mb-4">Panduan Keamanan</h4>
|
||||
<ul class="space-y-4">
|
||||
<li class="flex gap-3">
|
||||
<span class="material-symbols-outlined text-teal-600 text-lg">check_circle</span>
|
||||
<p class="text-body-sm text-on-surface-variant">Pastikan timbangan telah dikalibrasi sebelum melakukan transfer fisik.</p>
|
||||
</li>
|
||||
<li class="flex gap-3">
|
||||
<span class="material-symbols-outlined text-teal-600 text-lg">check_circle</span>
|
||||
<p class="text-body-sm text-on-surface-variant">Gunakan sarung tangan steril saat menangani kotak lot sarang burung.</p>
|
||||
</li>
|
||||
<li class="flex gap-3">
|
||||
<span class="material-symbols-outlined text-teal-600 text-lg">check_circle</span>
|
||||
<p class="text-body-sm text-on-surface-variant">Update label fisik pada kotak setelah dipindahkan ke rak baru.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Image Section -->
|
||||
<div class="rounded-xl overflow-hidden border border-outline-variant shadow-sm aspect-video relative group">
|
||||
<img alt="Warehouse Map" class="w-full h-full object-cover" data-alt="architectural clean blueprint layout of a modern warehouse showing zones A B and C with color coded shelving" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAebgB5qWnPcAHLKIn0NVXSgEXH2bcxgoHCdpG0jvGvpM2iDaopbrgZPGXuFfh3zOF4188JeObOqnpyt5Wwg7uEDOuOHkJJ3Lxy_UGxbU3Lc6EnU_ist4PnZfH8P5JGnPRF_OT8h8CeR0ggeyQ-DbKWJkHoOZJWu4fqKDZQ8DfTTnb9LM7h7bzDSJUJUiI4HlSSJc81r85XqsNv6qCeKKLqG1MoQmihOFYS3lV9T3o4bqRPhnkwWB9QL-ilhLsjhGcA8GgKrABEEw"/>
|
||||
<div class="absolute inset-0 bg-primary/20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span class="px-4 py-2 bg-white text-primary text-xs font-bold rounded-full shadow-lg cursor-pointer">Lihat Peta Lokasi</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer -->
|
||||
<footer class="mt-auto p-6 bg-slate-50 border-t border-slate-200">
|
||||
<div class="flex justify-between items-center opacity-60">
|
||||
<p class="text-[10px] font-medium text-slate-500 uppercase tracking-widest">Sarang Inventory Pro v2.4.0</p>
|
||||
<p class="text-[10px] font-medium text-slate-500 uppercase tracking-widest">© 2023 SarangWMS Logistics System</p>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
<!-- Contextual FAB (Hidden on this specific task page as per rules, but showing for UI completeness if needed by layout) -->
|
||||
<!-- Suppressed on Form/Details pages per "Contextual FAB Suppression" rule -->
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/transfer_antar_gudang/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/transfer_antar_gudang/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 396 KiB |
Reference in New Issue
Block a user