Initial import of AbelBirdNest Stock
This commit is contained in:
420
design-assets/stitch_abel_stock/daftar_pemasok_1/code.html
Normal file
420
design-assets/stitch_abel_stock/daftar_pemasok_1/code.html
Normal file
@ -0,0 +1,420 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-primary-container": "#92d5df",
|
||||
"on-primary": "#ffffff",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"on-tertiary": "#ffffff",
|
||||
"surface-tint": "#1d6871",
|
||||
"primary": "#00454c",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"on-background": "#191c1d",
|
||||
"tertiary": "#60320f",
|
||||
"surface": "#f8fafa",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-surface": "#191c1d",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"error": "#ba1a1a",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"error-container": "#ffdad6",
|
||||
"on-error": "#ffffff",
|
||||
"surface-variant": "#e1e3e3",
|
||||
"outline": "#6f797a",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"on-secondary-container": "#526478",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"tertiary-container": "#7c4824",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-error-container": "#93000a",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"surface-bright": "#f8fafa",
|
||||
"secondary": "#4e6073",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"primary-container": "#0d5e67",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"surface-dim": "#d8dadb",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"background": "#f8fafa",
|
||||
"surface-container": "#eceeee",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"inverse-surface": "#2e3131"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"gutter": "16px",
|
||||
"row-height-sm": "32px",
|
||||
"row-height-md": "48px",
|
||||
"container-margin": "24px",
|
||||
"compact-padding": "8px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display-lot": ["Inter"],
|
||||
"h2": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"label-caps": ["Inter"],
|
||||
"body-base": ["Inter"],
|
||||
"table-data": ["Inter"],
|
||||
"h1": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"display-lot": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}],
|
||||
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "500"}],
|
||||
"h1": ["20px", {"lineHeight": "28px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-background antialiased">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 left-0 w-full z-40 flex justify-between items-center px-6 h-16 bg-white border-b border-slate-200 shadow-sm">
|
||||
<div class="flex items-center gap-4">
|
||||
<img alt="Logo Perusahaan Walet" class="h-10 w-auto" data-alt="Corporate minimalist logo for bird's nest company featuring a stylized swift bird icon in teal color" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBbjyPNHZQwSEKJXwRvtfnHtZ-yTzUkp54PbPcRU4rh_u1-SCYCYTT88GuSnKRe0KRaDO0RfJBJ6G64dzjbF-SY66HKRrn9D71_CFhT-IQfLa0nfTYw_8bAmRDu4J8a5JEtQom7ICoJ19OnAcQyTw8foYuxFRg8uYNHpC3OlTRPjpxuEvb1pbQQBXr8Uce16OhW-h--L2Fc9ZwWdoTJ4OTii7Ra9h-uDAGYzOJkeR1U0VakMuZn4VZcUZ8zyzELdGc0UwTdpGzTfg"/>
|
||||
<span class="font-inter text-xl font-bold text-teal-700">Sistem Inventaris Walet</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="hidden md:flex items-center bg-slate-50 border border-slate-200 rounded px-3 py-1.5">
|
||||
<span class="material-symbols-outlined text-slate-400 text-sm">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-sm w-64" placeholder="Cari data..." type="text"/>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="material-symbols-outlined text-slate-500 hover:bg-slate-50 p-2 rounded transition-colors">notifications</button>
|
||||
<button class="material-symbols-outlined text-slate-500 hover:bg-slate-50 p-2 rounded transition-colors">help_outline</button>
|
||||
<button class="bg-primary text-on-primary px-4 py-2 rounded font-inter text-sm flex items-center gap-2 active:opacity-80 transition-all">
|
||||
<span class="material-symbols-outlined text-sm">qr_code_scanner</span>
|
||||
Scan Barcode
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- SideNavBar -->
|
||||
<aside class="fixed left-0 top-0 h-full flex flex-col py-6 bg-slate-50 w-64 border-r border-slate-200 z-30">
|
||||
<div class="px-6 mb-10 pt-16">
|
||||
<h2 class="text-lg font-black text-teal-800 font-inter">Inventory Walet</h2>
|
||||
<p class="text-xs font-medium uppercase tracking-wider text-slate-500">Sistem Traceability</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-transform duration-200" href="#">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span class="font-inter text-xs font-medium uppercase tracking-wider">Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-transform duration-200" href="#">
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
<span class="font-inter text-xs font-medium uppercase tracking-wider">Laporan Stok</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 bg-teal-50 text-teal-700 rounded-r-lg border-l-4 border-teal-700 hover:translate-x-1 transition-transform duration-200" href="#">
|
||||
<span class="material-symbols-outlined">database</span>
|
||||
<span class="font-inter text-xs font-medium uppercase tracking-wider">Data Master</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-transform duration-200" href="#">
|
||||
<span class="material-symbols-outlined">qr_code_scanner</span>
|
||||
<span class="font-inter text-xs font-medium uppercase tracking-wider">Pelacakan</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 hover:bg-slate-100 hover:translate-x-1 transition-transform duration-200" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="font-inter text-xs font-medium uppercase tracking-wider">Pengaturan</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-4 py-6 mt-auto border-t border-slate-200">
|
||||
<button class="w-full bg-primary text-on-primary py-3 rounded-lg font-bold flex items-center justify-center gap-2 mb-4 hover:translate-x-1 transition-transform active:scale-95 duration-75">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
Tambah Lot Baru
|
||||
</button>
|
||||
<a class="flex items-center gap-3 px-4 py-2 text-slate-600 hover:bg-slate-100 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
<span class="font-inter text-xs font-medium uppercase tracking-wider">Bantuan</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-2 text-slate-600 hover:bg-slate-100 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">logout</span>
|
||||
<span class="font-inter text-xs font-medium uppercase tracking-wider">Log Keluar</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="pl-64 pt-16 min-h-screen">
|
||||
<div class="p-container-margin">
|
||||
<!-- Header Section -->
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<h1 class="font-h1 text-h1 text-on-background">Daftar Pemasok</h1>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant">Kelola database pemasok sarang burung walet mentah dan mitra ekspor.</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="px-4 py-2 border border-outline text-on-surface rounded font-inter text-sm flex items-center gap-2 hover:bg-surface-container-high transition-colors">
|
||||
<span class="material-symbols-outlined text-sm">download</span>
|
||||
Ekspor CSV
|
||||
</button>
|
||||
<button class="px-4 py-2 bg-primary text-on-primary rounded font-inter text-sm flex items-center gap-2 active:opacity-90 shadow-sm">
|
||||
<span class="material-symbols-outlined text-sm">person_add</span>
|
||||
Tambah Pemasok
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dashboard Stats Summary (Bento-style layout) -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
|
||||
<div class="bg-white p-4 rounded border border-slate-200 shadow-sm flex items-center gap-4">
|
||||
<div class="p-3 bg-teal-50 text-teal-700 rounded">
|
||||
<span class="material-symbols-outlined">groups</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-caps text-label-caps text-on-surface-variant">TOTAL PEMASOK</p>
|
||||
<p class="font-display-lot text-display-lot text-on-surface">42</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 rounded border border-slate-200 shadow-sm flex items-center gap-4">
|
||||
<div class="p-3 bg-secondary-container text-on-secondary-container rounded">
|
||||
<span class="material-symbols-outlined">verified</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-caps text-label-caps text-on-surface-variant">PEMASOK TERVERIFIKASI</p>
|
||||
<p class="font-display-lot text-display-lot text-on-surface">38</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 rounded border border-slate-200 shadow-sm flex items-center gap-4">
|
||||
<div class="p-3 bg-tertiary-fixed text-on-tertiary-fixed-variant rounded">
|
||||
<span class="material-symbols-outlined">local_shipping</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-caps text-label-caps text-on-surface-variant">PENGIRIMAN BULAN INI</p>
|
||||
<p class="font-display-lot text-display-lot text-on-surface">128</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-4 rounded border border-slate-200 shadow-sm flex items-center gap-4">
|
||||
<div class="p-3 bg-primary-fixed text-on-primary-fixed-variant rounded">
|
||||
<span class="material-symbols-outlined">trending_up</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-caps text-label-caps text-on-surface-variant">TOTAL VOLUME (KG)</p>
|
||||
<p class="font-display-lot text-display-lot text-on-surface">1,450.5</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Supplier Table Container -->
|
||||
<div class="bg-white rounded border border-slate-200 shadow-sm overflow-hidden">
|
||||
<!-- Table Controls -->
|
||||
<div class="px-6 py-4 border-b border-slate-200 flex flex-wrap items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative">
|
||||
<select class="appearance-none bg-slate-50 border border-slate-200 text-sm rounded px-4 py-2 pr-10 focus:ring-primary focus:border-primary">
|
||||
<option>Semua Wilayah</option>
|
||||
<option>Kalimantan Barat</option>
|
||||
<option>Sumatera Utara</option>
|
||||
<option>Jawa Tengah</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-3 top-2.5 text-slate-400 pointer-events-none text-sm">expand_more</span>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<select class="appearance-none bg-slate-50 border border-slate-200 text-sm rounded px-4 py-2 pr-10 focus:ring-primary focus:border-primary">
|
||||
<option>Semua Status</option>
|
||||
<option>Aktif</option>
|
||||
<option>Non-Aktif</option>
|
||||
</select>
|
||||
<span class="material-symbols-outlined absolute right-3 top-2.5 text-slate-400 pointer-events-none text-sm">expand_more</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="font-body-sm text-body-sm text-slate-500">Menampilkan 1-10 dari 42 pemasok</p>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-slate-50 border-b border-slate-200">
|
||||
<th class="px-6 py-4 text-left font-label-caps text-label-caps text-on-surface-variant uppercase">Kode Pemasok</th>
|
||||
<th class="px-6 py-4 text-left font-label-caps text-label-caps text-on-surface-variant uppercase">Nama Pemasok</th>
|
||||
<th class="px-6 py-4 text-left font-label-caps text-label-caps text-on-surface-variant uppercase">Informasi Kontak</th>
|
||||
<th class="px-6 py-4 text-left font-label-caps text-label-caps text-on-surface-variant uppercase">Detail Bank</th>
|
||||
<th class="px-6 py-4 text-left font-label-caps text-label-caps text-on-surface-variant uppercase">Status</th>
|
||||
<th class="px-6 py-4 text-right font-label-caps text-label-caps text-on-surface-variant uppercase">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
<!-- Supplier Row 1 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-primary font-bold">SUP-W-001</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center font-bold text-teal-700 text-xs">BT</div>
|
||||
<div>
|
||||
<p class="font-table-data text-table-data text-on-surface">UD Berkah Tayan</p>
|
||||
<p class="text-[11px] text-on-surface-variant">Kalimantan Barat</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<p class="font-body-sm text-body-sm text-on-surface">+62 812-3456-7890</p>
|
||||
<p class="text-[11px] text-on-surface-variant">berkahtayan@example.com</p>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-1.5 py-0.5 bg-slate-200 rounded text-[10px] font-bold text-slate-700">BCA</span>
|
||||
<p class="font-table-data text-table-data text-on-surface">882-019-2831</p>
|
||||
</div>
|
||||
<p class="text-[11px] text-on-surface-variant">A.n. Ahmad Sudrajat</p>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
||||
Aktif
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="material-symbols-outlined text-slate-400 hover:text-primary transition-colors">more_vert</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Supplier Row 2 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-primary font-bold">SUP-W-002</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center font-bold text-teal-700 text-xs">MA</div>
|
||||
<div>
|
||||
<p class="font-table-data text-table-data text-on-surface">Mitra Abadi Medan</p>
|
||||
<p class="text-[11px] text-on-surface-variant">Sumatera Utara</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<p class="font-body-sm text-body-sm text-on-surface">+62 811-9988-7766</p>
|
||||
<p class="text-[11px] text-on-surface-variant">mitramedan@example.com</p>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-1.5 py-0.5 bg-slate-200 rounded text-[10px] font-bold text-slate-700">BNI</span>
|
||||
<p class="font-table-data text-table-data text-on-surface">0932-1122-33</p>
|
||||
</div>
|
||||
<p class="text-[11px] text-on-surface-variant">A.n. CV Mitra Abadi</p>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
||||
Aktif
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="material-symbols-outlined text-slate-400 hover:text-primary transition-colors">more_vert</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Supplier Row 3 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-primary font-bold">SUP-W-003</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center font-bold text-teal-700 text-xs">SJ</div>
|
||||
<div>
|
||||
<p class="font-table-data text-table-data text-on-surface">Sumber Jaya Walet</p>
|
||||
<p class="text-[11px] text-on-surface-variant">Jawa Tengah</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<p class="font-body-sm text-body-sm text-on-surface">+62 813-0011-2233</p>
|
||||
<p class="text-[11px] text-on-surface-variant">sumberjaya@example.com</p>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-1.5 py-0.5 bg-slate-200 rounded text-[10px] font-bold text-slate-700">Mandiri</span>
|
||||
<p class="font-table-data text-table-data text-on-surface">123-00-0987654-2</p>
|
||||
</div>
|
||||
<p class="text-[11px] text-on-surface-variant">A.n. Lilik Wijaya</p>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
|
||||
Menunggu Verifikasi
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="material-symbols-outlined text-slate-400 hover:text-primary transition-colors">more_vert</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Supplier Row 4 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors">
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-primary font-bold">SUP-W-004</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center font-bold text-teal-700 text-xs">PH</div>
|
||||
<div>
|
||||
<p class="font-table-data text-table-data text-on-surface">Putra Hulu Kapuas</p>
|
||||
<p class="text-[11px] text-on-surface-variant">Kalimantan Barat</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<p class="font-body-sm text-body-sm text-on-surface">+62 852-1111-2222</p>
|
||||
<p class="text-[11px] text-on-surface-variant">putrahulu@example.com</p>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-1.5 py-0.5 bg-slate-200 rounded text-[10px] font-bold text-slate-700">BRI</span>
|
||||
<p class="font-table-data text-table-data text-on-surface">0021-01-223344-55-6</p>
|
||||
</div>
|
||||
<p class="text-[11px] text-on-surface-variant">A.n. PT Putra Hulu Kapuas</p>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
||||
Aktif
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="material-symbols-outlined text-slate-400 hover:text-primary transition-colors">more_vert</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Pagination -->
|
||||
<div class="px-6 py-4 bg-slate-50 border-t border-slate-200 flex items-center justify-between">
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-500 hover:text-primary disabled:opacity-50" disabled="">Sebelumnya</button>
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="w-8 h-8 rounded bg-primary text-on-primary text-xs font-bold">1</button>
|
||||
<button class="w-8 h-8 rounded hover:bg-slate-200 text-xs font-bold">2</button>
|
||||
<button class="w-8 h-8 rounded hover:bg-slate-200 text-xs font-bold">3</button>
|
||||
<span class="px-2 text-slate-400 text-xs">...</span>
|
||||
<button class="w-8 h-8 rounded hover:bg-slate-200 text-xs font-bold">5</button>
|
||||
</div>
|
||||
<button class="px-3 py-1.5 text-xs font-medium text-slate-500 hover:text-primary">Selanjutnya</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- FAB for mobile context -->
|
||||
<div class="md:hidden fixed bottom-6 right-6 z-50">
|
||||
<button class="w-14 h-14 bg-primary text-on-primary rounded-full shadow-lg flex items-center justify-center active:scale-95 transition-transform">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/daftar_pemasok_1/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/daftar_pemasok_1/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 256 KiB |
Reference in New Issue
Block a user