533 lines
27 KiB
HTML
533 lines
27 KiB
HTML
<!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> |