);
}
function InviteMemberModal({ roles, onClose, onInvited, projectId, projectName }) {
const isProjectScoped = !!projectId;
const [email, setEmail] = React.useState('');
const [roleId, setRoleId] = React.useState(() => {
// Default to "Developer" preset if present, fall back to first non-Owner role
const dev = roles.find((r) => r.name === 'Developer');
if (dev) return dev.id;
const nonOwner = roles.find((r) => r.name !== 'Owner');
return (nonOwner ?? roles[0])?.id || '';
});
const [submitting, setSubmitting] = React.useState(false);
const [error, setError] = React.useState(null);
const targetRole = roles.find(r => r.id === roleId);
const submit = async () => {
setError(null);
setSubmitting(true);
try {
const body = { email: email.trim().toLowerCase(), roleId };
if (projectId) body.projectId = projectId;
await window.api('POST', '/api/workspace/invites', body);
onInvited();
} catch (e) {
if (e.status === 409) {
setError(projectId
? 'Ese email ya es miembro de este proyecto.'
: 'Ese email ya es miembro del workspace.');
} else {
setError(e?.message || 'No se pudo crear la invitación');
}
setSubmitting(false);
}
};
const valid = email.trim() && /@/.test(email) && roleId;
return (
}
>
{isProjectScoped && (
Invitación scoped al proyecto {projectName || projectId}. El invitado entra como Guest al workspace y solo ve este proyecto — no aparece como colaborador del workspace ni de otros proyectos.
)}
{error && (
{error}
)}
{targetRole && (
{targetRole.description || 'Rol sin descripción.'}
)}
Le enviaremos un email con un enlace de invitación. El enlace expira en 7 días.
Si no tiene cuenta todavía, puede crearla desde ese mismo enlace.
);
}
function MembersTable({ members, roles, canUpdateRole, onEdit }) {
if (!members.length) {
return <_CollabEmptyState title="Sin miembros" sub="No hay miembros en este workspace." />;
}
return (
);
}
function RoleBadge({ name, isSystem }) {
return (
{!isSystem && }
{name}
);
}
function _CollabAvatar({ name, email, src, size = 32 }) {
// Prefer first letters of the displayName (up to 2 words, e.g. "Genaro
// Plascencia" → "GP"). If no name, fall back to the first letter of the
// email's local part. Only show "?" if literally everything is empty —
// shouldn't happen since signup requires both.
const initials = (() => {
const fromName = String(name || '')
.split(/\s+/)
.map((s) => s.trim()[0])
.filter(Boolean)
.slice(0, 2)
.join('')
.toUpperCase();
if (fromName) return fromName;
const fromEmail = String(email || '').trim().charAt(0).toUpperCase();
return fromEmail || '?';
})();
// Deterministic background color based on the seed so each user keeps the
// same avatar across renders. Picks from a curated palette that reads well
// on the dark theme.
const seed = String(name || email || '').toLowerCase();
const palette = ['#4F8EFF', '#10B981', '#F59E0B', '#A855F7', '#EC4899', '#06B6D4', '#F97316', '#8B5CF6'];
let h = 0;
for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;
const bg = palette[h % palette.length];
if (src) {
return ;
}
return (
{initials}
);
}
function _CollabEmptyState({ title, sub }) {
return (
{title}
{sub}
);
}
// Edit a member's role + customPermissions overrides. Two PATCHes are sent
// only if their respective inputs changed (role select; adds/removes sets).
// The effective permission set is computed live so the user sees exactly
// what the member will end up with.
function EditMemberRoleModal({ member, roles, permsCatalog, onClose, onSaved }) {
const [newRoleId, setNewRoleId] = React.useState(member.role.id);
const [adds, setAdds] = React.useState(() => new Set(member.customPermissions.adds));
const [removes, setRemoves] = React.useState(() => new Set(member.customPermissions.removes));
const [saving, setSaving] = React.useState(false);
const [error, setError] = React.useState(null);
const [showOverrides, setShowOverrides] = React.useState(
member.customPermissions.adds.length + member.customPermissions.removes.length > 0
);
const targetRole = roles.find(r => r.id === newRoleId);
const baseline = React.useMemo(
() => new Set(targetRole?.permissions || []),
[targetRole],
);
// Effective preview: baseline ∪ adds \ removes — same logic as the engine.
const effective = React.useMemo(() => {
const out = new Set(baseline);
for (const a of adds) out.add(a);
for (const r of removes) out.delete(r);
return out;
}, [baseline, adds, removes]);
const byCategory = React.useMemo(() => {
const out = {};
for (const p of permsCatalog) {
if (!out[p.category]) out[p.category] = [];
out[p.category].push(p);
}
return out;
}, [permsCatalog]);
// Three-state toggle on a permission relative to the role's baseline:
// - in baseline + not in removes → "default" (role gives it)
// - in baseline + in removes → "explicitly removed"
// - not in baseline + in adds → "explicitly added"
// - not in baseline + not in adds → "default" (role doesn't give it)
// Click cycles: default ↔ override (added if missing from baseline,
// removed if present in baseline).
const togglePerm = (id) => {
const inBase = baseline.has(id);
if (inBase) {
setRemoves((prev) => {
const next = new Set(prev);
if (next.has(id)) next.delete(id); else next.add(id);
return next;
});
setAdds((prev) => { const next = new Set(prev); next.delete(id); return next; });
} else {
setAdds((prev) => {
const next = new Set(prev);
if (next.has(id)) next.delete(id); else next.add(id);
return next;
});
setRemoves((prev) => { const next = new Set(prev); next.delete(id); return next; });
}
};
const resetOverrides = () => {
setAdds(new Set());
setRemoves(new Set());
};
const save = async () => {
setSaving(true);
setError(null);
try {
const tasks = [];
if (newRoleId !== member.role.id) {
tasks.push(window.api('PATCH', `/api/workspace/members/${member.userId}`, { roleId: newRoleId }));
}
const baselineAdds = new Set(member.customPermissions.adds);
const baselineRemoves = new Set(member.customPermissions.removes);
const sameSet = (a, b) => a.size === b.size && [...a].every((x) => b.has(x));
const overridesChanged = !sameSet(adds, baselineAdds) || !sameSet(removes, baselineRemoves);
if (overridesChanged) {
tasks.push(window.api('PATCH', `/api/workspace/members/${member.userId}/custom-permissions`, {
adds: [...adds],
removes: [...removes],
}));
}
if (tasks.length === 0) { onClose(); return; }
// Run sequentially: backend invalidates the cache after each, and the
// second PATCH benefits from the fresh role context.
for (const t of tasks) await t;
onSaved();
} catch (e) {
setError(e?.message || 'No se pudo guardar');
setSaving(false);
}
};
const dirty = newRoleId !== member.role.id ||
adds.size !== member.customPermissions.adds.length ||
removes.size !== member.customPermissions.removes.length ||
[...adds].some((a) => !member.customPermissions.adds.includes(a)) ||
[...removes].some((r) => !member.customPermissions.removes.includes(r));
return (
}
>
{error && (
);
}
// Per-project member table — same shape as MembersTable but adds the
// "inherit / override" indicator + an "excluded" toggle. Rows always come
// from the workspace roster; ProjectMember rows are an overlay.
function ProjectMembersTable({ projectId, members, roles, canManage, onEdit }) {
if (!projectId) {
return <_CollabEmptyState title="Elige un proyecto" sub="Selecciona un proyecto del selector de arriba para gestionar sus miembros." />;
}
if (!members.length) {
return <_CollabEmptyState title="Sin miembros" sub="Este proyecto no tiene miembros aún. Empieza invitando colaboradores al workspace." />;
}
return (
);
}
// Modal for editing a member's per-project override. Three things in one:
// - excluded toggle (full ban from this project)
// - role override (pick a different role just for this project)
// - customPermissions adds/removes layered on top
// "Resetear a workspace" deletes the override row entirely.
function EditProjectMemberModal({ member, projectId, roles, permsCatalog, onClose, onSaved }) {
const [excluded, setExcluded] = React.useState(member.excluded);
const [overrideRoleId, setOverrideRoleId] = React.useState(member.overrideRoleId || '');
const [adds, setAdds] = React.useState(() => new Set(member.customPermissions.adds));
const [removes, setRemoves] = React.useState(() => new Set(member.customPermissions.removes));
const [saving, setSaving] = React.useState(false);
const [error, setError] = React.useState(null);
const [showOverrides, setShowOverrides] = React.useState(
member.customPermissions.adds.length + member.customPermissions.removes.length > 0
);
const effectiveRole = overrideRoleId ? roles.find(r => r.id === overrideRoleId) : null;
// When no role override is set, baseline = workspace-default's permissions.
// We don't have those directly here so we derive from member.permissions
// minus the current overrides. Cleaner approach: just show the
// effectiveRole (override or current effective)'s permission set.
const baseline = React.useMemo(() => {
if (effectiveRole) return new Set(effectiveRole.permissions);
// No override role → baseline is whatever the member would get from
// workspace defaults. Approximate with current effective minus overrides.
return new Set(
member.permissions
.filter((p) => !member.customPermissions.adds.includes(p))
.concat(member.customPermissions.removes),
);
}, [effectiveRole, member]);
const effective = React.useMemo(() => {
if (excluded) return new Set();
const out = new Set(baseline);
for (const a of adds) out.add(a);
for (const r of removes) out.delete(r);
return out;
}, [baseline, adds, removes, excluded]);
const byCategory = React.useMemo(() => {
const out = {};
for (const p of permsCatalog) {
if (!out[p.category]) out[p.category] = [];
out[p.category].push(p);
}
return out;
}, [permsCatalog]);
const togglePerm = (id) => {
const inBase = baseline.has(id);
if (inBase) {
setRemoves((prev) => { const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); return next; });
setAdds((prev) => { const next = new Set(prev); next.delete(id); return next; });
} else {
setAdds((prev) => { const next = new Set(prev); if (next.has(id)) next.delete(id); else next.add(id); return next; });
setRemoves((prev) => { const next = new Set(prev); next.delete(id); return next; });
}
};
const save = async () => {
setSaving(true);
setError(null);
try {
await window.api('PATCH', `/api/projects/${projectId}/members/${member.userId}`, {
roleId: overrideRoleId || null,
customPermissions: { adds: [...adds], removes: [...removes] },
excluded,
});
onSaved();
} catch (e) {
setError(e?.message || 'No se pudo guardar');
setSaving(false);
}
};
const resetToWorkspace = async () => {
if (!confirm('¿Restablecer este miembro al rol del workspace? Se borra cualquier override que hayas configurado en este proyecto.')) return;
setSaving(true);
setError(null);
try {
await window.api('DELETE', `/api/projects/${projectId}/members/${member.userId}`);
onSaved();
} catch (e) {
setError(e?.message || 'No se pudo resetear');
setSaving(false);
}
};
return (
}
>
{error && (