481 lines
25 KiB
HTML
481 lines
25 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>Roles & Permissions | 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;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono&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": {
|
|
"primary-fixed-dim": "#3de273",
|
|
"on-surface": "#151e16",
|
|
"error": "#ba1a1a",
|
|
"surface": "#f3fcef",
|
|
"secondary-container": "#8cf1e1",
|
|
"surface-tint": "#006d2f",
|
|
"secondary-fixed-dim": "#72d8c8",
|
|
"on-primary": "#ffffff",
|
|
"status-error": "#EF4444",
|
|
"surface-bright": "#f3fcef",
|
|
"on-tertiary-container": "#78351b",
|
|
"on-secondary-container": "#006f64",
|
|
"on-primary-fixed": "#002109",
|
|
"background": "#f3fcef",
|
|
"surface-variant": "#dce5d8",
|
|
"on-tertiary-fixed": "#380d00",
|
|
"on-surface-variant": "#3c4a3d",
|
|
"on-primary-container": "#005523",
|
|
"tertiary-container": "#ffa07e",
|
|
"primary-fixed": "#66ff8e",
|
|
"secondary-fixed": "#8ff4e3",
|
|
"on-tertiary": "#ffffff",
|
|
"tertiary-fixed-dim": "#ffb59b",
|
|
"on-error-container": "#93000a",
|
|
"on-background": "#151e16",
|
|
"inverse-primary": "#3de273",
|
|
"on-primary-fixed-variant": "#005322",
|
|
"surface-container-low": "#edf6e9",
|
|
"surface-card": "#FFFFFF",
|
|
"outline-variant": "#bbcbb9",
|
|
"tertiary": "#93492e",
|
|
"on-secondary-fixed-variant": "#005047",
|
|
"status-warning": "#F59E0B",
|
|
"surface-container-highest": "#dce5d8",
|
|
"on-secondary-fixed": "#00201c",
|
|
"text-primary": "#1A1C1E",
|
|
"surface-dim": "#d3ddd0",
|
|
"on-error": "#ffffff",
|
|
"background-main": "#F8F9FA",
|
|
"status-success": "#25D366",
|
|
"error-container": "#ffdad6",
|
|
"outline": "#6c7b6b",
|
|
"surface-container": "#e7f1e4",
|
|
"surface-container-lowest": "#ffffff",
|
|
"text-secondary": "#64748B",
|
|
"tertiary-fixed": "#ffdbcf",
|
|
"secondary": "#006b5f",
|
|
"inverse-on-surface": "#eaf3e6",
|
|
"status-info": "#3B82F6",
|
|
"border-subtle": "#E2E8F0",
|
|
"surface-container-high": "#e2ebde",
|
|
"primary": "#006d2f",
|
|
"on-tertiary-fixed-variant": "#763319",
|
|
"on-secondary": "#ffffff",
|
|
"inverse-surface": "#2a332a",
|
|
"primary-container": "#25d366"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"container-margin": "32px",
|
|
"gutter": "24px",
|
|
"sidebar-width": "260px",
|
|
"toolbar-height": "64px",
|
|
"card-padding": "20px",
|
|
"base": "8px"
|
|
},
|
|
"fontFamily": {
|
|
"headline-md": ["Plus Jakarta Sans"],
|
|
"body-md": ["Inter"],
|
|
"title-sm": ["Plus Jakarta Sans"],
|
|
"body-sm": ["Inter"],
|
|
"label-caps": ["Inter"],
|
|
"display-lg": ["Plus Jakarta Sans"],
|
|
"mono-code": ["jetbrainsMono"]
|
|
},
|
|
"fontSize": {
|
|
"headline-md": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
|
|
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
"title-sm": ["18px", {"lineHeight": "24px", "fontWeight": "600"}],
|
|
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
|
|
"display-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"mono-code": ["13px", {"lineHeight": "20px", "fontWeight": "400"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
background-color: #f3fcef;
|
|
font-family: 'Inter', sans-serif;
|
|
color: #151e16;
|
|
}
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
|
|
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
|
.custom-scrollbar::-webkit-scrollbar-thumb { background: #dce5d8; border-radius: 10px; }
|
|
.permission-toggle:checked + .toggle-bg { background-color: #25d366; }
|
|
.permission-toggle:checked + .toggle-bg .toggle-dot { transform: translateX(100%); }
|
|
</style>
|
|
</head>
|
|
<body class="overflow-hidden">
|
|
<!-- 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-8 px-2">
|
|
<h1 class="font-headline-md text-headline-md font-bold text-primary dark:text-primary-fixed-dim">WhatsApp Business</h1>
|
|
<p class="text-on-surface-variant dark:text-surface-variant font-body-sm text-body-sm">Admin Console</p>
|
|
</div>
|
|
<button class="mb-6 w-full flex items-center justify-center gap-2 bg-primary-container text-on-primary-container py-3 px-4 rounded-xl font-title-sm text-title-sm hover:opacity-90 transition-opacity">
|
|
<span class="material-symbols-outlined">add</span>
|
|
New Broadcast
|
|
</button>
|
|
<nav class="flex-1 flex flex-col gap-1 custom-scrollbar overflow-y-auto">
|
|
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors font-body-md text-body-md" href="#">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
Dashboard
|
|
</a>
|
|
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors font-body-md text-body-md" href="#">
|
|
<span class="material-symbols-outlined">chat</span>
|
|
Conversations
|
|
</a>
|
|
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors font-body-md text-body-md" href="#">
|
|
<span class="material-symbols-outlined">contacts</span>
|
|
Contacts
|
|
</a>
|
|
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors font-body-md text-body-md" href="#">
|
|
<span class="material-symbols-outlined">description</span>
|
|
Templates
|
|
</a>
|
|
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors font-body-md text-body-md" href="#">
|
|
<span class="material-symbols-outlined">webhook</span>
|
|
Webhooks
|
|
</a>
|
|
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors font-body-md text-body-md" href="#">
|
|
<span class="material-symbols-outlined">monitoring</span>
|
|
Analytics
|
|
</a>
|
|
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-primary dark:text-primary-fixed-dim font-bold bg-surface-container-low dark:bg-surface-container-high transition-colors font-body-md text-body-md" href="#">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">settings</span>
|
|
Settings
|
|
</a>
|
|
</nav>
|
|
<div class="mt-auto pt-6 border-t border-outline-variant flex flex-col gap-1">
|
|
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors font-body-md text-body-md" href="#">
|
|
<span class="material-symbols-outlined">help</span>
|
|
Help Center
|
|
</a>
|
|
<a class="flex items-center gap-3 py-3 px-3 rounded-lg text-on-surface-variant dark:text-surface-variant hover:bg-surface-container-low dark:hover:bg-surface-container-high transition-colors font-body-md text-body-md" href="#">
|
|
<span class="material-symbols-outlined">logout</span>
|
|
Logout
|
|
</a>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Area -->
|
|
<div class="ml-[260px] min-h-screen flex flex-col">
|
|
<!-- TopNavBar -->
|
|
<header class="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-6">
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
|
|
<input class="pl-10 pr-4 py-1.5 bg-surface-container rounded-full border-none focus:ring-2 focus:ring-primary w-64 text-body-sm font-body-sm" placeholder="Search..." type="text"/>
|
|
</div>
|
|
<div class="flex gap-4 font-title-sm text-title-sm">
|
|
<a class="text-primary font-bold border-b-2 border-primary" href="#">English</a>
|
|
<a class="text-on-surface-variant hover:text-primary transition-all" href="#">Bahasa</a>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex gap-2">
|
|
<button class="p-2 rounded-full hover:bg-surface-container text-on-surface-variant opacity-90 hover:opacity-100 transition-opacity">
|
|
<span class="material-symbols-outlined">notifications</span>
|
|
</button>
|
|
<button class="p-2 rounded-full hover:bg-surface-container text-on-surface-variant opacity-90 hover:opacity-100 transition-opacity">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
</button>
|
|
</div>
|
|
<div class="h-8 w-px bg-outline-variant mx-1"></div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="text-right">
|
|
<p class="font-title-sm text-[14px] leading-tight font-bold text-primary">Admin User</p>
|
|
<p class="text-on-surface-variant text-[12px]">Global Admin</p>
|
|
</div>
|
|
<img alt="Admin Avatar" class="w-10 h-10 rounded-full object-cover border-2 border-primary-container" data-alt="A professional close-up portrait of a business administrator in a modern office setting. The lighting is soft and corporate, utilizing a bright high-key aesthetic with clean white backgrounds. The individual looks confident and professional, perfectly fitting the high-end SaaS enterprise identity of the dashboard." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBaJS2OKrXWTy1XzOoMOfXrdLBIAP8f07UWKk8SrvBZl-XDCg0M9DvIxhv9t943CFtm9pwartTHJfa-AeR8Z2u2KqcnNbzTFpR9roPmrkOvZAFiTAewSMgvD-jA8cgsflEIi_dVkja8Ga-r5k3QFI5Mytf91IkCEQGhAjg4z6F4G1BdET2uX29j0ByJwog-qGCrMVWf1WYs19JUJ1vp83rONSVYdfucJuwbQpxdezjnInDT7w84eZzvEMx6Z19It3U7iIPH4pKhHwU"/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Canvas -->
|
|
<main class="flex-1 overflow-y-auto p-gutter bg-background-main">
|
|
<div class="max-w-6xl mx-auto">
|
|
<!-- Page Header -->
|
|
<div class="mb-8 flex justify-between items-end">
|
|
<div>
|
|
<h2 class="font-display-lg text-display-lg text-primary mb-1">Roles & Permissions</h2>
|
|
<p class="text-on-surface-variant font-body-md">Configure access levels and granular permissions for your team members.</p>
|
|
</div>
|
|
<button class="bg-primary text-on-primary px-6 py-2.5 rounded-xl font-title-sm hover:opacity-95 transition-all flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[20px]">add_moderator</span>
|
|
Create New Role
|
|
</button>
|
|
</div>
|
|
<!-- Bento Grid Layout for Roles -->
|
|
<div class="grid grid-cols-12 gap-6 mb-8">
|
|
<!-- Admin Role Card -->
|
|
<div class="col-span-12 lg:col-span-4 bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-outline-variant hover:shadow-md transition-shadow">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="p-3 bg-primary-container/20 rounded-lg">
|
|
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">shield_person</span>
|
|
</div>
|
|
<span class="px-3 py-1 bg-primary text-on-primary text-label-caps rounded-full">Active</span>
|
|
</div>
|
|
<h3 class="font-headline-md text-[20px] mb-1">Admin</h3>
|
|
<p class="text-on-surface-variant text-body-sm mb-4">Full access to all modules, including system settings and billing.</p>
|
|
<div class="flex items-center gap-2 text-on-surface-variant text-body-sm">
|
|
<span class="material-symbols-outlined text-[18px]">group</span>
|
|
2 users assigned
|
|
</div>
|
|
</div>
|
|
<!-- Editor Role Card -->
|
|
<div class="col-span-12 lg:col-span-4 bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-outline-variant hover:shadow-md transition-shadow">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="p-3 bg-secondary-container/20 rounded-lg">
|
|
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">edit_document</span>
|
|
</div>
|
|
<span class="px-3 py-1 bg-surface-container-highest text-on-surface-variant text-label-caps rounded-full">Standard</span>
|
|
</div>
|
|
<h3 class="font-headline-md text-[20px] mb-1">Editor</h3>
|
|
<p class="text-on-surface-variant text-body-sm mb-4">Can create templates and manage campaigns, but cannot change settings.</p>
|
|
<div class="flex items-center gap-2 text-on-surface-variant text-body-sm">
|
|
<span class="material-symbols-outlined text-[18px]">group</span>
|
|
5 users assigned
|
|
</div>
|
|
</div>
|
|
<!-- Agent Role Card -->
|
|
<div class="col-span-12 lg:col-span-4 bg-surface-container-lowest p-card-padding rounded-xl shadow-sm border border-outline-variant hover:shadow-md transition-shadow ring-2 ring-primary ring-offset-2">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<div class="p-3 bg-tertiary-container/20 rounded-lg">
|
|
<span class="material-symbols-outlined text-tertiary" style="font-variation-settings: 'FILL' 1;">support_agent</span>
|
|
</div>
|
|
<span class="px-3 py-1 bg-primary-container text-on-primary-container text-label-caps rounded-full">Editing Now</span>
|
|
</div>
|
|
<h3 class="font-headline-md text-[20px] mb-1">Agent</h3>
|
|
<p class="text-on-surface-variant text-body-sm mb-4">Limited access to view analytics and respond to customer conversations.</p>
|
|
<div class="flex items-center gap-2 text-on-surface-variant text-body-sm">
|
|
<span class="material-symbols-outlined text-[18px]">group</span>
|
|
14 users assigned
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Permission Matrix -->
|
|
<div class="bg-surface-card rounded-xl shadow-sm border border-outline-variant overflow-hidden">
|
|
<div class="p-6 border-b border-outline-variant flex justify-between items-center">
|
|
<h3 class="font-title-sm text-title-sm">Permission Matrix: <span class="text-primary">Agent</span></h3>
|
|
<div class="flex gap-2">
|
|
<button class="px-4 py-2 border border-outline rounded-lg text-body-sm hover:bg-surface-container transition-colors">Discard</button>
|
|
<button class="px-6 py-2 bg-primary text-on-primary rounded-lg text-body-sm font-bold hover:opacity-90 transition-opacity">Save Changes</button>
|
|
</div>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left">
|
|
<thead>
|
|
<tr class="bg-surface-container-low">
|
|
<th class="py-4 px-6 text-label-caps text-on-surface-variant uppercase tracking-wider">Module / Permission</th>
|
|
<th class="py-4 px-6 text-label-caps text-on-surface-variant text-center uppercase tracking-wider">View</th>
|
|
<th class="py-4 px-6 text-label-caps text-on-surface-variant text-center uppercase tracking-wider">Create/Edit</th>
|
|
<th class="py-4 px-6 text-label-caps text-on-surface-variant text-center uppercase tracking-wider">Delete</th>
|
|
<th class="py-4 px-6 text-label-caps text-on-surface-variant text-center uppercase tracking-wider">Manage All</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-outline-variant">
|
|
<!-- Group 1: Campaigns -->
|
|
<tr>
|
|
<td class="py-4 px-6">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant">campaign</span>
|
|
<span class="font-title-sm text-[15px]">Manage Campaigns</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-4 px-6 text-center">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input checked="" class="sr-only permission-toggle" type="checkbox"/>
|
|
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
|
|
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
|
|
</div>
|
|
</label>
|
|
</td>
|
|
<td class="py-4 px-6 text-center">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input class="sr-only permission-toggle" type="checkbox"/>
|
|
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
|
|
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
|
|
</div>
|
|
</label>
|
|
</td>
|
|
<td class="py-4 px-6 text-center">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input class="sr-only permission-toggle" type="checkbox"/>
|
|
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
|
|
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
|
|
</div>
|
|
</label>
|
|
</td>
|
|
<td class="py-4 px-6 text-center">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input class="sr-only permission-toggle" type="checkbox"/>
|
|
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
|
|
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
|
|
</div>
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
<!-- Group 2: Analytics -->
|
|
<tr>
|
|
<td class="py-4 px-6">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant">monitoring</span>
|
|
<span class="font-title-sm text-[15px]">View Analytics</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-4 px-6 text-center">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input checked="" class="sr-only permission-toggle" type="checkbox"/>
|
|
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
|
|
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
|
|
</div>
|
|
</label>
|
|
</td>
|
|
<td class="py-4 px-6 text-center">—</td>
|
|
<td class="py-4 px-6 text-center">—</td>
|
|
<td class="py-4 px-6 text-center">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input class="sr-only permission-toggle" type="checkbox"/>
|
|
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
|
|
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
|
|
</div>
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
<!-- Group 3: Settings -->
|
|
<tr>
|
|
<td class="py-4 px-6">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant">settings</span>
|
|
<span class="font-title-sm text-[15px]">Edit Settings</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-4 px-6 text-center">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input class="sr-only permission-toggle" type="checkbox"/>
|
|
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
|
|
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
|
|
</div>
|
|
</label>
|
|
</td>
|
|
<td class="py-4 px-6 text-center">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input class="sr-only permission-toggle" type="checkbox"/>
|
|
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
|
|
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
|
|
</div>
|
|
</label>
|
|
</td>
|
|
<td class="py-4 px-6 text-center">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input class="sr-only permission-toggle" type="checkbox"/>
|
|
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
|
|
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
|
|
</div>
|
|
</label>
|
|
</td>
|
|
<td class="py-4 px-6 text-center">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input class="sr-only permission-toggle" type="checkbox"/>
|
|
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
|
|
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
|
|
</div>
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
<!-- Group 4: Billing -->
|
|
<tr>
|
|
<td class="py-4 px-6">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-surface-variant">payments</span>
|
|
<span class="font-title-sm text-[15px]">Billing & Invoices</span>
|
|
</div>
|
|
</td>
|
|
<td class="py-4 px-6 text-center">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input class="sr-only permission-toggle" type="checkbox"/>
|
|
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
|
|
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
|
|
</div>
|
|
</label>
|
|
</td>
|
|
<td class="py-4 px-6 text-center">—</td>
|
|
<td class="py-4 px-6 text-center">—</td>
|
|
<td class="py-4 px-6 text-center">
|
|
<label class="relative inline-flex items-center cursor-pointer">
|
|
<input class="sr-only permission-toggle" type="checkbox"/>
|
|
<div class="w-10 h-5 bg-surface-variant rounded-full toggle-bg transition-colors flex items-center p-1">
|
|
<div class="w-3 h-3 bg-white rounded-full toggle-dot transition-transform"></div>
|
|
</div>
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!-- Webhook Logs Preview (Bottom Section) -->
|
|
<div class="mt-8 grid grid-cols-12 gap-6">
|
|
<div class="col-span-12 lg:col-span-8 bg-surface-card p-6 rounded-xl shadow-sm border border-outline-variant">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 class="font-title-sm text-title-sm">Audit Log: Recent Changes</h3>
|
|
<a class="text-primary text-body-sm font-bold hover:underline" href="#">View All</a>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between py-3 border-b border-outline-variant last:border-0">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-10 h-10 rounded-full bg-surface-container flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-primary">person_edit</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-body-md font-semibold">Admin updated 'Agent' permissions</p>
|
|
<p class="text-body-sm text-on-surface-variant">Changed 'View Analytics' from OFF to ON</p>
|
|
</div>
|
|
</div>
|
|
<span class="text-label-caps text-on-surface-variant">2 mins ago</span>
|
|
</div>
|
|
<div class="flex items-center justify-between py-3 border-b border-outline-variant last:border-0">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-10 h-10 rounded-full bg-surface-container flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-primary">add_circle</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-body-md font-semibold">Created new role: 'Reporting Only'</p>
|
|
<p class="text-body-sm text-on-surface-variant">Assigned to 0 users</p>
|
|
</div>
|
|
</div>
|
|
<span class="text-label-caps text-on-surface-variant">4 hours ago</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 lg:col-span-4 bg-primary text-on-primary p-6 rounded-xl shadow-lg relative overflow-hidden group">
|
|
<div class="relative z-10">
|
|
<h3 class="font-headline-md text-[20px] mb-2">Need help?</h3>
|
|
<p class="opacity-90 text-body-sm mb-6">Learn more about how to set up granular access for high-security enterprise environments.</p>
|
|
<button class="bg-white text-primary px-5 py-2 rounded-lg font-bold text-body-sm hover:bg-surface-container transition-colors">Documentation</button>
|
|
</div>
|
|
<span class="material-symbols-outlined absolute -right-4 -bottom-4 text-[120px] opacity-10 group-hover:scale-110 transition-transform">lock_person</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body></html> |