mgonzalez/project.linkedcorp.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: version 4.0.0 -- Asistente Nuevo proyecto con IA

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Milton Gonzalez
2026-10-23 16:15:53 -05:00
parent 89dec6da7e
commit 4b83a24e4c
14 changed files with 402 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Proyectos/AiPlanDialog.jsx
+2 -2
View File
@@ -73,11 +73,11 @@ export function AiPlanDialog({ open, projectId, onClose, onCreated }) {
<label key={i} className="panel-card" style={{ display: 'flex', gap: 10, alignItems: 'flex-start', margin: 0 }}>
<input type="checkbox" checked={selected.includes(i)} onChange={() => toggle(i)} style={{ marginTop: 4 }} />
<div>
<strong>{a.name}</strong> <span className="text-muted">· {a.durationDays} {t('ai_plan_days')}</span>
<strong>{a.name}</strong> <span className="text-muted">· {a.durationDays} {t(a.durationDays === 1 ? 'ai_plan_day' : 'ai_plan_days')}</span>
{a.description && <div className="text-muted" style={{ fontSize: '.8rem' }}>{a.description}</div>}
{a.tasks.length > 0 && (
<ul style={{ margin: '4px 0 0', paddingLeft: 18, fontSize: '.82rem' }}>
{a.tasks.map((task, j) => <li key={j}>{task}</li>)}
{a.tasks.map((task, j) => <li key={j}>{task.name} <span className="text-muted">({task.durationDays} {t(task.durationDays === 1 ? 'ai_plan_day' : 'ai_plan_days')})</span></li>)}
</ul>
)}
</div>
frontend/src/pages/Proyectos/NewProjectAiDialog.jsx
+128
View File
@@ -0,0 +1,128 @@
import { useState } from 'react';
import { Sparkles, Check, ArrowLeft } from 'lucide-react';
import { DetailPopup } from '../../components/DetailPopup.jsx';
import { Button } from '../../components/Button.jsx';
import { Field, FieldRow } from '../../components/Field.jsx';
import { ComboBox } from '../../components/ComboBox.jsx';
import { InfoBar } from '../../components/InfoBar.jsx';
import { useUi } from '../../context/ui-context.jsx';
import { useAuth } from '../../context/auth-context.jsx';
import { proposeNewProject, createNewProject } from '../../services/ai.js';
const today = () => new Date().toISOString().slice(0, 10);
// Asistente por pasos: 1) objetivo + departamento + fecha (validados aqui, antes de gastar tokens);
// 2) una sola llamada a la IA; 3) revision y creacion. Estado, responsable y miembros los fija el
// backend (Planificado / quien crea). Si el texto no es un proyecto, la IA lo rechaza.
export function NewProjectAiDialog({ open, deptOptions, minLength = 20, onClose, onCreated }) {
const { t, lang } = useUi();
const { user } = useAuth();
const [objective, setObjective] = useState('');
const [departmentId, setDepartmentId] = useState(user?.departmentId || '');
const [startDate, setStartDate] = useState(today());
const [proposal, setProposal] = useState(null);
const [name, setName] = useState('');
const [selected, setSelected] = useState([]);
const [busy, setBusy] = useState(false);
const [error, setError] = useState('');
const objectiveOk = objective.trim().length >= minLength;
const dateOk = /^\d{4}-\d{2}-\d{2}$/.test(startDate);
const canGenerate = objectiveOk && departmentId && dateOk && !busy;
function close() {
if (busy) return;
setProposal(null); setSelected([]); setError(''); setObjective(''); setName(''); setStartDate(today());
onClose();
}
async function generate() {
setBusy(true); setError('');
try {
const p = await proposeNewProject({ objective, startDate, lang });
setProposal(p);
setName(p.name);
setSelected(p.activities.map((_, i) => i));
} catch (err) {
setError(err.message);
} finally {
setBusy(false);
}
}
async function create() {
setBusy(true); setError('');
try {
const r = await createNewProject({
objective: proposal.objective || objective, startDate, name, description: proposal.description, projectTypeId: proposal.projectTypeId,
requestingDepartmentId: departmentId, activities: proposal.activities.filter((_, i) => selected.includes(i)),
});
setBusy(false);
close();
onCreated(r);
} catch (err) {
setError(err.message);
setBusy(false);
}
}
const toggle = (i) => setSelected((s) => (s.includes(i) ? s.filter((x) => x !== i) : [...s, i]));
return (
<DetailPopup open={open} title={t('ai_new_project_title')} onClose={close} width={760} height={680}>
{error && <InfoBar tone="error">{error}</InfoBar>}
{!proposal ? (
<>
<Field label={t('ai_new_project_objective')} hint={`${objective.trim().length}/${minLength} ${t('ai_new_project_min_chars')}`}>
<textarea className="input" rows={5} maxLength={2000} value={objective} onChange={(e) => setObjective(e.target.value)} placeholder={t('ai_new_project_placeholder')} autoFocus />
</Field>
<FieldRow>
<Field label={t('project_requesting_department')}>
<ComboBox options={deptOptions} value={departmentId} onChange={setDepartmentId} />
</Field>
<Field label={t('ai_new_project_start')}>
<input className="input" type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
</Field>
</FieldRow>
<p className="text-muted" style={{ fontSize: '.8rem' }}>{t('ai_new_project_fixed')}</p>
<div style={{ display: 'flex', gap: 8 }}>
<Button variant="accent" icon={Sparkles} onClick={generate} disabled={!canGenerate}>{busy ? t('ai_plan_generating') : t('ai_plan_generate')}</Button>
<Button variant="standard" onClick={close} disabled={busy}>{t('common_cancel')}</Button>
</div>
</>
) : (
<>
<Field label={t('common_name')}>
<input className="input" value={name} maxLength={200} onChange={(e) => setName(e.target.value)} />
</Field>
<p className="text-muted" style={{ marginTop: 0, fontSize: '.8rem' }}>
{proposal.projectTypeName && <>{t('ai_new_project_type')}: <strong>{proposal.projectTypeName}</strong> · </>}
{t('ai_new_project_end')}: <strong>{proposal.estimatedEndDate}</strong>
</p>
<p style={{ fontSize: '.85rem', marginBottom: 4 }}><strong>{t('ai_new_project_goal')}:</strong> {proposal.objective}</p>
{proposal.description && <p style={{ fontSize: '.85rem', marginTop: 0 }}><strong>{t('ai_new_project_desc')}:</strong> {proposal.description}</p>}
<p className="text-muted" style={{ fontSize: '.8rem' }}>{t('ai_new_project_review')}</p>
<div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 16 }}>
{proposal.activities.map((a, i) => (
<label key={i} className="panel-card" style={{ display: 'flex', gap: 10, alignItems: 'flex-start', margin: 0 }}>
<input type="checkbox" checked={selected.includes(i)} onChange={() => toggle(i)} style={{ marginTop: 4 }} />
<div>
<strong>{a.name}</strong> <span className="text-muted">· {a.durationDays} {t(a.durationDays === 1 ? 'ai_plan_day' : 'ai_plan_days')}</span>
<ul style={{ margin: '4px 0 0', paddingLeft: 18, fontSize: '.82rem' }}>
{a.tasks.map((task, j) => <li key={j}>{task.name} <span className="text-muted">({task.durationDays} {t(task.durationDays === 1 ? 'ai_plan_day' : 'ai_plan_days')})</span></li>)}
</ul>
</div>
</label>
))}
</div>
<div style={{ display: 'flex', gap: 8 }}>
<Button variant="accent" icon={Check} onClick={create} disabled={busy || !selected.length || !name.trim()}>
{busy ? t('ai_plan_creating') : t('ai_new_project_create')}
</Button>
<Button variant="standard" icon={ArrowLeft} onClick={() => setProposal(null)} disabled={busy}>{t('ai_plan_back')}</Button>
</div>
</>
)}
</DetailPopup>
);
}
frontend/src/pages/Proyectos/ProyectosPage.jsx
+18 -1
View File
@@ -1,6 +1,8 @@
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Plus, Save, Trash2, RotateCcw, ArrowLeft } from 'lucide-react';
import { Plus, Save, Trash2, RotateCcw, ArrowLeft, Sparkles } from 'lucide-react';
import { NewProjectAiDialog } from './NewProjectAiDialog.jsx';
import { getAiStatus } from '../../services/ai.js';
import { useUi } from '../../context/ui-context.jsx';
import { useAuth } from '../../context/auth-context.jsx';
import { useAsync, useAction } from '../../hooks/useAsync.js';
@@ -88,6 +90,10 @@ export default function ProyectosPage() {
const { data: statuses } = useAsync(() => listCatalog('project-statuses'), []);
const { data: types } = useAsync(() => listCatalog('project-types'), []);
const { data: deptTree } = useAsync(listDepartments, []);
// Asistente con IA: solo si el superadmin configuro la clave y el rol puede crear proyectos.
const { data: aiStatus } = useAsync(() => getAiStatus().catch(() => ({ enabled: false })), []);
const [aiCreating, setAiCreating] = useState(false);
const canCreateProjects = ['superadmin', 'admin', 'it_manager', 'project_lead'].includes(currentUser?.roleCode);
useEffect(() => { setPage(1); }, [showTrash, filterStatusId, filterPriorityId, filterOwnerUserId, filterDueSoon, progressFilter, search, pageSize]);
const [creating, setCreating] = useState(false);
@@ -224,6 +230,9 @@ export default function ProyectosPage() {
{isSuperadmin && (
<Button variant="standard" icon={Trash2} onClick={() => setShowTrash(true)}>{t('project_trash')}</Button>
)}
{aiStatus?.enabled && canCreateProjects && (
<Button variant="standard" icon={Sparkles} onClick={() => setAiCreating(true)}>{t('ai_new_project_button')}</Button>
)}
<Button variant="accent" icon={Plus} onClick={() => setCreating(true)}>{t('project_new')}{pendingNew && !creating && <DraftMark />}</Button>
</div>
)}
@@ -315,6 +324,14 @@ export default function ProyectosPage() {
<Button variant="standard" disabled={page * pageSize >= projectPage.total} onClick={() => setPage((p) => p + 1)}>{t('project_page_next')}</Button>
</div>
<NewProjectAiDialog
open={aiCreating}
deptOptions={deptOptions}
minLength={aiStatus?.minObjectiveLength}
onClose={() => setAiCreating(false)}
onCreated={(r) => navigate(`/proyectos/${r.id}`)}
/>
<DetailPopup open={creating} title={t('project_new')} onClose={() => guardedClose(draft, () => setCreating(false))} width={720} height={720}>
<DraftNotice draft={draft} />
<Field label={t('common_name')} dirty={draft.isFieldDirty('name')}>