feat: administradores por proyecto y Configuracion solo para superadmin

- Un proyecto puede tener uno o mas administradores (role_in_project=
  'admin' en project_members), independiente del rol global del usuario.
  Nuevo PUT /api/projects/:id/members/:userId/role; canWriteProject lo
  reconoce ademas del comportamiento previo (admin/superadmin/it_manager
  global, o project_lead miembro). UI: casilla al agregar miembro + boton
  de escudo para promover/degradar (nunca toca al Dueño).
- Menu "Configuracion" (apariencia, catalogos, SMTP) visible y accesible
  solo para el superadmin: oculto en el nav y con guarda en la ruta
  /configuracion para quien la teclee directo. Escritura de catalogos
  restringida de [superadmin, admin] a solo superadmin para que el
  backend sea consistente con la UI.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Milton Gonzalez
2026-09-09 09:41:06 -05:00
parent e018eba8c1
commit f96391d360
16 changed files with 144 additions and 28 deletions
@@ -1,20 +1,24 @@
import { useState } from 'react';
import { UserPlus, Trash2 } from 'lucide-react';
import { UserPlus, Trash2, ShieldCheck, ShieldOff } from 'lucide-react';
import { useUi } from '../../context/ui-context.jsx';
import { useAsync, useAction } from '../../hooks/useAsync.js';
import { addProjectMember, removeProjectMember } from '../../services/projects.js';
import { addProjectMember, setProjectMemberAdmin, removeProjectMember } from '../../services/projects.js';
import { listUsers } from '../../services/users.js';
import { Button } from '../../components/Button.jsx';
import { Field } from '../../components/Field.jsx';
import { ComboBox } from '../../components/ComboBox.jsx';
import { Badge } from '../../components/Badge.jsx';
import { DetailPopup } from '../../components/DetailPopup.jsx';
const ROLE_BADGE = { owner: { color: 'accent', key: 'project_role_owner' }, admin: { color: 'success', key: 'project_role_admin' } };
export default function ProjectMembersTab({ project, onChanged }) {
const { t, openDialog } = useUi();
const runAction = useAction();
const { data: users } = useAsync(listUsers, []);
const [addingMember, setAddingMember] = useState('');
const [addAsAdmin, setAddAsAdmin] = useState(false);
const [addMemberOpen, setAddMemberOpen] = useState(false);
const userOptions = (users || []).filter((u) => !project.members.some((m) => m.user_id === u.id)).map((u) => ({ value: u.id, label: u.name }));
@@ -22,13 +26,21 @@ export default function ProjectMembersTab({ project, onChanged }) {
async function addMember() {
if (!addingMember) return;
await runAction(async () => {
await addProjectMember(project.id, Number(addingMember));
await addProjectMember(project.id, Number(addingMember), addAsAdmin ? 'admin' : null);
setAddingMember('');
setAddAsAdmin(false);
setAddMemberOpen(false);
onChanged();
});
}
function toggleAdmin(member) {
runAction(async () => {
await setProjectMemberAdmin(project.id, member.user_id, member.role_in_project !== 'admin');
onChanged();
});
}
function confirmRemoveMember(member) {
openDialog({
tone: 'warning',
@@ -48,19 +60,36 @@ export default function ProjectMembersTab({ project, onChanged }) {
<h3 style={{ margin: 0 }}>{t('project_members')}</h3>
<Button variant="accent" icon={UserPlus} onClick={() => setAddMemberOpen(true)}>{t('project_add_member')}</Button>
</div>
{project.members.map((m) => (
<div key={m.user_id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0' }}>
<span style={{ flex: 1, fontSize: '.82rem' }}>{m.name} <span className="text-muted">· {m.email}</span></span>
<button className="icon-btn" onClick={() => confirmRemoveMember(m)}><Trash2 size={16} /></button>
</div>
))}
{project.members.map((m) => {
const badge = ROLE_BADGE[m.role_in_project];
return (
<div key={m.user_id} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0' }}>
<span style={{ flex: 1, fontSize: '.82rem' }}>{m.name} <span className="text-muted">· {m.email}</span></span>
{badge && <Badge color={badge.color}>{t(badge.key)}</Badge>}
{m.role_in_project !== 'owner' && (
<button
className="icon-btn"
title={m.role_in_project === 'admin' ? t('project_remove_admin') : t('project_make_admin')}
onClick={() => toggleAdmin(m)}
>
{m.role_in_project === 'admin' ? <ShieldOff size={16} /> : <ShieldCheck size={16} />}
</button>
)}
<button className="icon-btn" onClick={() => confirmRemoveMember(m)}><Trash2 size={16} /></button>
</div>
);
})}
{project.members.length === 0 && <div className="text-muted" style={{ fontSize: '.78rem' }}>{t('common_empty')}</div>}
</div>
<DetailPopup open={addMemberOpen} title={t('project_add_member')} onClose={() => setAddMemberOpen(false)} width={420} height={260}>
<DetailPopup open={addMemberOpen} title={t('project_add_member')} onClose={() => setAddMemberOpen(false)} width={420} height={300}>
<Field label={t('project_add_member')}>
<ComboBox options={userOptions} value={addingMember} onChange={setAddingMember} placeholder={t('project_add_member')} />
</Field>
<label className="checkbox-row">
<input type="checkbox" checked={addAsAdmin} onChange={(e) => setAddAsAdmin(e.target.checked)} />
{t('project_add_member_as_admin')}
</label>
<div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
<Button variant="accent" icon={UserPlus} onClick={addMember}>{t('common_save')}</Button>
<Button variant="standard" onClick={() => setAddMemberOpen(false)}>{t('common_cancel')}</Button>