chore: initial project import
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
Some checks failed
CI - Production Readiness / Verify (push) Has been cancelled
This commit is contained in:
Wira Basalamah
349
screen_design/zappcare_team_management_1/code.html
Normal file
349
screen_design/zappcare_team_management_1/code.html
Normal file
@ -0,0 +1,349 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>ZappCare Team Management</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&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": "#005870",
|
||||
"on-primary": "#ffffff",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"secondary-container": "#b2e0fe",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"on-secondary": "#ffffff",
|
||||
"tertiary-container": "#fbb674",
|
||||
"on-tertiary-fixed": "#2d1600",
|
||||
"surface-tint": "#0c6780",
|
||||
"surface-bright": "#f7f9fc",
|
||||
"on-error-container": "#93000a",
|
||||
"surface": "#f7f9fc",
|
||||
"inverse-surface": "#2d3133",
|
||||
"background": "#f7f9fc",
|
||||
"surface-dim": "#d8dadc",
|
||||
"primary-container": "#87ceeb",
|
||||
"error-container": "#ffdad6",
|
||||
"on-secondary-container": "#36647e",
|
||||
"on-error": "#ffffff",
|
||||
"secondary-fixed": "#c5e7ff",
|
||||
"outline": "#6f787d",
|
||||
"secondary-fixed-dim": "#9fccea",
|
||||
"secondary": "#35637d",
|
||||
"primary": "#0c6780",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"primary-fixed-dim": "#89d0ed",
|
||||
"on-primary-fixed": "#001f29",
|
||||
"tertiary-fixed-dim": "#feb876",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"inverse-primary": "#89d0ed",
|
||||
"on-secondary-fixed-variant": "#194c64",
|
||||
"on-tertiary": "#ffffff",
|
||||
"error": "#ba1a1a",
|
||||
"on-background": "#191c1e",
|
||||
"on-tertiary-container": "#76450c",
|
||||
"on-surface-variant": "#3f484c",
|
||||
"surface-container": "#eceef0",
|
||||
"tertiary": "#865219",
|
||||
"outline-variant": "#bfc8cd",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"primary-fixed": "#baeaff",
|
||||
"on-secondary-fixed": "#001e2d",
|
||||
"on-primary-fixed-variant": "#004d62",
|
||||
"tertiary-fixed": "#ffdcbf",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"on-tertiary-fixed-variant": "#6a3b01",
|
||||
"on-surface": "#191c1e"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Manrope"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; background-color: #f7f9fc; color: #191c1e; }
|
||||
.font-headline { font-family: 'Manrope', sans-serif; }
|
||||
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
||||
.glass-card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); }
|
||||
.primary-gradient { background: linear-gradient(135deg, #0c6780 0%, #87ceeb 100%); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface selection:bg-primary-container selection:text-on-primary-container">
|
||||
<!-- SideNavBar Shell -->
|
||||
<aside class="fixed left-0 top-0 h-full flex flex-col p-4 h-screen w-64 border-r-0 bg-[#f2f4f6] dark:bg-slate-900 backdrop-blur-xl z-50">
|
||||
<div class="flex items-center gap-3 px-2 mb-8">
|
||||
<img alt="Organization Logo" class="w-10 h-10 rounded-full" data-alt="clean geometric medical tech logo with soft blue gradients and minimalist healthcare cross symbol" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBRa-z2tksRe0sUflK_n8rpLRMy466fTFBb7GXpEV6Xb-2_e8JV3LA00nyFZQLVbz8Qf3LIGy7EXEQPDiJ6exMjEwDSnV9GC0Y0GlTx8Rb6B90_cjNhOeL7n6jJ3KvPvIFwb6ZU_3zNr0Qb6Gi7UN1-AZdL5M52jVxhbtaSJmq-SPm9OWOIEffeT6jPHv-cn7JR2MSgwtP3omc0x8FvYJw4YR35J_dmlcsbaC1Umv2hBwLTGT8e3342KIch3EWAo-Y7ElRiRDnregM"/>
|
||||
<div>
|
||||
<h1 class="text-xl font-bold text-[#0c6780] dark:text-[#87ceeb] font-headline tracking-tight">ZappCare</h1>
|
||||
<p class="text-xs font-['Manrope'] font-semibold tracking-tight text-slate-500">Business Inbox</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="primary-gradient text-on-primary font-headline font-bold py-4 px-6 rounded-xl mb-8 flex items-center justify-center gap-2 shadow-lg shadow-primary/20 hover:scale-[0.98] transition-transform active:scale-90">
|
||||
<span class="material-symbols-outlined">add_comment</span>
|
||||
New Chat
|
||||
</button>
|
||||
<nav class="flex-1 space-y-2">
|
||||
<!-- Active State: Team -->
|
||||
<a class="flex items-center gap-3 p-3 transition-all duration-200 ease-in-out bg-[#87ceeb] text-[#005870] rounded-xl font-bold" href="#">
|
||||
<span class="material-symbols-outlined">group</span>
|
||||
<span class="font-headline font-semibold tracking-tight">Team</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 p-3 transition-all duration-200 ease-in-out text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl" href="#">
|
||||
<span class="material-symbols-outlined">analytics</span>
|
||||
<span class="font-headline font-semibold tracking-tight">Reports</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto pt-4 space-y-2">
|
||||
<a class="flex items-center gap-3 p-3 transition-all duration-200 ease-in-out text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="font-headline font-semibold tracking-tight">Settings</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 p-3 transition-all duration-200 ease-in-out text-slate-600 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 rounded-xl" href="#">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
<span class="font-headline font-semibold tracking-tight">Support</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-64 min-h-screen">
|
||||
<!-- TopAppBar -->
|
||||
<header class="w-full h-16 sticky top-0 z-40 flex justify-between items-center px-8 bg-[#f7f9fc]/85 dark:bg-slate-950/85 backdrop-blur-md shadow-none">
|
||||
<div class="flex items-center gap-6">
|
||||
<h2 class="font-headline font-extrabold text-lg text-primary">Team Management</h2>
|
||||
<div class="h-4 w-px bg-outline-variant/30"></div>
|
||||
<nav class="flex items-center gap-6">
|
||||
<a class="text-sm font-['Inter'] text-[#0c6780] border-b-2 border-[#0c6780] pb-1" href="#">Overview</a>
|
||||
<a class="text-sm font-['Inter'] text-slate-500 hover:text-slate-800 transition-colors duration-200" href="#">Activity</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="relative group">
|
||||
<span class="absolute inset-y-0 left-3 flex items-center text-slate-400">
|
||||
<span class="material-symbols-outlined text-[20px]">search</span>
|
||||
</span>
|
||||
<input class="bg-surface-container-high border-none rounded-full py-2 pl-10 pr-4 text-sm w-64 focus:ring-2 focus:ring-primary/20 transition-all" placeholder="Search team members..." type="text"/>
|
||||
</div>
|
||||
<button class="p-2 text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors duration-200">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<div class="h-8 w-px bg-outline-variant/30 mx-2"></div>
|
||||
<img alt="User Profile" class="w-8 h-8 rounded-full border-2 border-white" data-alt="professional portrait of a confident man in a creative workspace with soft natural light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCwL2ErTBhHxH_HRE_TywuKbtDZ1iOtFc0yLtEKZajoYWJv2o-0tbSSkp4y1D-DZqjf4ZHzRGhged1A11vQ5IQ-zewcC6p2raj5qE3MT09PFFupfrglNSotmI0ENjmIipQbUbhkz9ZyQljYHsN7VeL9jXgedWKN2VFCO7ZRENNJkyFOMLqMsbBxpNzetu7ZqmJEk_Md5pTzD0t3c4AesOTQoRvjw1QJcoHCEFvkPyvkw9Q8A1PKAmqhOrWTbzsj6DiLKHD7_e9sMZ0"/>
|
||||
</div>
|
||||
</header>
|
||||
<div class="p-8 space-y-8">
|
||||
<!-- Performance Bento Grid -->
|
||||
<section class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<!-- Stat Card 1 -->
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm flex flex-col justify-between border border-outline-variant/10">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="p-3 bg-secondary-container rounded-xl text-on-secondary-container">
|
||||
<span class="material-symbols-outlined">forum</span>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-emerald-600 bg-emerald-50 px-2 py-1 rounded-full">+12% vs last week</span>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-on-surface-variant font-medium">Assigned Conversations</p>
|
||||
<h3 class="text-3xl font-headline font-extrabold mt-1">1,284</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Stat Card 2 -->
|
||||
<div class="bg-surface-container-lowest p-6 rounded-full shadow-sm border border-outline-variant/10">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="p-3 bg-primary-container rounded-xl text-on-primary-container">
|
||||
<span class="material-symbols-outlined">timer</span>
|
||||
</div>
|
||||
<span class="text-xs font-bold text-on-surface-variant bg-surface-container px-2 py-1 rounded-full">Top 5% Industry</span>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<p class="text-sm text-on-surface-variant font-medium">Avg. Response Time</p>
|
||||
<h3 class="text-3xl font-headline font-extrabold mt-1">2m 45s</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Featured Agent (Asymmetric Card) -->
|
||||
<div class="bg-primary p-6 rounded-full text-on-primary relative overflow-hidden flex items-center gap-6 md:col-span-1 border border-primary">
|
||||
<div class="z-10 flex flex-col justify-center">
|
||||
<p class="text-xs font-bold uppercase tracking-widest text-primary-fixed-dim mb-1">Agent of the Month</p>
|
||||
<h3 class="text-2xl font-headline font-extrabold">Elena Vance</h3>
|
||||
<p class="text-sm text-primary-fixed opacity-90 mt-1">98% Satisfaction Rate</p>
|
||||
</div>
|
||||
<img alt="Elena Vance" class="w-20 h-20 rounded-xl object-cover border-2 border-primary-container/30 z-10" data-alt="close-up portrait of a smiling young professional woman with warm indoor lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBrt63aPSIewnc-7GHJhvP-owNi36slfsreI9ostQ9h75wjn__b7A63Pq3QjpVtO-EckjnrK15CS40BUTVmUVwf3SaVM3n8m-qWRc1GjoZwVe5u7lRZHc9Ec9WchpNtpCPKjohMDglMUVRc4O6WDrqWd8J-zAlCe1xT9t3FIMnz-Rd5_gQlPL2oRHzinNWcNu9W8nRx8BhH-NjqO4zN-tZPfER7fGn7s9VunkqD5m1hAyd2YQLnrY5uWJWqWG_BMIVMsW3CptaX2Tk"/>
|
||||
<div class="absolute -right-4 -bottom-4 w-32 h-32 bg-primary-container/20 rounded-full blur-2xl"></div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Table Header Actions -->
|
||||
<section class="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex bg-surface-container-low p-1 rounded-xl">
|
||||
<button class="px-4 py-1.5 text-sm font-semibold rounded-lg bg-surface-container-lowest shadow-sm">All Users</button>
|
||||
<button class="px-4 py-1.5 text-sm font-semibold text-on-surface-variant hover:text-on-surface">Online</button>
|
||||
<button class="px-4 py-1.5 text-sm font-semibold text-on-surface-variant hover:text-on-surface">Offline</button>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 px-4 py-2 text-sm font-semibold text-on-surface-variant border border-outline-variant/30 rounded-xl hover:bg-surface-container-high transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">filter_list</span>
|
||||
Filters
|
||||
</button>
|
||||
</div>
|
||||
<button class="primary-gradient text-on-primary font-headline font-bold py-3 px-6 rounded-xl flex items-center gap-2 hover:shadow-xl hover:shadow-primary/20 transition-all">
|
||||
<span class="material-symbols-outlined">person_add</span>
|
||||
Create User
|
||||
</button>
|
||||
</section>
|
||||
<!-- Data Table Section -->
|
||||
<section class="bg-surface-container-lowest rounded-full shadow-sm overflow-hidden border border-outline-variant/10">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-surface-container-low/50">
|
||||
<th class="px-8 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Name</th>
|
||||
<th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Email</th>
|
||||
<th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Role</th>
|
||||
<th class="px-6 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider">Status</th>
|
||||
<th class="px-8 py-4 text-xs font-bold text-on-surface-variant uppercase tracking-wider text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-outline-variant/5">
|
||||
<!-- Row 1 -->
|
||||
<tr class="hover:bg-surface-container-low/30 transition-colors group">
|
||||
<td class="px-8 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<img alt="Sarah Chen" class="w-10 h-10 rounded-full" data-alt="professional headshot of a person with friendly expression in office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBtLohX6u9fU8BqskmEnLjU2OXsPk5s09-I0oKafn7awvp-GLX0hw50nJ1XnKrPmxclPnS8k-Z2-thP3H8-taDW27BTTvYzzr-Y_KQ1ggq9psHlEdhauo8rpg3hwJ60gJAQ4y1yhv86az83cs4pfamvSvDzbYnrNPpAmoctA7WEkYTB7TRh18IGUQe6pj020eVbwoVfVyS5WcAlDlm9ALzMggIaZzK7VfG-yaitTAkmTSOOtFN2tUro3Vh0s0ceTgQVFmlUheTGkvk"/>
|
||||
<div>
|
||||
<div class="text-sm font-bold text-on-surface">Sarah Chen</div>
|
||||
<div class="text-xs text-on-surface-variant">Joined 2 days ago</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-on-surface-variant">sarah.c@zappcare.com</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="bg-primary-container/20 text-on-primary-container px-3 py-1 rounded-full text-xs font-bold">Admin</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 bg-emerald-500 rounded-full"></div>
|
||||
<span class="text-xs font-semibold text-on-surface">Active</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-right">
|
||||
<button class="text-outline hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 2 -->
|
||||
<tr class="hover:bg-surface-container-low/30 transition-colors group">
|
||||
<td class="px-8 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<img alt="Marcus Wright" class="w-10 h-10 rounded-full" data-alt="headshot of a man with spectacles in professional studio lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCFNbY_VbfyyQQ1_8kxN3L-PiGFltZl3FwRYwEzv8uP_tk5P1fC9ffHekMhydURt-5riX_Q6XQtAX9CgF_rQGSB34JArsOCJ2WPrAdwrAvT3mzm4jCFUHYUMD8vfoYLXDe4EhKLbU-SFB_q9ZJ-ZLRPIYEeKw1GwCAI3QSJhzQ4ZLe9eQLZEQnJ7vRnDoxDMjIxNqB8Ij8sQp_aGoAfkbxFBHEbocgcBubuxdAMPVaXKtJemo1-s6AO8rfJmQvfX77g1UCykGxenqw"/>
|
||||
<div>
|
||||
<div class="text-sm font-bold text-on-surface">Marcus Wright</div>
|
||||
<div class="text-xs text-on-surface-variant">Joined 1 month ago</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-on-surface-variant">m.wright@zappcare.com</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="bg-surface-container text-on-surface-variant px-3 py-1 rounded-full text-xs font-bold">Agent</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 bg-emerald-500 rounded-full"></div>
|
||||
<span class="text-xs font-semibold text-on-surface">Active</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-right">
|
||||
<button class="text-outline hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 3 -->
|
||||
<tr class="hover:bg-surface-container-low/30 transition-colors group">
|
||||
<td class="px-8 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-tertiary-container flex items-center justify-center text-on-tertiary-container font-bold text-xs">JD</div>
|
||||
<div>
|
||||
<div class="text-sm font-bold text-on-surface">Julian Daws</div>
|
||||
<div class="text-xs text-on-surface-variant">Invited 4h ago</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-on-surface-variant">julian.d@zappcare.com</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="bg-surface-container text-on-surface-variant px-3 py-1 rounded-full text-xs font-bold">Agent</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2 h-2 bg-amber-400 rounded-full"></div>
|
||||
<span class="text-xs font-semibold text-on-surface">Invited</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-right">
|
||||
<button class="text-outline hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<!-- Row 4 -->
|
||||
<tr class="hover:bg-surface-container-low/30 transition-colors group">
|
||||
<td class="px-8 py-4">
|
||||
<div class="flex items-center gap-3 grayscale opacity-60">
|
||||
<img alt="Amara Okafor" class="w-10 h-10 rounded-full" data-alt="portrait of a woman in corporate attire with focused expression" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCj9WJrmakwOT_XIYmNwD7iTC1hiPGZVIIv3fysCIRgf4E-BqlpuRHhJiDEgq9xACDTmfrF1YrkSaDJaj0oYbpsI0IPdhNejvvGrAqJz7xu-gQBx0fETkRjYtdeLsqcCu4c0Pn-Xd-iiSDmJ6lGQFIXKRDEqPiMFhQEIyqe5AuKehxGCDTNUhI1djSBWpfhd_6HMzvHs6iQ16cmhIX08j5B7ayxLZ-I7pv1GF0KHGMYcGFCgFwIoJImsydJ-oi89RdkG3Rsea7Ne-0"/>
|
||||
<div>
|
||||
<div class="text-sm font-bold text-on-surface">Amara Okafor</div>
|
||||
<div class="text-xs text-on-surface-variant">Deactivated Jun 2023</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm text-on-surface-variant opacity-60">amara.o@zappcare.com</td>
|
||||
<td class="px-6 py-4 opacity-60">
|
||||
<span class="bg-surface-container text-on-surface-variant px-3 py-1 rounded-full text-xs font-bold">Agent</span>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2 opacity-60">
|
||||
<div class="w-2 h-2 bg-slate-400 rounded-full"></div>
|
||||
<span class="text-xs font-semibold text-on-surface">Deactivated</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-8 py-4 text-right">
|
||||
<button class="text-outline hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- Table Footer / Pagination -->
|
||||
<div class="px-8 py-4 flex items-center justify-between border-t border-outline-variant/10">
|
||||
<p class="text-xs text-on-surface-variant font-medium">Showing 1 to 4 of 28 agents</p>
|
||||
<div class="flex gap-2">
|
||||
<button class="p-2 border border-outline-variant/20 rounded-lg hover:bg-surface-container hover:border-outline-variant/40 transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">chevron_left</span>
|
||||
</button>
|
||||
<button class="p-2 border border-outline-variant/20 rounded-lg bg-primary-container text-on-primary-container font-bold text-xs px-4">1</button>
|
||||
<button class="p-2 border border-outline-variant/20 rounded-lg hover:bg-surface-container hover:border-outline-variant/40 transition-colors text-xs px-4 font-medium">2</button>
|
||||
<button class="p-2 border border-outline-variant/20 rounded-lg hover:bg-surface-container hover:border-outline-variant/40 transition-colors text-xs px-4 font-medium">3</button>
|
||||
<button class="p-2 border border-outline-variant/20 rounded-lg hover:bg-surface-container hover:border-outline-variant/40 transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user