464 lines
24 KiB
HTML
464 lines
24 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 - WhatsApp Business 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"/>
|
|
<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: #f3fcef;
|
|
}
|
|
.sidebar-scroll::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.sidebar-scroll::-webkit-scrollbar-thumb {
|
|
background: rgba(0,0,0,0.05);
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"surface": "#f3fcef",
|
|
"background": "#f3fcef",
|
|
"text-primary": "#1A1C1E",
|
|
"on-tertiary": "#ffffff",
|
|
"on-secondary-container": "#006f64",
|
|
"tertiary": "#93492e",
|
|
"status-success": "#25D366",
|
|
"surface-card": "#FFFFFF",
|
|
"secondary-fixed-dim": "#72d8c8",
|
|
"primary": "#006d2f",
|
|
"on-secondary-fixed-variant": "#005047",
|
|
"surface-container-low": "#edf6e9",
|
|
"status-warning": "#F59E0B",
|
|
"surface-variant": "#dce5d8",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-container": "#e7f1e4",
|
|
"primary-fixed-dim": "#3de273",
|
|
"on-primary-fixed": "#002109",
|
|
"status-info": "#3B82F6",
|
|
"on-tertiary-fixed-variant": "#763319",
|
|
"surface-dim": "#d3ddd0",
|
|
"surface-container-high": "#e2ebde",
|
|
"status-error": "#EF4444",
|
|
"border-subtle": "#E2E8F0",
|
|
"primary-container": "#25d366",
|
|
"error-container": "#ffdad6",
|
|
"surface-tint": "#006d2f",
|
|
"on-tertiary-fixed": "#380d00",
|
|
"on-surface-variant": "#3c4a3d",
|
|
"on-tertiary-container": "#78351b",
|
|
"secondary-fixed": "#8ff4e3",
|
|
"on-primary-fixed-variant": "#005322",
|
|
"on-primary": "#ffffff",
|
|
"tertiary-fixed": "#ffdbcf",
|
|
"on-background": "#151e16",
|
|
"surface-bright": "#f3fcef",
|
|
"error": "#ba1a1a",
|
|
"secondary": "#006b5f",
|
|
"on-secondary": "#ffffff",
|
|
"tertiary-container": "#ffa07e",
|
|
"on-error-container": "#93000a",
|
|
"background-main": "#F8F9FA",
|
|
"on-surface": "#151e16",
|
|
"inverse-primary": "#3de273",
|
|
"inverse-surface": "#2a332a",
|
|
"on-error": "#ffffff",
|
|
"outline": "#6c7b6b",
|
|
"inverse-on-surface": "#eaf3e6",
|
|
"text-secondary": "#64748B",
|
|
"on-primary-container": "#005523",
|
|
"tertiary-fixed-dim": "#ffb59b",
|
|
"outline-variant": "#bbcbb9",
|
|
"surface-container-highest": "#dce5d8",
|
|
"primary-fixed": "#66ff8e",
|
|
"secondary-container": "#8cf1e1",
|
|
"on-secondary-fixed": "#00201c"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"sidebar-width": "260px",
|
|
"toolbar-height": "64px",
|
|
"gutter": "24px",
|
|
"container-margin": "32px",
|
|
"base": "8px",
|
|
"card-padding": "20px"
|
|
},
|
|
"fontFamily": {
|
|
"mono-code": ["JetBrains Mono"],
|
|
"headline-md": ["Plus Jakarta Sans"],
|
|
"title-sm": ["Plus Jakarta Sans"],
|
|
"display-lg": ["Plus Jakarta Sans"],
|
|
"label-caps": ["Inter"],
|
|
"body-sm": ["Inter"],
|
|
"body-md": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"mono-code": ["13px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
"title-sm": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
|
|
"display-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-background text-on-surface">
|
|
<!-- SideNavBar -->
|
|
<aside class="fixed left-0 top-0 h-full w-[260px] bg-surface-container-lowest dark:bg-surface-container-low shadow-sm flex flex-col py-6 px-4 z-50">
|
|
<div class="mb-10 px-2">
|
|
<h1 class="font-headline-md text-headline-md font-bold text-primary">WhatsApp Business</h1>
|
|
<p class="text-on-surface-variant font-body-sm text-body-sm opacity-70">Admin Console</p>
|
|
</div>
|
|
<button class="mb-8 w-full bg-primary-container text-on-primary-container py-3 px-4 rounded-xl font-bold flex items-center justify-center gap-2 hover:opacity-90 transition-opacity">
|
|
<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-surface-container-low text-on-surface-variant">
|
|
<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-surface-container-low text-on-surface-variant">
|
|
<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-surface-container-low text-on-surface-variant">
|
|
<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-surface-container-low text-on-surface-variant">
|
|
<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-surface-container-low text-on-surface-variant">
|
|
<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-surface-container-low text-on-surface-variant">
|
|
<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-surface-container-low text-primary 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 pt-6 border-t border-outline-variant/30 space-y-1">
|
|
<div class="flex items-center gap-3 py-3 px-4 rounded-lg transition-colors hover:bg-surface-container-low text-on-surface-variant">
|
|
<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-surface-container-low text-on-surface-variant">
|
|
<span class="material-symbols-outlined">logout</span>
|
|
<span class="font-body-md text-body-md">Logout</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- TopNavBar -->
|
|
<header class="fixed top-0 right-0 w-[calc(100%-260px)] h-[64px] bg-surface-container-lowest dark:bg-surface-container-low shadow-sm flex justify-between items-center px-gutter z-40">
|
|
<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-outline-variant"></div>
|
|
<div class="flex items-center gap-2 text-on-surface-variant 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-on-surface-variant">
|
|
<button class="hover:text-primary transition-all font-title-sm text-title-sm">English</button>
|
|
<button class="hover:text-primary transition-all font-title-sm text-title-sm">Bahasa</button>
|
|
</div>
|
|
<div class="flex items-center gap-4 border-l border-outline-variant pl-6">
|
|
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">notifications</button>
|
|
<button class="material-symbols-outlined text-on-surface-variant hover:text-primary transition-colors">settings</button>
|
|
<img alt="Admin Profile Image" class="w-8 h-8 rounded-full bg-surface-container border border-outline-variant" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC8oEQFh6BZPjOhqAGdhe-gVA3nsnk1coxpTEv6pqAO6H_YU7xQmP6hbiLSfVAsIncf5bNItNqVIds3NRy2dfOgmdWEFS8qofRPJfFAxItutzsQCcMXk5RYRa0y125qpJoriz1QPpoWBZIfFEZoV8a0NfToPKVpnDaP5yKbsDl3TRu3rOELFYIJ0pelTFEU9XPaRUHJpFsMp7SseycWBSIxC0eke_oXngFNc_EB21MRcOxQrrm2fKFzqHILOL9o78vU4r5OJKmEVrE"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content -->
|
|
<main class="ml-[260px] pt-[64px] 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-on-surface">User Management</h2>
|
|
<p class="text-on-surface-variant font-body-md mt-1">Manage team access levels, roles, and security permissions.</p>
|
|
</div>
|
|
<button class="bg-primary text-on-primary 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>
|
|
Invite New User
|
|
</button>
|
|
</div>
|
|
<!-- Bento Stats Grid -->
|
|
<div class="grid grid-cols-12 gap-6 mb-8">
|
|
<div class="col-span-12 md:col-span-4 bg-surface-card p-6 rounded-2xl shadow-sm border border-outline-variant/30 flex items-center justify-between">
|
|
<div>
|
|
<p class="font-label-caps text-label-caps text-on-surface-variant mb-2">TOTAL USERS</p>
|
|
<h3 class="font-display-lg text-display-lg">42</h3>
|
|
<p class="text-status-success font-body-sm 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-primary/10 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-surface-card p-6 rounded-2xl shadow-sm border border-outline-variant/30 flex items-center justify-between">
|
|
<div>
|
|
<p class="font-label-caps text-label-caps text-on-surface-variant mb-2">PENDING INVITES</p>
|
|
<h3 class="font-display-lg text-display-lg">07</h3>
|
|
<p class="text-status-warning font-body-sm 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-secondary-container/30 rounded-full flex items-center justify-center text-secondary">
|
|
<span class="material-symbols-outlined text-[32px]">mail</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 md:col-span-4 bg-primary text-on-primary p-6 rounded-2xl shadow-sm flex items-center justify-between overflow-hidden relative">
|
|
<div class="relative z-10">
|
|
<p class="font-label-caps text-label-caps opacity-80 mb-2">ACTIVE SESSIONS</p>
|
|
<h3 class="font-display-lg text-display-lg">18</h3>
|
|
<p class="opacity-90 font-body-sm flex items-center gap-1 mt-1">
|
|
Current 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>
|
|
<!-- Decorative background shape -->
|
|
<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-surface-card rounded-2xl shadow-sm border border-outline-variant/30 overflow-hidden">
|
|
<div class="px-6 py-5 border-b border-outline-variant/30 flex justify-between items-center bg-surface-container-lowest">
|
|
<h4 class="font-title-sm text-title-sm">Team Members</h4>
|
|
<div class="flex gap-3">
|
|
<button class="p-2 rounded-lg hover:bg-surface-container text-on-surface-variant flex items-center gap-2 border border-outline-variant/30">
|
|
<span class="material-symbols-outlined text-[20px]">filter_list</span>
|
|
<span class="text-body-sm">Filter</span>
|
|
</button>
|
|
<button class="p-2 rounded-lg hover:bg-surface-container text-on-surface-variant flex items-center gap-2 border border-outline-variant/30">
|
|
<span class="material-symbols-outlined text-[20px]">download</span>
|
|
<span class="text-body-sm">Export</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="bg-surface-container-low/50">
|
|
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant">NAME / EMAIL</th>
|
|
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant">ROLE</th>
|
|
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant">LAST ACTIVE</th>
|
|
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant">STATUS</th>
|
|
<th class="px-6 py-4 font-label-caps text-label-caps text-on-surface-variant text-right">ACTIONS</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-outline-variant/20">
|
|
<!-- User Row 1 -->
|
|
<tr class="hover:bg-surface-container-lowest transition-colors">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-primary-container/20 flex items-center justify-center text-primary font-bold">JD</div>
|
|
<div>
|
|
<p class="font-body-md text-on-surface font-semibold">Jane Doe</p>
|
|
<p class="text-body-sm text-on-surface-variant">jane.doe@company.com</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-3 py-1 bg-tertiary-container/20 text-on-tertiary-container rounded-full font-label-caps text-[10px] border border-tertiary-container/30">ADMIN</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-body-sm text-on-surface-variant">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-body-sm text-on-surface">Active</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex justify-end gap-2">
|
|
<button class="p-2 text-on-surface-variant hover:text-primary hover:bg-primary/5 rounded-lg transition-all" title="Edit">
|
|
<span class="material-symbols-outlined text-[20px]">edit</span>
|
|
</button>
|
|
<button class="p-2 text-on-surface-variant hover:text-status-error hover:bg-status-error/5 rounded-lg transition-all" title="Remove">
|
|
<span class="material-symbols-outlined text-[20px]">delete</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- User Row 2 -->
|
|
<tr class="hover:bg-surface-container-lowest 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" data-alt="A professional headshot portrait of a smiling marketing executive in a clean, modern office setting. The lighting is bright and airy with soft green and white tones in the background, matching a premium enterprise software interface aesthetic. The focus is sharp on the subject, creating a trustworthy and reliable corporate atmosphere." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBdgKOJ0-3KNanadmge4DC6A0V7NIUSszWe7fLpcauOwUT6tN7-yq2589zkMHlru4o0ItgBrUHUc84Se6jBrrt0AFap5zEsHR6mg5j6lja9PmMVTR8YEmBxR7SwKRfwn_3qG2gEXb2A4dAqUyR3ZQUe9_kJDWRGtfiMR1esx6XEIiiBtUF6vnMQVjeBPiFWi4UgJDZsQ0bExxi9s8bN0ns0k1kkH8l4QHqssmNmUyxF42CEXzNWrASw5283qzpX5VauQ9WEZHiImE0"/>
|
|
<div>
|
|
<p class="font-body-md text-on-surface font-semibold">Alex Miller</p>
|
|
<p class="text-body-sm text-on-surface-variant">alex.m@company.com</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-3 py-1 bg-secondary-container/30 text-on-secondary-container rounded-full font-label-caps text-[10px] border border-secondary-container/40">EDITOR</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-body-sm text-on-surface-variant">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-body-sm text-on-surface">Active</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex justify-end gap-2">
|
|
<button class="p-2 text-on-surface-variant hover:text-primary hover:bg-primary/5 rounded-lg transition-all" title="Edit">
|
|
<span class="material-symbols-outlined text-[20px]">edit</span>
|
|
</button>
|
|
<button class="p-2 text-on-surface-variant hover:text-status-error hover:bg-status-error/5 rounded-lg transition-all" title="Remove">
|
|
<span class="material-symbols-outlined text-[20px]">delete</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- User Row 3 -->
|
|
<tr class="hover:bg-surface-container-lowest transition-colors">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-surface-container flex items-center justify-center text-on-surface-variant font-bold">SK</div>
|
|
<div>
|
|
<p class="font-body-md text-on-surface font-semibold">Sarah Khan</p>
|
|
<p class="text-body-sm text-on-surface-variant">s.khan@company.com</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-3 py-1 bg-surface-variant/50 text-on-surface-variant rounded-full font-label-caps text-[10px] border border-outline-variant/30">AGENT</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-body-sm text-on-surface-variant">Pending invite</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-2">
|
|
<span class="w-2 h-2 rounded-full bg-status-warning"></span>
|
|
<span class="text-body-sm text-on-surface">Invited</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex justify-end gap-2">
|
|
<button class="p-2 text-on-surface-variant hover:text-primary hover:bg-primary/5 rounded-lg transition-all" title="Resend Invite">
|
|
<span class="material-symbols-outlined text-[20px]">mail</span>
|
|
</button>
|
|
<button class="p-2 text-on-surface-variant hover:text-status-error hover:bg-status-error/5 rounded-lg transition-all" title="Remove">
|
|
<span class="material-symbols-outlined text-[20px]">delete</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- User Row 4 -->
|
|
<tr class="hover:bg-surface-container-lowest transition-colors">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-primary-container/20 flex items-center justify-center text-primary font-bold">RW</div>
|
|
<div>
|
|
<p class="font-body-md text-on-surface font-semibold">Robert Wong</p>
|
|
<p class="text-body-sm text-on-surface-variant">robert.wong@company.com</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-3 py-1 bg-surface-variant/50 text-on-surface-variant rounded-full font-label-caps text-[10px] border border-outline-variant/30">AGENT</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-body-sm text-on-surface-variant">3 days 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-error"></span>
|
|
<span class="text-body-sm text-on-surface">Suspended</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex justify-end gap-2">
|
|
<button class="p-2 text-on-surface-variant hover:text-primary hover:bg-primary/5 rounded-lg transition-all" title="Edit">
|
|
<span class="material-symbols-outlined text-[20px]">edit</span>
|
|
</button>
|
|
<button class="p-2 text-on-surface-variant hover:text-status-error hover:bg-status-error/5 rounded-lg transition-all" title="Remove">
|
|
<span class="material-symbols-outlined text-[20px]">delete</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Pagination -->
|
|
<div class="px-6 py-4 bg-surface-container-lowest border-t border-outline-variant/30 flex items-center justify-between">
|
|
<p class="text-body-sm text-on-surface-variant">Showing 1 to 4 of 42 team members</p>
|
|
<div class="flex gap-1">
|
|
<button class="w-10 h-10 flex items-center justify-center rounded-lg border border-outline-variant/30 text-on-surface-variant hover:bg-surface-container">
|
|
<span class="material-symbols-outlined">chevron_left</span>
|
|
</button>
|
|
<button class="w-10 h-10 flex items-center justify-center rounded-lg bg-primary text-on-primary font-bold">1</button>
|
|
<button class="w-10 h-10 flex items-center justify-center rounded-lg border border-outline-variant/30 text-on-surface-variant hover:bg-surface-container">2</button>
|
|
<button class="w-10 h-10 flex items-center justify-center rounded-lg border border-outline-variant/30 text-on-surface-variant hover:bg-surface-container">3</button>
|
|
<button class="w-10 h-10 flex items-center justify-center rounded-lg border border-outline-variant/30 text-on-surface-variant hover:bg-surface-container">
|
|
<span class="material-symbols-outlined">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Role Definitions Card (Asymmetric Layout element) -->
|
|
<div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="md:col-span-1">
|
|
<h5 class="font-title-sm text-title-sm mb-2">Role Permissions</h5>
|
|
<p class="text-body-sm text-on-surface-variant">Quick overview of what each team member can access across the WhatsApp Business platform.</p>
|
|
</div>
|
|
<div class="md:col-span-2 grid grid-cols-1 sm:grid-cols-3 gap-4">
|
|
<div class="bg-surface-card p-4 rounded-xl border border-outline-variant/20">
|
|
<div class="flex items-center gap-2 text-on-tertiary-container mb-2">
|
|
<span class="material-symbols-outlined text-[18px]">verified_user</span>
|
|
<span class="font-label-caps text-label-caps">ADMIN</span>
|
|
</div>
|
|
<p class="text-body-sm text-on-surface-variant leading-relaxed">Full system access, including billing, user management, and API settings.</p>
|
|
</div>
|
|
<div class="bg-surface-card p-4 rounded-xl border border-outline-variant/20">
|
|
<div class="flex items-center gap-2 text-on-secondary-container mb-2">
|
|
<span class="material-symbols-outlined text-[18px]">edit_note</span>
|
|
<span class="font-label-caps text-label-caps">EDITOR</span>
|
|
</div>
|
|
<p class="text-body-sm text-on-surface-variant leading-relaxed">Manage broadcasts and message templates, but cannot change system settings.</p>
|
|
</div>
|
|
<div class="bg-surface-card p-4 rounded-xl border border-outline-variant/20">
|
|
<div class="flex items-center gap-2 text-on-surface-variant mb-2">
|
|
<span class="material-symbols-outlined text-[18px]">support_agent</span>
|
|
<span class="font-label-caps text-label-caps">AGENT</span>
|
|
</div>
|
|
<p class="text-body-sm text-on-surface-variant leading-relaxed">Limited to managing active chat conversations and contact lists only.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</body></html> |