gentelella
Version:
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.
1 lines • 5.48 kB
JavaScript
import{t as a}from"./toast-DgCSlJPv.js";import{n as e}from"./modal-MTuCfURV.js";var n={SK:{name:"Sarah Kowalski",role:"Designer",color:"azure"},MR:{name:"Michael Reyes",role:"Engineer",color:"purple"},EW:{name:"Emily Wang",role:"PM",color:"yellow"},MK:{name:"Mark Kim",role:"Engineer",color:"red"},LP:{name:"Lina Park",role:"Marketing",color:"green"},DR:{name:"Diego Reyes",role:"Sales",color:"blue"},YT:{name:"Yuki Tanaka",role:"Support",color:"primary"},TH:{name:"Tom Hardy",role:"Engineer",color:"purple"},A:{name:"Aigars Silkalns",role:"Admin",color:"primary"}},s={primary:"var(--primary)",azure:"var(--azure)",purple:"var(--purple)",yellow:"var(--yellow)",red:"var(--red)",green:"var(--green)",blue:"var(--blue)"},i={green:"status-green",yellow:"status-yellow",red:"status-red"};function l(a){return String(a).replace(/[&<>"']/g,a=>({"&":"&","<":"<",">":">",'"':""","'":"'"}[a]))}var t=[{title:"Wireframes review",done:!0},{title:"Stakeholder kickoff",done:!0},{title:"Design system tokens",done:!0},{title:"Component library",done:!1},{title:"QA + accessibility audit",done:!1}],r=[{who:"Sarah K.",what:"commented on the design review",time:"12 min ago"},{who:"Michael R.",what:"merged PR #248",time:"1 hour ago"},{who:"Emily W.",what:"updated the timeline",time:"4 hours ago"}];function o({title:o,client:d,status:c,sCls:v,desc:p,pct:m,due:g,members:u}){const h=u.map(a=>{const e=n[a]||{name:a,role:"Team member",color:"primary"};return`\n <div class="detail-member">\n <span class="av" style="background:${s[e.color]||"var(--primary)"}">${a}</span>\n <span class="meta">\n <span class="name">${l(e.name)}</span>\n <span class="role">${l(e.role)}</span>\n </span>\n </div>\n `}).join(""),$=t.map(a=>`\n <div class="detail-task${a.done?" done":""}">\n <span class="checkbox" aria-hidden="true">${a.done?'<svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M2.5 6l2.5 3 5-6"/></svg>':""}</span>\n <span class="task-title">${l(a.title)}</span>\n </div>\n `).join(""),b=r.map(a=>`\n <div class="detail-activity-item">\n <div class="dot"></div>\n <div><strong>${l(a.who)}</strong> ${l(a.what)} <span class="time">· ${l(a.time)}</span></div>\n </div>\n `).join(""),y="red"===v?"var(--red)":"yellow"===v?"var(--yellow)":"var(--primary)";e({title:o,body:`\n <div class="detail-project">\n <div class="detail-header">\n <div class="head-left">\n <div class="client-tag">${l(d)}</div>\n <p class="desc">${l(p)}</p>\n </div>\n <span class="status ${i[v]||"status-green"}">${l(c)}</span>\n </div>\n\n <div class="detail-stats">\n <div class="stat-block">\n <div class="label">Progress</div>\n <div class="value">${m}%</div>\n <div class="progress-thin"><div class="bar" style="width:${m}%;background:${y}"></div></div>\n </div>\n <div class="stat-block">\n <div class="label">Due date</div>\n <div class="value">${l(g)}</div>\n </div>\n <div class="stat-block">\n <div class="label">Team</div>\n <div class="value">${u.length}</div>\n </div>\n </div>\n\n <div class="detail-section">\n <div class="detail-section-title">Members</div>\n <div class="detail-members">${h}</div>\n </div>\n\n <div class="detail-section">\n <div class="detail-section-title">Tasks · ${t.filter(a=>a.done).length}/${t.length}</div>\n <div class="detail-tasks">${$}</div>\n </div>\n\n <div class="detail-section">\n <div class="detail-section-title">Recent activity</div>\n <div class="detail-activity">${b}</div>\n </div>\n </div>\n `,size:"lg",actions:[{label:"Close",variant:"outline"},{label:"Open project",variant:"primary",action:()=>a(`Opening: ${o}`)}]})}function d({name:n,ini:i,color:t,role:r,projects:o,tasks:d,msgs:c}){const v=function(a){return a.toLowerCase().replace(/\s+/g,".")+"@example.com"}(n),p="+1 (555) "+(300+i.charCodeAt(0)%600).toString().padStart(3,"0")+"-"+(1e3+i.charCodeAt(i.length-1)%9e3).toString();e({title:n,body:`\n <div class="detail-contact">\n <div class="detail-contact-head">\n <div class="big-av" style="background:${s[t]||"var(--primary)"}">${l(i)}</div>\n <div>\n <div class="name">${l(n)}</div>\n <div class="role">${l(r)}</div>\n </div>\n </div>\n\n <div class="detail-contact-fields">\n <div><span class="label">Email</span><a class="value" href="mailto:${v}">${v}</a></div>\n <div><span class="label">Phone</span><span class="value">${p}</span></div>\n <div><span class="label">Location</span><span class="value">San Francisco, CA</span></div>\n <div><span class="label">Joined</span><span class="value">Mar 2024</span></div>\n </div>\n\n <div class="detail-contact-stats">\n <div><strong>${o}</strong><span>Projects</span></div>\n <div><strong>${d}</strong><span>Open tasks</span></div>\n <div><strong>${c}</strong><span>Unread messages</span></div>\n </div>\n </div>\n `,actions:[{label:"Close",variant:"outline"},{label:"Message",variant:"outline",action:()=>a(`Compose to: ${n}`)},{label:"View profile",variant:"primary",action:()=>{window.location.href="profile.html"}}]})}export{d as openContactModal,o as openProjectModal};