393 lines
21 KiB
HTML
393 lines
21 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;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> |