fix: version 2.11.1 -- mueve los contadores de 2.11.0 de columnas de grilla a badges de pestaña

La 2.11.0 agrego los contadores de dependencias/comentarios/documentos/miembros como columnas
nuevas en las tablas de Proyectos y Actividades -- no era el pedido original, desbordaba la
grilla. Se revierten esas columnas (y el componente CountBadge que solo ellas usaban) y los
contadores van donde correspondia desde el principio: como badge junto al nombre de cada
pestaña, al mismo estilo que ya usaba "Tareas n/n" (componente Tabs + .tab-badge):
- Proyecto: pestañas Miembros, Actividades (completas/total), Comentarios, Documentos.
- Actividad: pestaña Dependencias (ya existia Tareas/Comentarios/Documentos, solo faltaba esta).

De paso: Tabs.jsx ocultaba el badge cuando count era 0 (!!tab.count) -- se cambia a mostrar
siempre que la pestaña mande la prop (count !== undefined), para que 0 se vea como "0" y no
desaparezca. CommentsPanel/AttachmentsPanel ganan un onChanged opcional para que el contador
de Comentarios/Documentos del PROYECTO se actualice al tiro sin tener que recargar la pagina
(el de la actividad ya se refrescaba solo al cambiar de pestaña).

El backend de 2.11.0 (subconsultas dependencies_count/comments_count/documents_count/
members_count/activities_total/activities_complete en los LIST_SELECT) se mantiene igual,
solo cambia donde el frontend los usa.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Milton Gonzalez
2026-10-14 11:53:43 -05:00
parent 4520abe96f
commit d44f96bb6c
13 changed files with 29 additions and 40 deletions
@@ -1,6 +1,6 @@
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Plus, Save, Trash2, RotateCcw, ArrowLeft, Users, ListChecks, MessageSquare, Paperclip } from 'lucide-react';
import { Plus, Save, Trash2, RotateCcw, ArrowLeft } from 'lucide-react';
import { useUi } from '../../context/ui-context.jsx';
import { useAuth } from '../../context/auth-context.jsx';
import { useAsync, useAction } from '../../hooks/useAsync.js';
@@ -20,7 +20,6 @@ import { StatusBadge, ProgressBar } from '../../components/StatusBadge.jsx';
import { Badge } from '../../components/Badge.jsx';
import { DetailPopup } from '../../components/DetailPopup.jsx';
import { SharedWithIcon } from '../../components/SharedWithIcon.jsx';
import { CountBadge } from '../../components/CountBadge.jsx';
const CAN_DELETE_ROLES = ['superadmin', 'admin', 'it_manager', 'project_lead'];
@@ -170,13 +169,7 @@ export default function ProyectosPage() {
{ key: 'status_name', label: t('common_status'), render: (r) => <StatusBadge name={r.status_name} color={r.status_color} /> },
{ key: 'priority_name', label: t('common_priority'), sortValue: (r) => r.priority_level, render: (r) => <StatusBadge name={r.priority_name} color={r.priority_color} /> },
{ key: 'owner_name', label: t('project_owner') },
{ key: 'members_count', label: t('project_members'), render: (r) => <CountBadge icon={Users} count={r.members_count} title={t('project_members')} /> },
{ key: 'progress_pct', label: t('project_progress'), render: (r) => <div style={{ width: 90 }}><ProgressBar value={Number(r.progress_pct)} /></div> },
{ key: 'activities_progress', label: t('tab_activities'), sortValue: (r) => (r.activities_total ? r.activities_complete / r.activities_total : 0), render: (r) => (
<span className="count-badge" title={t('tab_activities')}><ListChecks size={14} />{r.activities_complete}/{r.activities_total}</span>
) },
{ key: 'comments_count', label: t('tab_comments'), render: (r) => <CountBadge icon={MessageSquare} count={r.comments_count} title={t('tab_comments')} /> },
{ key: 'documents_count', label: t('tab_documents'), render: (r) => <CountBadge icon={Paperclip} count={r.documents_count} title={t('tab_documents')} /> },
{ key: 'shared', label: '', sortable: false, render: (r) => <SharedWithIcon projectId={r.id} count={r.shared_count} /> },
{ key: 'risk_level', label: t('project_risk'), render: (r) => <Badge color={RISK_COLOR[r.risk_level]}>{t(`risk_${r.risk_level}`)}</Badge> },
{ key: 'updated_at', label: t('project_updated_at'), render: (r) => String(r.updated_at).slice(0, 16) },