342 lines
17 KiB
HTML
342 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>User Management - BizOne Admin</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: #f8fafc;
|
|
}
|
|
.sidebar-scroll::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.sidebar-scroll::-webkit-scrollbar-thumb {
|
|
background: rgba(255,255,255,0.1);
|
|
border-radius: 10px;
|
|
}
|
|
.bg-bizone-navy {
|
|
background-color: #001b44;
|
|
}
|
|
.text-bizone-blue {
|
|
color: #38bdf8;
|
|
}
|
|
.bg-bizone-blue {
|
|
background-color: #38bdf8;
|
|
}
|
|
</style>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"primary": "#001b44",
|
|
"secondary": "#38bdf8",
|
|
"surface": "#f8fafc",
|
|
"background": "#f8fafc",
|
|
"text-primary": "#1e293b",
|
|
"text-secondary": "#64748b",
|
|
"border-subtle": "#e2e8f0",
|
|
"surface-card": "#ffffff",
|
|
"status-success": "#10b981",
|
|
"status-warning": "#f59e0b",
|
|
"status-error": "#ef4444"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"sidebar-width": "260px",
|
|
"toolbar-height": "72px",
|
|
"gutter": "24px",
|
|
"container-margin": "32px"
|
|
},
|
|
"fontFamily": {
|
|
"headline-md": ["Plus Jakarta Sans"],
|
|
"title-sm": ["Plus Jakarta Sans"],
|
|
"display-lg": ["Plus Jakarta Sans"],
|
|
"body-md": ["Inter"]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-background text-text-primary">
|
|
<!-- SideNavBar -->
|
|
<aside class="fixed left-0 top-0 h-full w-[260px] bg-bizone-navy shadow-lg flex flex-col z-50">
|
|
<!-- Sidebar Header (White background, 72px) -->
|
|
<div class="h-[72px] bg-white flex items-center px-6 shrink-0">
|
|
<img alt="BizOne Logo" class="h-8" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCQgepHPm1Tlccl-KTg8J_Ohes_HmUgNgQpebBka5A4EQPSSDJrON0j4R_Wi6gOOlV-crnscfaztwQY6GRKbVjGWaAPn82BG2LhxBEdmD2OdYn3u-HSKsss2Q3qS4hTV0Dilzn1z0Qfx6dV3FRqKID5gAM5yb3TSVi4T96F6mQ69bBzh1Tib2zs9oKFXieUJs--RsKWw3BUiKUhBQcm-SBiWSSonbzAA8xFReCq3iOVJXR5O3RgUrfRv_GFfnoN4KFeTJM3smpcLrs"/>
|
|
</div>
|
|
<!-- Sidebar Content -->
|
|
<div class="mt-8 px-4 flex flex-col flex-1">
|
|
<button class="mb-8 w-full bg-bizone-blue text-white py-3 px-4 rounded-xl font-bold flex items-center justify-center gap-2 hover:bg-opacity-90 transition-all shadow-md shadow-sky-500/20">
|
|
<span class="material-symbols-outlined">add</span>
|
|
New Broadcast
|
|
</button>
|
|
<nav class="flex-1 space-y-1 sidebar-scroll overflow-y-auto">
|
|
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-white/10 text-white/70">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
<span class="font-body-md text-body-md">Dashboard</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-white/10 text-white/70">
|
|
<span class="material-symbols-outlined">chat</span>
|
|
<span class="font-body-md text-body-md">Conversations</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-white/10 text-white/70">
|
|
<span class="material-symbols-outlined">contacts</span>
|
|
<span class="font-body-md text-body-md">Contacts</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-white/10 text-white/70">
|
|
<span class="material-symbols-outlined">description</span>
|
|
<span class="font-body-md text-body-md">Templates</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-white/10 text-white/70">
|
|
<span class="material-symbols-outlined">webhook</span>
|
|
<span class="font-body-md text-body-md">Webhooks</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-white/10 text-white/70">
|
|
<span class="material-symbols-outlined">monitoring</span>
|
|
<span class="font-body-md text-body-md">Analytics</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors bg-white/10 text-bizone-blue font-bold">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
<span class="font-body-md text-body-md">Settings</span>
|
|
</div>
|
|
</nav>
|
|
<div class="mt-auto py-6 border-t border-white/10 space-y-1">
|
|
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-white/10 text-white/70">
|
|
<span class="material-symbols-outlined">help</span>
|
|
<span class="font-body-md text-body-md">Help Center</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-white/10 text-white/70">
|
|
<span class="material-symbols-outlined">logout</span>
|
|
<span class="font-body-md text-body-md">Logout</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- TopNavBar (72px height, white background) -->
|
|
<header class="fixed top-0 right-0 w-[calc(100%-260px)] h-[72px] bg-white shadow-sm flex justify-between items-center px-gutter z-40 border-b border-slate-100">
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-title-sm text-title-sm text-primary font-bold">Admin Dashboard</span>
|
|
<div class="h-6 w-px bg-slate-200"></div>
|
|
<div class="flex items-center gap-2 text-text-secondary font-body-sm">
|
|
<span class="material-symbols-outlined text-[20px]">search</span>
|
|
<input class="bg-transparent border-none focus:ring-0 text-body-sm w-64" placeholder="Search team members..." type="text"/>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex items-center gap-4 text-text-secondary">
|
|
<button class="hover:text-primary transition-all font-semibold">English</button>
|
|
<button class="hover:text-primary transition-all font-semibold">Bahasa</button>
|
|
</div>
|
|
<div class="flex items-center gap-4 border-l border-slate-200 pl-6">
|
|
<button class="material-symbols-outlined text-text-secondary hover:text-primary transition-colors">notifications</button>
|
|
<button class="material-symbols-outlined text-text-secondary hover:text-primary transition-colors">settings</button>
|
|
<img alt="Admin Profile" class="w-8 h-8 rounded-full bg-slate-100 border border-slate-200 object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC8oEQFh6BZPjOhqAGdhe-gVA3nsnk1coxpTEv6pqAO6H_YU7xQmP6hbiLSfVAsIncf5bNItNqVIds3NRy2dfOgmdWEFS8qofRPJfFAxItutzsQCcMXk5RYRa0y125qpJoriz1QPpoWBZIfFEZoV8a0NfToPKVpnDaP5yKbsDl3TRu3rOELFYIJ0pelTFEU9XPaRUHJpFsMp7SseycWBSIxC0eke_oXngFNc_EB21MRcOxQrrm2fKFzqHILOL9o78vU4r5OJKmEVrE"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content -->
|
|
<main class="ml-[260px] pt-[72px] min-h-screen p-container-margin">
|
|
<div class="max-w-7xl mx-auto">
|
|
<!-- Page Header -->
|
|
<div class="flex justify-between items-end mb-8">
|
|
<div>
|
|
<h2 class="font-display-lg text-display-lg text-primary font-bold">User Management</h2>
|
|
<p class="text-text-secondary font-body-md mt-1">Manage team access levels, roles, and security permissions.</p>
|
|
</div>
|
|
<button class="bg-primary text-white py-3 px-6 rounded-xl font-bold flex items-center gap-2 shadow-lg shadow-primary/20 hover:translate-y-[-2px] transition-all">
|
|
<span class="material-symbols-outlined">person_add</span>
|
|
Create User
|
|
</button>
|
|
</div>
|
|
<!-- Stats Grid -->
|
|
<div class="grid grid-cols-12 gap-6 mb-8">
|
|
<div class="col-span-12 md:col-span-4 bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex items-center justify-between">
|
|
<div>
|
|
<p class="text-[12px] font-bold text-text-secondary tracking-wider mb-2 uppercase">Total Users</p>
|
|
<h3 class="text-3xl font-bold text-primary">42</h3>
|
|
<p class="text-status-success text-sm font-medium flex items-center gap-1 mt-1">
|
|
<span class="material-symbols-outlined text-[16px]">trending_up</span>
|
|
+3 this month
|
|
</p>
|
|
</div>
|
|
<div class="w-14 h-14 bg-slate-50 rounded-full flex items-center justify-center text-primary">
|
|
<span class="material-symbols-outlined text-[32px]">group</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 md:col-span-4 bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex items-center justify-between">
|
|
<div>
|
|
<p class="text-[12px] font-bold text-text-secondary tracking-wider mb-2 uppercase">Pending Invites</p>
|
|
<h3 class="text-3xl font-bold text-primary">07</h3>
|
|
<p class="text-status-warning text-sm font-medium flex items-center gap-1 mt-1">
|
|
<span class="material-symbols-outlined text-[16px]">schedule</span>
|
|
Awaiting response
|
|
</p>
|
|
</div>
|
|
<div class="w-14 h-14 bg-slate-50 rounded-full flex items-center justify-center text-primary">
|
|
<span class="material-symbols-outlined text-[32px]">mail</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 md:col-span-4 bg-primary text-white p-6 rounded-2xl shadow-sm flex items-center justify-between overflow-hidden relative">
|
|
<div class="relative z-10">
|
|
<p class="text-[12px] font-bold text-white/70 tracking-wider mb-2 uppercase">Active Sessions</p>
|
|
<h3 class="text-3xl font-bold">18</h3>
|
|
<p class="text-white/80 text-sm flex items-center gap-1 mt-1">
|
|
Real-time activity
|
|
</p>
|
|
</div>
|
|
<div class="w-14 h-14 bg-white/20 rounded-full flex items-center justify-center relative z-10">
|
|
<span class="material-symbols-outlined text-[32px]">bolt</span>
|
|
</div>
|
|
<div class="absolute -right-4 -bottom-4 w-32 h-32 bg-white/10 rounded-full blur-2xl"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Table Section -->
|
|
<div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
|
|
<div class="px-6 py-5 border-b border-slate-100 flex justify-between items-center bg-slate-50/50">
|
|
<h4 class="font-bold text-primary">Team Members</h4>
|
|
<div class="flex gap-3">
|
|
<button class="px-4 py-2 rounded-lg bg-white text-text-secondary text-sm font-semibold flex items-center gap-2 border border-slate-200 hover:bg-slate-50 transition-colors">
|
|
<span class="material-symbols-outlined text-[20px]">filter_list</span>
|
|
Filter
|
|
</button>
|
|
<button class="px-4 py-2 rounded-lg bg-white text-text-secondary text-sm font-semibold flex items-center gap-2 border border-slate-200 hover:bg-slate-50 transition-colors">
|
|
<span class="material-symbols-outlined text-[20px]">download</span>
|
|
Export
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left">
|
|
<thead>
|
|
<tr class="bg-slate-50/30">
|
|
<th class="px-6 py-4 text-[11px] font-bold text-text-secondary uppercase tracking-wider">Name / Email</th>
|
|
<th class="px-6 py-4 text-[11px] font-bold text-text-secondary uppercase tracking-wider">Role</th>
|
|
<th class="px-6 py-4 text-[11px] font-bold text-text-secondary uppercase tracking-wider">Last Active</th>
|
|
<th class="px-6 py-4 text-[11px] font-bold text-text-secondary uppercase tracking-wider">Status</th>
|
|
<th class="px-6 py-4 text-[11px] font-bold text-text-secondary uppercase tracking-wider text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-slate-100">
|
|
<!-- Row 1 -->
|
|
<tr class="hover:bg-slate-50/50 transition-colors">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center text-primary font-bold">JD</div>
|
|
<div>
|
|
<p class="text-sm font-bold text-primary">Jane Doe</p>
|
|
<p class="text-xs text-text-secondary">jane.doe@company.com</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-2.5 py-0.5 bg-slate-100 text-primary rounded-full text-[10px] font-bold uppercase tracking-tight">Admin</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-text-secondary">Just now</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full bg-status-success"></span>
|
|
<span class="text-sm font-medium text-primary">Active</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex justify-end gap-1">
|
|
<button class="p-2 text-text-secondary hover:text-primary hover:bg-slate-100 rounded-lg transition-all"><span class="material-symbols-outlined text-[20px]">edit</span></button>
|
|
<button class="p-2 text-text-secondary hover:text-status-error hover:bg-red-50 rounded-lg transition-all"><span class="material-symbols-outlined text-[20px]">delete</span></button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 2 -->
|
|
<tr class="hover:bg-slate-50/50 transition-colors">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<img alt="User" class="w-10 h-10 rounded-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBdgKOJ0-3KNanadmge4DC6A0V7NIUSszWe7fLpcauOwUT6tN7-yq2589zkMHlru4o0ItgBrUHUc84Se6jBrrt0AFap5zEsHR6mg5j6lja9PmMVTR8YEmBxR7SwKRfwn_3qG2gEXb2A4dAqUyR3ZQUe9_kJDWRGtfiMR1esx6XEIiiBtUF6vnMQVjeBPiFWi4UgJDZsQ0bExxi9s8bN0ns0k1kkH8l4QHqssmNmUyxF42CEXzNWrASw5283qzpX5VauQ9WEZHiImE0"/>
|
|
<div>
|
|
<p class="text-sm font-bold text-primary">Alex Miller</p>
|
|
<p class="text-xs text-text-secondary">alex.m@company.com</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-2.5 py-0.5 bg-blue-50 text-blue-700 rounded-full text-[10px] font-bold uppercase tracking-tight">Editor</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-text-secondary">2 hours ago</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full bg-status-success"></span>
|
|
<span class="text-sm font-medium text-primary">Active</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex justify-end gap-1">
|
|
<button class="p-2 text-text-secondary hover:text-primary hover:bg-slate-100 rounded-lg transition-all"><span class="material-symbols-outlined text-[20px]">edit</span></button>
|
|
<button class="p-2 text-text-secondary hover:text-status-error hover:bg-red-50 rounded-lg transition-all"><span class="material-symbols-outlined text-[20px]">delete</span></button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Pagination -->
|
|
<div class="px-6 py-4 bg-slate-50/50 border-t border-slate-100 flex items-center justify-between">
|
|
<p class="text-xs font-medium text-text-secondary">Showing 1 to 2 of 42 members</p>
|
|
<div class="flex gap-1">
|
|
<button class="w-8 h-8 flex items-center justify-center rounded-lg border border-slate-200 text-text-secondary hover:bg-white transition-colors">
|
|
<span class="material-symbols-outlined text-[18px]">chevron_left</span>
|
|
</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded-lg bg-primary text-white font-bold text-xs">1</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded-lg border border-slate-200 text-text-secondary hover:bg-white transition-colors text-xs font-bold">2</button>
|
|
<button class="w-8 h-8 flex items-center justify-center rounded-lg border border-slate-200 text-text-secondary hover:bg-white transition-colors">
|
|
<span class="material-symbols-outlined text-[18px]">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Role Permissions Cards -->
|
|
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="md:col-span-1">
|
|
<h5 class="font-bold text-primary text-lg mb-2">Role Permissions</h5>
|
|
<p class="text-sm text-text-secondary">Quick overview of what each team member can access across the BizOne platform.</p>
|
|
</div>
|
|
<div class="md:col-span-2 grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<div class="bg-white p-5 rounded-xl border border-slate-100 shadow-sm">
|
|
<div class="flex items-center gap-2 text-primary mb-3">
|
|
<span class="material-symbols-outlined text-[20px]">verified_user</span>
|
|
<span class="text-[11px] font-bold uppercase tracking-wider">Admin</span>
|
|
</div>
|
|
<p class="text-xs text-text-secondary leading-relaxed font-medium">Full system access, including billing, user management, and API settings.</p>
|
|
</div>
|
|
<div class="bg-white p-5 rounded-xl border border-slate-100 shadow-sm">
|
|
<div class="flex items-center gap-2 text-blue-600 mb-3">
|
|
<span class="material-symbols-outlined text-[20px]">edit_note</span>
|
|
<span class="text-[11px] font-bold uppercase tracking-wider">Editor</span>
|
|
</div>
|
|
<p class="text-xs text-text-secondary leading-relaxed font-medium">Manage broadcasts and templates, but cannot change system settings.</p>
|
|
</div>
|
|
<div class="bg-white p-5 rounded-xl border border-slate-100 shadow-sm">
|
|
<div class="flex items-center gap-2 text-slate-600 mb-3">
|
|
<span class="material-symbols-outlined text-[20px]">support_agent</span>
|
|
<span class="text-[11px] font-bold uppercase tracking-wider">Agent</span>
|
|
</div>
|
|
<p class="text-xs text-text-secondary leading-relaxed font-medium">Limited to managing chat conversations and contact lists only.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</body></html> |