Initial import of AbelBirdNest Stock
This commit is contained in:
483
design-assets/stitch_abel_stock/daftar_pelanggan_2/code.html
Normal file
483
design-assets/stitch_abel_stock/daftar_pelanggan_2/code.html
Normal file
@ -0,0 +1,483 @@
|
||||
<!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 {
|
||||
background-color: #f8fafa;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="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 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 shadow-sm dark:shadow-none font-inter text-sm antialiased">
|
||||
<div class="flex items-center gap-4">
|
||||
<img alt="Logo" class="h-8 w-8 object-contain" data-alt="Corporate logo for a bird nest export company featuring abstract avian motifs in teal and white" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBM2gcbZe8pws9VmvjSISlHLqdPLwgbvuhS0PBnXJ9g4-Nf5_Td5xhZsYmJfAIRYuJ6heJu-ytIt77GPuqgZmQlhR_VSlrMtjrZbQc9uKxcNwfSjzX3RKI_9L59FJABN0Vw3mh7S69jQeX3HdlkM5nmntGKR6sEfngsWJqI5GjD1UhTSuHEnDIPIYNXsJ8MBUcn-qWej9UWd-Ifu7q2L0cFxvYvspSMSSk2NqdO1uAj3LV5Dnn_cOlZIEhd2SB-Qdf6OtdG3WyWcA"/>
|
||||
<span class="text-xl font-bold text-teal-700 dark:text-teal-400">Sistem Inventaris Walet</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="hidden md:flex items-center bg-slate-100 dark:bg-slate-800 rounded-lg px-3 py-1.5 border border-slate-200 dark:border-slate-700">
|
||||
<span class="material-symbols-outlined text-slate-500 mr-2" style="font-size: 18px;">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-sm w-48 text-on-surface" placeholder="Cari data..." type="text"/>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button class="p-2 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors text-slate-500 rounded-full">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors text-slate-500 rounded-full">
|
||||
<span class="material-symbols-outlined">help_outline</span>
|
||||
</button>
|
||||
<div class="h-8 w-px bg-slate-200 dark:bg-slate-700 mx-1"></div>
|
||||
<button class="bg-primary text-on-primary px-4 py-2 rounded-lg flex items-center gap-2 font-medium text-xs active:opacity-80 transition-all duration-150">
|
||||
<span class="material-symbols-outlined" style="font-size: 18px;">qr_code_scanner</span>
|
||||
Scan Barcode
|
||||
</button>
|
||||
<img alt="Profil Pengguna" class="h-8 w-8 rounded-full border border-slate-200" data-alt="professional male headshot for a user profile avatar in a corporate software setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBC5r0mbAMZ9cVAnKeRD_TBQBu23Cice8zGXgQvtgVf7CnUVal5a01rAJxV-AmU6F2QRXyJsxWMXeaDBFY1f6Z6Y7tZ9peE3RBXKpbOKu67tDDDPO_VLXe3Huj2phIiE2CkTXGLtx6WjxnbsiSbUpxj-p_XfJsFP1dZTn13fJWHJ1-UT5tM09wtOl3HUFSBpV_f-OCbbHiinR_6OCUahlYmo9EEweF_CZDcGehA1FIMXGdhM7HBSpTZxO1PjvHzzWUHI4NkZiP-RA"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- SideNavBar -->
|
||||
<aside class="fixed left-0 top-0 h-full w-64 flex flex-col py-6 bg-slate-50 dark:bg-slate-950 border-r border-slate-200 dark:border-slate-800 z-30 pt-20">
|
||||
<div class="px-6 mb-8">
|
||||
<h2 class="text-lg font-black text-teal-800 dark:text-teal-300 font-inter">Inventory Walet</h2>
|
||||
<p class="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">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 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 hover:translate-x-1 transition-transform duration-200 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
Dashboard
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 hover:translate-x-1 transition-transform duration-200 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">inventory_2</span>
|
||||
Laporan Stok
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 bg-teal-50 dark:bg-teal-900/20 text-teal-700 dark:text-teal-400 rounded-r-lg border-l-4 border-teal-700 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">database</span>
|
||||
Data Master
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 hover:translate-x-1 transition-transform duration-200 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">qr_code_scanner</span>
|
||||
Pelacakan
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 hover:translate-x-1 transition-transform duration-200 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
Pengaturan
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-4 mb-6">
|
||||
<button class="w-full bg-teal-700 hover:bg-teal-800 text-white rounded-lg py-2.5 flex items-center justify-center gap-2 text-xs font-bold transition-all active:scale-95 duration-75">
|
||||
<span class="material-symbols-outlined" style="font-size: 18px;">add</span>
|
||||
Tambah Lot Baru
|
||||
</button>
|
||||
</div>
|
||||
<div class="border-t border-slate-200 dark:border-slate-800 pt-4">
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-900 hover:translate-x-1 transition-transform duration-200 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
Bantuan
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-4 py-3 text-error hover:bg-error/5 hover:translate-x-1 transition-transform duration-200 font-inter text-xs font-medium uppercase tracking-wider" href="#">
|
||||
<span class="material-symbols-outlined">logout</span>
|
||||
Log Keluar
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content -->
|
||||
<main class="ml-64 pt-20 p-8 min-h-screen">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<!-- Header Section -->
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-8">
|
||||
<div>
|
||||
<nav class="flex text-xs text-slate-500 mb-2 gap-2">
|
||||
<span>Data Master</span>
|
||||
<span>/</span>
|
||||
<span class="text-teal-700 font-semibold">Daftar Pelanggan</span>
|
||||
</nav>
|
||||
<h1 class="font-h1 text-h1 text-on-surface">Daftar Pelanggan</h1>
|
||||
<p class="font-body-sm text-body-sm text-on-surface-variant mt-1">Kelola data klien ekspor dan distributor domestik sarang burung walet.</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="px-4 py-2 border border-outline text-on-surface hover:bg-surface-container transition-colors rounded-lg flex items-center gap-2 text-xs font-semibold">
|
||||
<span class="material-symbols-outlined" style="font-size: 18px;">download</span>
|
||||
Ekspor CSV
|
||||
</button>
|
||||
<button class="px-4 py-2 bg-primary text-on-primary hover:bg-primary-container transition-colors rounded-lg flex items-center gap-2 text-xs font-semibold shadow-sm">
|
||||
<span class="material-symbols-outlined" style="font-size: 18px;">person_add</span>
|
||||
Tambah Pelanggan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dashboard Stats Summary -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||
<div class="bg-white p-5 border border-slate-200 rounded-xl shadow-sm">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Total Pelanggan</p>
|
||||
<h3 class="text-2xl font-bold text-on-surface">148</h3>
|
||||
</div>
|
||||
<div class="p-2 bg-teal-50 text-teal-700 rounded-lg">
|
||||
<span class="material-symbols-outlined">group</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center text-emerald-600 text-[11px] font-bold">
|
||||
<span class="material-symbols-outlined text-[14px] mr-1">trending_up</span>
|
||||
+12% Bulan ini
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-5 border border-slate-200 rounded-xl shadow-sm">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Pelanggan Aktif</p>
|
||||
<h3 class="text-2xl font-bold text-on-surface">124</h3>
|
||||
</div>
|
||||
<div class="p-2 bg-blue-50 text-blue-700 rounded-lg">
|
||||
<span class="material-symbols-outlined">verified</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center text-slate-500 text-[11px] font-bold">
|
||||
Berdasarkan transaksi 30 hari terakhir
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-5 border border-slate-200 rounded-xl shadow-sm">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Wilayah Ekspor</p>
|
||||
<h3 class="text-2xl font-bold text-on-surface">12</h3>
|
||||
</div>
|
||||
<div class="p-2 bg-amber-50 text-amber-700 rounded-lg">
|
||||
<span class="material-symbols-outlined">public</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center text-amber-600 text-[11px] font-bold">
|
||||
Tiongkok, Vietnam, Singapura
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white p-5 border border-slate-200 rounded-xl shadow-sm">
|
||||
<div class="flex justify-between items-start">
|
||||
<div>
|
||||
<p class="text-slate-500 text-xs font-bold uppercase tracking-wider mb-1">Piutang Berjalan</p>
|
||||
<h3 class="text-2xl font-bold text-on-surface">Rp 2.4M</h3>
|
||||
</div>
|
||||
<div class="p-2 bg-slate-50 text-slate-700 rounded-lg">
|
||||
<span class="material-symbols-outlined">account_balance_wallet</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex items-center text-error text-[11px] font-bold">
|
||||
<span class="material-symbols-outlined text-[14px] mr-1">warning</span>
|
||||
3 Melewati tenggat
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Table Container -->
|
||||
<div class="bg-white border border-slate-200 rounded-xl shadow-sm overflow-hidden">
|
||||
<div class="p-4 border-b border-slate-100 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<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-[20px]">filter_list</span>
|
||||
<select class="pl-10 pr-8 py-2 bg-slate-50 border-slate-200 rounded-lg text-xs font-semibold text-on-surface focus:ring-teal-700 focus:border-teal-700">
|
||||
<option>Semua Wilayah</option>
|
||||
<option>Domestik</option>
|
||||
<option>Internasional</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs font-medium text-slate-500">
|
||||
Menampilkan 1-10 dari 148
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative w-full md:w-72">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[20px]">search</span>
|
||||
<input class="w-full pl-10 pr-4 py-2 bg-slate-50 border-slate-200 rounded-lg text-xs focus:ring-teal-700 focus:border-teal-700" placeholder="Cari Kode atau Nama..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-slate-50 text-left border-b border-slate-200">
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-slate-500 uppercase tracking-wider">KODE</th>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-slate-500 uppercase tracking-wider">NAMA PELANGGAN</th>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-slate-500 uppercase tracking-wider">KONTAK & EMAIL</th>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-slate-500 uppercase tracking-wider">INFORMASI BANK</th>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-slate-500 uppercase tracking-wider">WILAYAH</th>
|
||||
<th class="px-6 py-4 font-label-caps text-label-caps text-slate-500 uppercase tracking-wider">STATUS</th>
|
||||
<th class="px-6 py-4 text-right"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
<!-- Row 1 -->
|
||||
<tr class="hover:bg-slate-50/80 transition-colors">
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-teal-800 font-bold">CUST-001</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">Tianjin Trading Co., Ltd</span>
|
||||
<span class="text-[11px] text-slate-400">Pusat Distribusi Asia Timur</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">+86 138 9988 7766</span>
|
||||
<span class="text-[11px] text-slate-400">order@tianjintrading.cn</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">ICBC Bank</span>
|
||||
<span class="text-[11px] text-slate-400">8823 **** 0092</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2 py-1 bg-slate-100 text-slate-600 rounded text-[10px] font-bold uppercase">Internasional</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2.5 py-1 bg-emerald-100 text-emerald-800 rounded-full text-[10px] font-bold uppercase">Aktif</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="p-1 hover:bg-slate-200 rounded transition-colors text-slate-400">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="hover:bg-slate-50/80 transition-colors">
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-teal-800 font-bold">CUST-002</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">PT Sinar Makmur Abadi</span>
|
||||
<span class="text-[11px] text-slate-400">Distributor Lokal Jakarta</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">021-5556677</span>
|
||||
<span class="text-[11px] text-slate-400">logistic@sinarmakmur.co.id</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">Bank Central Asia</span>
|
||||
<span class="text-[11px] text-slate-400">2210 **** 5541</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2 py-1 bg-teal-50 text-teal-600 rounded text-[10px] font-bold uppercase">Domestik</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2.5 py-1 bg-emerald-100 text-emerald-800 rounded-full text-[10px] font-bold uppercase">Aktif</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="p-1 hover:bg-slate-200 rounded transition-colors text-slate-400">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="hover:bg-slate-50/80 transition-colors">
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-teal-800 font-bold">CUST-003</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">Guangzhou Wellness Ltd</span>
|
||||
<span class="text-[11px] text-slate-400">Importir Obat Tradisional</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">+86 20 1234 5678</span>
|
||||
<span class="text-[11px] text-slate-400">import@gzwellness.com</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">Bank of China</span>
|
||||
<span class="text-[11px] text-slate-400">4431 **** 8899</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2 py-1 bg-slate-100 text-slate-600 rounded text-[10px] font-bold uppercase">Internasional</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2.5 py-1 bg-amber-100 text-amber-800 rounded-full text-[10px] font-bold uppercase">Tertunda</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="p-1 hover:bg-slate-200 rounded transition-colors text-slate-400">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr class="hover:bg-slate-50/80 transition-colors">
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-teal-800 font-bold">CUST-004</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">Singapore Bird Nest Center</span>
|
||||
<span class="text-[11px] text-slate-400">Toko Ritel & Ekspor</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">+65 9123 4567</span>
|
||||
<span class="text-[11px] text-slate-400">contact@sgbirdnest.sg</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">DBS Bank</span>
|
||||
<span class="text-[11px] text-slate-400">1109 **** 2231</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2 py-1 bg-slate-100 text-slate-600 rounded text-[10px] font-bold uppercase">Internasional</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2.5 py-1 bg-emerald-100 text-emerald-800 rounded-full text-[10px] font-bold uppercase">Aktif</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="p-1 hover:bg-slate-200 rounded transition-colors text-slate-400">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 5 -->
|
||||
<tr class="hover:bg-slate-50/80 transition-colors">
|
||||
<td class="px-6 py-4 font-table-data text-table-data text-teal-800 font-bold">CUST-005</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">UD Sarang Sejahtera</span>
|
||||
<span class="text-[11px] text-slate-400">Pengepul Lokal Surabaya</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">031-778899</span>
|
||||
<span class="text-[11px] text-slate-400">admin@sarangsejahtera.com</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-table-data text-on-surface">Bank Mandiri</span>
|
||||
<span class="text-[11px] text-slate-400">1420 **** 0021</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2 py-1 bg-teal-50 text-teal-600 rounded text-[10px] font-bold uppercase">Domestik</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-2.5 py-1 bg-error-container text-on-error-container rounded-full text-[10px] font-bold uppercase">Non-Aktif</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="p-1 hover:bg-slate-200 rounded transition-colors text-slate-400">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="p-4 bg-slate-50 border-t border-slate-200 flex items-center justify-between">
|
||||
<div class="text-xs font-semibold text-slate-500">
|
||||
Halaman 1 dari 15
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="px-3 py-1.5 border border-slate-300 rounded bg-white text-slate-500 text-xs font-bold disabled:opacity-50" disabled="">Sebelumnya</button>
|
||||
<button class="px-3 py-1.5 border border-slate-300 rounded bg-white text-slate-700 text-xs font-bold hover:bg-slate-50">Berikutnya</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Floating Action Button (FAB) - Suppressed because this is a list view with its own header CTA -->
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/daftar_pelanggan_2/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/daftar_pelanggan_2/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 318 KiB |
Reference in New Issue
Block a user