Initial import of AbelBirdNest Stock
This commit is contained in:
447
design-assets/stitch_abel_stock/daftar_pelanggan_1/code.html
Normal file
447
design-assets/stitch_abel_stock/daftar_pelanggan_1/code.html
Normal file
@ -0,0 +1,447 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="id"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Daftar Pelanggan | SarangTrace ERP</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"/>
|
||||
<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": {
|
||||
"secondary": "#4e6073",
|
||||
"on-primary-fixed": "#001f23",
|
||||
"primary-fixed": "#aaeef8",
|
||||
"outline": "#6f797a",
|
||||
"background": "#f8fafa",
|
||||
"on-tertiary-fixed-variant": "#6b3a17",
|
||||
"on-primary-fixed-variant": "#004f57",
|
||||
"error-container": "#ffdad6",
|
||||
"tertiary": "#60320f",
|
||||
"on-secondary-container": "#526478",
|
||||
"surface-container": "#eceeee",
|
||||
"on-tertiary": "#ffffff",
|
||||
"secondary-container": "#cfe2f9",
|
||||
"on-error-container": "#93000a",
|
||||
"inverse-primary": "#8ed1db",
|
||||
"secondary-fixed": "#d1e4fb",
|
||||
"surface-tint": "#1d6871",
|
||||
"on-primary-container": "#92d5df",
|
||||
"on-secondary-fixed-variant": "#36485b",
|
||||
"inverse-surface": "#2e3131",
|
||||
"on-secondary-fixed": "#091d2e",
|
||||
"on-surface": "#191c1d",
|
||||
"tertiary-fixed": "#ffdbc7",
|
||||
"surface": "#f8fafa",
|
||||
"primary-container": "#0d5e67",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"outline-variant": "#bfc8ca",
|
||||
"on-surface-variant": "#3f484a",
|
||||
"surface-container-highest": "#e1e3e3",
|
||||
"inverse-on-surface": "#eff1f1",
|
||||
"secondary-fixed-dim": "#b5c8df",
|
||||
"surface-container-high": "#e6e8e9",
|
||||
"surface-container-low": "#f2f4f4",
|
||||
"on-tertiary-container": "#ffbb91",
|
||||
"on-tertiary-fixed": "#311300",
|
||||
"error": "#ba1a1a",
|
||||
"surface-bright": "#f8fafa",
|
||||
"primary": "#00454c",
|
||||
"primary-fixed-dim": "#8ed1db",
|
||||
"on-error": "#ffffff",
|
||||
"surface-variant": "#e1e3e3",
|
||||
"on-background": "#191c1d",
|
||||
"tertiary-fixed-dim": "#feb78a",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-dim": "#d8dadb",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-container": "#7c4824"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"compact-padding": "8px",
|
||||
"row-height-sm": "32px",
|
||||
"row-height-md": "48px",
|
||||
"container-margin": "24px",
|
||||
"gutter": "16px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"body-base": ["Inter"],
|
||||
"h1": ["Inter"],
|
||||
"display-lot": ["Inter"],
|
||||
"table-data": ["Inter"],
|
||||
"body-sm": ["Inter"],
|
||||
"h2": ["Inter"],
|
||||
"label-caps": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"body-base": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"h1": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"display-lot": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
||||
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "500"}],
|
||||
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
|
||||
"h2": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
|
||||
"label-caps": ["11px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "700"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface selection:bg-primary-fixed selection:text-on-primary-fixed">
|
||||
<!-- TopNavBar -->
|
||||
<header class="bg-white dark:bg-slate-950 text-teal-700 dark:text-teal-500 font-inter text-sm antialiased docked full-width top-0 z-40 border-b border-slate-200 dark:border-slate-800 shadow-sm flex items-center justify-between px-6 h-14 w-full fixed">
|
||||
<div class="flex items-center gap-8">
|
||||
<span class="text-lg font-bold tracking-tight text-teal-800 dark:text-teal-400">SarangTrace ERP</span>
|
||||
<div class="hidden md:flex items-center bg-slate-100 dark:bg-slate-900 rounded px-3 py-1 gap-2">
|
||||
<span class="material-symbols-outlined text-slate-400 text-[18px]" data-icon="search">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-xs w-64 placeholder:text-slate-400" placeholder="Search data..." type="text"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="hover:bg-slate-50 dark:hover:bg-slate-900 transition-colors p-2 rounded">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="hover:bg-slate-50 dark:hover:bg-slate-900 transition-colors p-2 rounded">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
</button>
|
||||
<div class="h-8 w-8 rounded-full overflow-hidden border border-slate-200">
|
||||
<img alt="User Profile" data-alt="professional corporate headshot of a middle-aged executive man with a clean haircut in a minimalist office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAgIYPXJRbGVhYjBsOskdckcKrC_AW-ltq6326FJ4CCMIeGCJn-6iDh-EtUNsXoVz2vW0NHl_Ky1Lcw4z9JCpcP7XaCTV8Tcbui8Vn5LkfHK-sOUN1ERpd4WC4srVTKH2Y_MImoeL-GJDumfU5sQZFfPEXWDot5nxxji4_-39gtbEAM6rmy78bW6vICOe5zNhrUYcO4P6SycGmvatOEOXlIap9ovsKOlfkXqZJ2CnUjq-LvzgWR40sOSqaxTjLwj_6GeVNV6bveUA"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- SideNavBar -->
|
||||
<aside class="bg-slate-50 dark:bg-slate-900 text-teal-700 dark:text-teal-500 font-inter text-[13px] font-medium fixed left-0 top-0 h-full w-64 border-r border-slate-200 dark:border-slate-800 flex flex-col h-screen py-4 z-30 pt-20">
|
||||
<div class="px-6 mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="h-10 w-10 bg-primary rounded flex items-center justify-center text-white font-black text-xl">W</div>
|
||||
<div>
|
||||
<h2 class="text-teal-900 dark:text-teal-100 font-black leading-none">Walet Operations</h2>
|
||||
<p class="text-[10px] text-slate-500 mt-1 uppercase tracking-wider">V1.0.4-Operational</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 px-4 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-600 hover:bg-slate-100 dark:hover:bg-slate-800/50 rounded transition-all duration-150 ease-in-out" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
Dashboard
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-600 hover:bg-slate-100 dark:hover:bg-slate-800/50 rounded transition-all duration-150 ease-in-out" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
|
||||
Inventory Stock
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-600 hover:bg-slate-100 dark:hover:bg-slate-800/50 rounded transition-all duration-150 ease-in-out" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="account_tree">account_tree</span>
|
||||
Traceability Logs
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 bg-teal-50 dark:bg-teal-900/20 text-teal-700 dark:text-teal-400 border-r-4 border-teal-600 transition-all duration-150 ease-in-out" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="database">database</span>
|
||||
Master Data
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-600 hover:bg-slate-100 dark:hover:bg-slate-800/50 rounded transition-all duration-150 ease-in-out" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="qr_code_scanner">qr_code_scanner</span>
|
||||
Barcode Scanner
|
||||
</a>
|
||||
</nav>
|
||||
<div class="px-4 mt-auto border-t border-slate-200 dark:border-slate-800 pt-4 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-600 hover:bg-slate-100 dark:hover:bg-slate-800/50 rounded transition-all duration-150 ease-in-out" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
Support
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 dark:text-slate-400 hover:text-teal-600 hover:bg-slate-100 dark:hover:bg-slate-800/50 rounded transition-all duration-150 ease-in-out" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="logout">logout</span>
|
||||
Sign Out
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-64 pt-14 min-h-screen">
|
||||
<div class="p-container-margin">
|
||||
<!-- Page Header -->
|
||||
<div class="flex items-end justify-between mb-8">
|
||||
<div>
|
||||
<nav class="flex items-center gap-2 text-label-caps text-secondary mb-2">
|
||||
<span>MASTER DATA</span>
|
||||
<span class="material-symbols-outlined text-[12px]" data-icon="chevron_right">chevron_right</span>
|
||||
<span class="text-on-surface">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 pelanggan, kontak, dan informasi perbankan dalam satu tempat.</p>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 bg-primary text-on-primary font-body-base px-4 py-2 rounded-lg shadow-sm hover:opacity-90 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="add">add</span>
|
||||
Tambah Pelanggan
|
||||
</button>
|
||||
</div>
|
||||
<!-- Dashboard Stats / Bento Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-gutter mb-8">
|
||||
<div class="bg-surface-container-low border border-outline-variant p-4 rounded-xl shadow-sm">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-label-caps text-secondary">TOTAL PELANGGAN</span>
|
||||
<span class="material-symbols-outlined text-primary text-[20px]" data-icon="group">group</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-display-lot text-display-lot">1,284</span>
|
||||
<span class="text-[11px] font-bold text-teal-600">+12%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low border border-outline-variant p-4 rounded-xl shadow-sm">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-label-caps text-secondary">PELANGGAN AKTIF</span>
|
||||
<span class="material-symbols-outlined text-teal-600 text-[20px]" data-icon="check_circle">check_circle</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-display-lot text-display-lot">1,250</span>
|
||||
<span class="text-[11px] font-bold text-teal-600">97.3%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low border border-outline-variant p-4 rounded-xl shadow-sm">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-label-caps text-secondary">KREDIT LIMIT TOTAL</span>
|
||||
<span class="material-symbols-outlined text-tertiary text-[20px]" data-icon="account_balance_wallet">account_balance_wallet</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-display-lot text-display-lot">Rp 4.2B</span>
|
||||
<span class="text-[11px] font-bold text-error">Limit High</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-surface-container-low border border-outline-variant p-4 rounded-xl shadow-sm">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<span class="font-label-caps text-secondary">BARU (BULAN INI)</span>
|
||||
<span class="material-symbols-outlined text-secondary text-[20px]" data-icon="person_add">person_add</span>
|
||||
</div>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="font-display-lot text-display-lot">32</span>
|
||||
<span class="text-[11px] font-bold text-teal-600">Stable</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Search and Filter Bar -->
|
||||
<div class="bg-surface-container-lowest border border-outline-variant p-4 mb-gutter rounded-t-lg flex flex-wrap items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-4 flex-1">
|
||||
<div class="relative flex-1 max-w-md">
|
||||
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline text-[20px]" data-icon="search">search</span>
|
||||
<input class="w-full pl-10 pr-4 py-2 border border-outline-variant rounded-lg font-body-base focus:ring-2 focus:ring-primary-container focus:border-primary outline-none transition-all" placeholder="Cari Kode, Nama, atau Contact Person..." type="text"/>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 font-body-base text-on-surface-variant hover:bg-surface-container-high px-3 py-2 rounded transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="filter_list">filter_list</span>
|
||||
Filter
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="flex items-center gap-2 font-body-base border border-outline-variant text-on-surface-variant px-3 py-2 rounded hover:bg-surface-container-high transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="file_download">file_download</span>
|
||||
Export Excel
|
||||
</button>
|
||||
<button class="flex items-center gap-2 font-body-base border border-outline-variant text-on-surface-variant px-3 py-2 rounded hover:bg-surface-container-high transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="print">print</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Data Table Container -->
|
||||
<div class="bg-surface-container-lowest border border-outline-variant rounded-b-lg overflow-hidden shadow-sm">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-surface-container-high border-b border-outline-variant">
|
||||
<th class="px-4 py-3 font-label-caps text-secondary">KODE PELANGGAN</th>
|
||||
<th class="px-4 py-3 font-label-caps text-secondary">NAMA PELANGGAN</th>
|
||||
<th class="px-4 py-3 font-label-caps text-secondary">CONTACT PERSON</th>
|
||||
<th class="px-4 py-3 font-label-caps text-secondary">TELEPON</th>
|
||||
<th class="px-4 py-3 font-label-caps text-secondary">INFO BANK</th>
|
||||
<th class="px-4 py-3 font-label-caps text-secondary">STATUS</th>
|
||||
<th class="px-4 py-3 font-label-caps text-secondary text-right">AKSI</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="font-table-data text-table-data text-on-surface">
|
||||
<!-- Row 1 -->
|
||||
<tr class="border-b border-outline-variant hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-4 py-3 text-primary font-bold">CUST-JKT-001</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold">PT. Ekspor Walet Kencana</span>
|
||||
<span class="text-[11px] text-on-surface-variant uppercase">Wholesaler</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">Bpk. Hendra Wijaya</td>
|
||||
<td class="px-4 py-3">+62 21 5567 8900</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-col">
|
||||
<span>BCA - 0089223344</span>
|
||||
<span class="text-[11px] text-on-surface-variant">AN: Hendra Wijaya</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="bg-teal-50 text-teal-700 px-2 py-1 rounded-full text-[11px] font-bold border border-teal-100">AKTIF</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="p-1 hover:bg-surface-container-high rounded text-outline group-hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="more_vert">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="border-b border-outline-variant hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-4 py-3 text-primary font-bold">CUST-SBY-042</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold">CV. Sarang Burung Lestari</span>
|
||||
<span class="text-[11px] text-on-surface-variant uppercase">Local Processor</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">Ibu Maya Santoso</td>
|
||||
<td class="px-4 py-3">+62 812 3344 5566</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-col">
|
||||
<span>Mandiri - 142009887766</span>
|
||||
<span class="text-[11px] text-on-surface-variant">AN: Maya Santoso</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="bg-teal-50 text-teal-700 px-2 py-1 rounded-full text-[11px] font-bold border border-teal-100">AKTIF</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="p-1 hover:bg-surface-container-high rounded text-outline group-hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="more_vert">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="border-b border-outline-variant hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-4 py-3 text-primary font-bold">CUST-MDN-018</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold">Global Nest Trading Ltd.</span>
|
||||
<span class="text-[11px] text-on-surface-variant uppercase">International</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">Mr. Zhang Wei</td>
|
||||
<td class="px-4 py-3">+65 6789 4432</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-col">
|
||||
<span>HSBC - 9988-002-11</span>
|
||||
<span class="text-[11px] text-on-surface-variant">SWIFT: HSBSGSGXXX</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="bg-error-container text-on-error-container px-2 py-1 rounded-full text-[11px] font-bold border border-error/10">NON-AKTIF</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="p-1 hover:bg-surface-container-high rounded text-outline group-hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="more_vert">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr class="border-b border-outline-variant hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-4 py-3 text-primary font-bold">CUST-SMG-005</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold">Semarang Birdnest Hub</span>
|
||||
<span class="text-[11px] text-on-surface-variant uppercase">Agent</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">Anwar Hakim</td>
|
||||
<td class="px-4 py-3">+62 24 8876 1122</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-col">
|
||||
<span>BNI - 0021334455</span>
|
||||
<span class="text-[11px] text-on-surface-variant">AN: Anwar Hakim</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="bg-secondary-container text-on-secondary-container px-2 py-1 rounded-full text-[11px] font-bold border border-secondary/10">DITANGGUHKAN</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="p-1 hover:bg-surface-container-high rounded text-outline group-hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="more_vert">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 5 -->
|
||||
<tr class="hover:bg-slate-50 transition-colors group">
|
||||
<td class="px-4 py-3 text-primary font-bold">CUST-JKT-099</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold">Prima Walet Utama</span>
|
||||
<span class="text-[11px] text-on-surface-variant uppercase">Retailer</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">Siska Amelia</td>
|
||||
<td class="px-4 py-3">+62 856 7788 9900</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex flex-col">
|
||||
<span>BRI - 3344-01-009922</span>
|
||||
<span class="text-[11px] text-on-surface-variant">AN: PT. Prima Walet Utama</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<span class="bg-teal-50 text-teal-700 px-2 py-1 rounded-full text-[11px] font-bold border border-teal-100">AKTIF</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<button class="p-1 hover:bg-surface-container-high rounded text-outline group-hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]" data-icon="more_vert">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Pagination Footer -->
|
||||
<div class="bg-surface-container-low border-t border-outline-variant p-4 flex items-center justify-between">
|
||||
<span class="font-body-sm text-body-sm text-on-surface-variant">Menampilkan 1-5 dari 1,284 pelanggan</span>
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="p-1 border border-outline-variant rounded hover:bg-surface-container-high text-outline transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="first_page">first_page</span>
|
||||
</button>
|
||||
<button class="p-1 border border-outline-variant rounded hover:bg-surface-container-high text-outline transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="chevron_left">chevron_left</span>
|
||||
</button>
|
||||
<div class="flex items-center gap-1 px-2">
|
||||
<button class="w-8 h-8 bg-primary text-on-primary rounded font-bold text-[13px]">1</button>
|
||||
<button class="w-8 h-8 hover:bg-surface-container-high rounded font-medium text-[13px] transition-colors">2</button>
|
||||
<button class="w-8 h-8 hover:bg-surface-container-high rounded font-medium text-[13px] transition-colors">3</button>
|
||||
<span class="mx-1">...</span>
|
||||
<button class="w-8 h-8 hover:bg-surface-container-high rounded font-medium text-[13px] transition-colors">257</button>
|
||||
</div>
|
||||
<button class="p-1 border border-outline-variant rounded hover:bg-surface-container-high text-outline transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="chevron_right">chevron_right</span>
|
||||
</button>
|
||||
<button class="p-1 border border-outline-variant rounded hover:bg-surface-container-high text-outline transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]" data-icon="last_page">last_page</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Legal/Info -->
|
||||
<footer class="mt-12 mb-8 flex flex-col md:flex-row items-center justify-between border-t border-outline-variant pt-6 gap-4">
|
||||
<div class="flex items-center gap-6">
|
||||
<span class="text-[12px] text-on-surface-variant font-medium">© 2024 SarangTrace ERP - Operational Edition</span>
|
||||
<div class="flex items-center gap-4">
|
||||
<a class="text-[12px] text-on-surface-variant hover:text-primary underline decoration-primary/30" href="#">Privacy Policy</a>
|
||||
<a class="text-[12px] text-on-surface-variant hover:text-primary underline decoration-primary/30" href="#">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 px-3 py-1 bg-surface-container-high rounded-full border border-outline-variant">
|
||||
<span class="w-2 h-2 bg-teal-500 rounded-full"></span>
|
||||
<span class="text-[11px] font-bold text-on-surface-variant uppercase tracking-tighter">Sistem Terkoneksi: Cloud-HQ-Main</span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
BIN
design-assets/stitch_abel_stock/daftar_pelanggan_1/screen.png
Normal file
BIN
design-assets/stitch_abel_stock/daftar_pelanggan_1/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 310 KiB |
Reference in New Issue
Block a user