Initial import of AbelBirdNest Stock
This commit is contained in:
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 |
Reference in New Issue
Block a user