gentelella/dist/js/user_management-D_-7dhPK.js

Gentelella v4 — free admin template. 60 pages, 20 chart variants, fully interactive inbox & kanban, live theme generator, component playground, PWA-ready. Vite 8, vanilla JS, no Bootstrap, no jQuery.

import"./main-v4-BFwmMcfm.js";import{t as e}from"./toast-DgCSlJPv.js";import{n as a}from"./menus-BVcs0GJR.js";import{n as t}from"./modal-MTuCfURV.js";var i=[{name:"Aigars Silkalns",email:"aigars@example.com",ini:"A",col:"primary",role:"Owner",status:"active",lastActive:"just now",joined:"Mar 2024"},{name:"Sarah Kowalski",email:"sarah@example.com",ini:"SK",col:"azure",role:"Admin",status:"active",lastActive:"2 min ago",joined:"Apr 2024"},{name:"Michael Reyes",email:"michael@example.com",ini:"MR",col:"purple",role:"Editor",status:"active",lastActive:"14 min ago",joined:"May 2024"},{name:"Emily Wang",email:"emily@example.com",ini:"EW",col:"yellow",role:"Editor",status:"active",lastActive:"1 hour ago",joined:"Jun 2024"},{name:"Mark Kim",email:"mark@example.com",ini:"MK",col:"red",role:"Viewer",status:"active",lastActive:"3 hours ago",joined:"Jul 2024"},{name:"Lina Park",email:"lina@example.com",ini:"LP",col:"green",role:"Editor",status:"active",lastActive:"Yesterday",joined:"Sep 2024"},{name:"Diego Reyes",email:"diego@example.com",ini:"DR",col:"blue",role:"Editor",status:"active",lastActive:"2 days ago",joined:"Sep 2024"},{name:"Yuki Tanaka",email:"yuki@example.com",ini:"YT",col:"primary",role:"Viewer",status:"active",lastActive:"4 days ago",joined:"Oct 2024"},{name:"Tom Hardy",email:"tom@example.com",ini:"TH",col:"purple",role:"Editor",status:"active",lastActive:"1 week ago",joined:"Nov 2024"},{name:"Robert Jones",email:"robert@example.com",ini:"RJ",col:"red",role:"Viewer",status:"suspended",lastActive:"2 weeks ago",joined:"Dec 2024"},{name:"invite@acme.com",email:"invite@acme.com",ini:"?",col:"gray",role:"Editor",status:"pending",lastActive:"—",joined:"Apr 28, 2026",pending:!0},{name:"newhire@team.io",email:"newhire@team.io",ini:"?",col:"gray",role:"Viewer",status:"pending",lastActive:"—",joined:"Apr 27, 2026",pending:!0}],n={primary:"var(--primary)",azure:"var(--azure)",purple:"var(--purple)",yellow:"var(--yellow)",red:"var(--red)",green:"var(--green)",blue:"var(--blue)",gray:"var(--text-disabled)"},o={active:"green",pending:"yellow",suspended:"red"},l={Owner:"purple",Admin:"red",Editor:"blue",Viewer:"green"},r=["Owner","Admin","Editor","Viewer"],s="",d="",c="";function m(){document.getElementById("users-rows").innerHTML=function(){const e=s.toLowerCase();return i.filter(a=>(!e||a.name.toLowerCase().includes(e)||a.email.toLowerCase().includes(e))&&(!d||a.role===d)&&(!c||a.status===c))}().map((e,a)=>`\n    <tr data-email="${e.email}">\n      <td><input type="checkbox" class="row-cb" aria-label="Select row"></td>\n      <td>\n        <div class="cell-customer">\n          <div class="cell-avatar${e.pending?" pending":""}" style="background:${e.pending?"var(--bg-surface-secondary)":n[e.col]};color:${e.pending?"var(--text-muted)":"white"}">${e.ini}</div>\n          <div>\n            <div class="cell-strong">${e.pending?'<em style="font-style:normal;color:var(--text-muted)">Invited</em>':e.name}</div>\n            <div style="font-size:11.5px;color:var(--text-muted)">${e.email}</div>\n          </div>\n        </div>\n      </td>\n      <td><button type="button" class="role-chip role-${l[e.role]}" data-role-edit data-email="${e.email}">${e.role} <svg width="10" height="10" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg></button></td>\n      <td><span class="status status-${o[e.status]}">${e.status[0].toUpperCase()+e.status.slice(1)}</span></td>\n      <td style="font-size:12.5px;color:var(--text-muted)">${e.lastActive}</td>\n      <td style="font-size:12.5px;color:var(--text-muted)">${e.joined}</td>\n      <td><button class="card-opt-btn" data-row-menu data-email="${e.email}" aria-label="More"><svg viewBox="0 0 16 16" fill="currentColor"><circle cx="8" cy="3" r="1.2"/><circle cx="8" cy="8" r="1.2"/><circle cx="8" cy="13" r="1.2"/></svg></button></td>\n    </tr>\n  `).join("")}document.getElementById("users-search").addEventListener("input",e=>{s=e.target.value,m()}),document.getElementById("filter-role").addEventListener("change",e=>{d=e.target.value,m()}),document.getElementById("filter-status").addEventListener("change",e=>{c=e.target.value,m()}),document.getElementById("select-all").addEventListener("change",e=>{document.querySelectorAll("#users-rows .row-cb").forEach(a=>{a.checked=e.target.checked})}),document.getElementById("users-rows").addEventListener("click",t=>{const n=t.target.closest("[data-role-edit]"),o=t.target.closest("[data-row-menu]");if(n){t.stopPropagation();const o=n.dataset.email,l=i.find(e=>e.email===o);if(!l)return;a(n,r.map(a=>({label:a+(a===l.role?" ✓":""),action:()=>{"Owner"!==l.role&&"Owner"!==a?(l.role=a,m(),e(`${l.name}: role set to ${a}`,{variant:"success"})):e("Owner role cannot be changed inline",{variant:"warning"})}})))}else if(o){t.stopPropagation();const n=o.dataset.email,l=i.find(e=>e.email===n);if(!l)return;a(o,[{label:"View profile",action:()=>e(`Profile: ${l.name}`)},{label:"Reset password",action:()=>e(`Reset link sent to ${l.email}`,{variant:"success"})},{label:"suspended"===l.status?"Reactivate":"Suspend",action:()=>{l.status="suspended"===l.status?"active":"suspended",m(),e(`${l.name}: ${l.status}`)}},"-",{label:"Remove from workspace",action:()=>{const a=i.indexOf(l);a>-1&&i.splice(a,1),m(),e(`Removed ${l.name}`)}}])}}),document.getElementById("invite-btn").addEventListener("click",a=>{a.stopPropagation(),t({title:"Invite a user",body:'\n      <form class="modal-form" novalidate>\n        <div class="modal-form-row">\n          <label for="iv-email">Email address</label>\n          <input type="email" id="iv-email" name="email" placeholder="teammate@example.com" autocomplete="off" required>\n        </div>\n        <div class="modal-form-row">\n          <label for="iv-role">Role</label>\n          <select id="iv-role" name="role">\n            <option value="Viewer">Viewer — can only view</option>\n            <option value="Editor" selected>Editor — can view and edit</option>\n            <option value="Admin">Admin — can manage users</option>\n          </select>\n        </div>\n        <div class="modal-form-row">\n          <label for="iv-message">Personal message (optional)</label>\n          <textarea id="iv-message" name="message" rows="3" placeholder="Welcome to the team!"></textarea>\n        </div>\n      </form>\n    ',actions:[{label:"Cancel",variant:"outline"},{label:"Send invite",variant:"primary",action:({body:a})=>{const t=a.querySelector("form"),n=new FormData(t),o=(n.get("email")||"").toString().trim(),l=n.get("role").toString();return o?(i.push({name:o,email:o,ini:"?",col:"gray",role:l,status:"pending",lastActive:"—",joined:"just now",pending:!0}),m(),e(`Invite sent to ${o}`,{variant:"success"}),!0):(e("Email is required",{variant:"warning"}),!1)}}]})}),m();