efaaf16f60
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Refactored metadata for contacts, administration, and Ulticards pages to utilize dynamic app names and descriptions. - Introduced new product pages for Ultiai, Ultical, Ulticards, Ultidrive, Ultimail, and Ultimeet with appropriate metadata. - Enhanced layout components to ensure consistent styling and functionality across new product sections. - Updated various components to replace hardcoded labels with dynamic references to improve maintainability and consistency.
112 lines
3.9 KiB
TypeScript
112 lines
3.9 KiB
TypeScript
"use client"
|
|
|
|
import { Icon } from "@iconify/react"
|
|
|
|
const ACCENT = "#7C3AED"
|
|
|
|
type Member = {
|
|
initials: string
|
|
name: string
|
|
email: string
|
|
role: string
|
|
roleIcon: string
|
|
groups: string[]
|
|
}
|
|
|
|
const MEMBERS: Member[] = [
|
|
{
|
|
initials: "AD",
|
|
name: "Alice Dupont",
|
|
email: "alice@acme.com",
|
|
role: "Admin",
|
|
roleIcon: "mdi:shield-crown-outline",
|
|
groups: ["Direction", "IT"],
|
|
},
|
|
{
|
|
initials: "BM",
|
|
name: "Bob Martin",
|
|
email: "bob@acme.com",
|
|
role: "Utilisateur",
|
|
roleIcon: "mdi:account-outline",
|
|
groups: ["Ventes"],
|
|
},
|
|
{
|
|
initials: "CL",
|
|
name: "Chloé Leroy",
|
|
email: "chloe@acme.com",
|
|
role: "Utilisateur",
|
|
roleIcon: "mdi:account-outline",
|
|
groups: ["Marketing"],
|
|
},
|
|
{
|
|
initials: "PR",
|
|
name: "Prestataire X",
|
|
email: "ext@partenaire.io",
|
|
role: "Invité",
|
|
roleIcon: "mdi:account-clock-outline",
|
|
groups: ["Externes"],
|
|
},
|
|
]
|
|
|
|
/** Aperçu statique de l'annuaire utilisateurs avec rôles et groupes. */
|
|
export function AdminUsersDemo() {
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
<div className="landing-glass-strong overflow-hidden rounded-2xl shadow-[0_32px_70px_-36px_rgba(30,40,90,0.45)]">
|
|
<div className="flex items-center gap-2.5 border-b border-[var(--landing-line)] px-4 py-3">
|
|
<Icon icon="mdi:account-group-outline" className="size-5" style={{ color: ACCENT }} aria-hidden />
|
|
<span className="text-sm font-semibold tracking-tight">Utilisateurs & groupes</span>
|
|
<span className="ml-auto flex items-center gap-1 rounded-full bg-[var(--landing-chip)] px-2 py-0.5 text-[11px] font-medium text-[var(--landing-muted)]">
|
|
<Icon icon="mdi:filter-variant" className="size-3" aria-hidden />
|
|
Tous les groupes
|
|
</span>
|
|
</div>
|
|
|
|
<ul className="divide-y divide-[var(--landing-line)]">
|
|
{MEMBERS.map((m) => (
|
|
<li key={m.email} className="flex items-center gap-3 px-4 py-2.5">
|
|
<span
|
|
className="flex size-9 shrink-0 items-center justify-center rounded-full text-xs font-semibold text-white"
|
|
style={{ backgroundColor: ACCENT }}
|
|
aria-hidden
|
|
>
|
|
{m.initials}
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium text-[var(--landing-fg)]">{m.name}</p>
|
|
<p className="truncate text-[11px] text-[var(--landing-muted)]">{m.email}</p>
|
|
</div>
|
|
<div className="hidden shrink-0 flex-wrap justify-end gap-1 sm:flex">
|
|
{m.groups.map((g) => (
|
|
<span
|
|
key={g}
|
|
className="rounded-full border border-[var(--landing-line)] bg-[var(--landing-chip)]/50 px-1.5 py-0.5 text-[10px] text-[var(--landing-muted)]"
|
|
>
|
|
{g}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<span
|
|
className="flex shrink-0 items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium"
|
|
style={{ backgroundColor: `${ACCENT}1f`, color: ACCENT }}
|
|
>
|
|
<Icon icon={m.roleIcon} className="size-3.5" aria-hidden />
|
|
{m.role}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<div className="flex items-center gap-2 border-t border-[var(--landing-line)] bg-[var(--landing-bg)]/60 px-4 py-3 text-[11px] text-[var(--landing-muted)]">
|
|
<Icon icon="mdi:cursor-default-click-outline" className="size-3.5" aria-hidden />
|
|
Actions en masse · invitation · rôle · quota · ajout à un groupe
|
|
</div>
|
|
</div>
|
|
<p className="flex items-start gap-2 text-sm text-[var(--landing-muted)]">
|
|
<Icon icon="mdi:incognito" className="mt-0.5 size-4 shrink-0" aria-hidden />
|
|
Aperçu statique — rôles admin/utilisateur/invité, groupes et actions en lot.
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|