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