feat: version 4.0.0 -- Asistente Nuevo proyecto con IA
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Milton Gonzalez
@@ -26,10 +26,24 @@ export const messages = {
|
||||
ai_plan_generating: 'Generando...',
|
||||
ai_plan_review: 'Desmarca lo que no quieras. Las actividades se crean encadenadas desde hoy, con prioridad media; luego puedes editarlas.',
|
||||
ai_plan_days: 'días',
|
||||
ai_plan_day: 'día',
|
||||
ai_plan_apply: 'Crear seleccionadas',
|
||||
ai_plan_creating: 'Creando...',
|
||||
ai_plan_back: 'Volver',
|
||||
ai_plan_created: 'Actividades creadas',
|
||||
ai_new_project_button: 'Nuevo con IA',
|
||||
ai_new_project_title: 'Nuevo proyecto con IA',
|
||||
ai_new_project_objective: '¿Qué proyecto quieres emprender? Describe su objetivo',
|
||||
ai_new_project_min_chars: 'caracteres mínimos',
|
||||
ai_new_project_placeholder: 'Ej.: implementar una mesa de ayuda para que los usuarios reporten incidencias de TI con seguimiento y tiempos de respuesta',
|
||||
ai_new_project_start: 'Fecha de inicio',
|
||||
ai_new_project_fixed: 'El proyecto se crea en estado Planificado, contigo como responsable y único miembro. La IA propone el nombre, las actividades y sus tareas; podrás revisarlos antes de crear.',
|
||||
ai_new_project_type: 'Tipo',
|
||||
ai_new_project_goal: 'Objetivo',
|
||||
ai_new_project_desc: 'Descripción',
|
||||
ai_new_project_end: 'Fin estimado',
|
||||
ai_new_project_review: 'Desmarca las actividades que no quieras. Puedes cambiar el nombre aquí o después en el proyecto.',
|
||||
ai_new_project_create: 'Crear proyecto',
|
||||
nav_projects: 'Proyectos',
|
||||
nav_organization: 'Organizacion',
|
||||
nav_config: 'Configuracion',
|
||||
@@ -573,10 +587,24 @@ export const messages = {
|
||||
ai_plan_generating: 'Generating...',
|
||||
ai_plan_review: 'Uncheck what you do not want. Activities are created back to back from today with medium priority; you can edit them later.',
|
||||
ai_plan_days: 'days',
|
||||
ai_plan_day: 'day',
|
||||
ai_plan_apply: 'Create selected',
|
||||
ai_plan_creating: 'Creating...',
|
||||
ai_plan_back: 'Back',
|
||||
ai_plan_created: 'Activities created',
|
||||
ai_new_project_button: 'New with AI',
|
||||
ai_new_project_title: 'New project with AI',
|
||||
ai_new_project_objective: 'What project do you want to start? Describe its goal',
|
||||
ai_new_project_min_chars: 'minimum characters',
|
||||
ai_new_project_placeholder: 'E.g.: implement a help desk so users can report IT incidents with tracking and response times',
|
||||
ai_new_project_start: 'Start date',
|
||||
ai_new_project_fixed: 'The project is created as Planned, with you as owner and only member. AI proposes the name, activities and tasks; you will review them before creating.',
|
||||
ai_new_project_type: 'Type',
|
||||
ai_new_project_goal: 'Goal',
|
||||
ai_new_project_desc: 'Description',
|
||||
ai_new_project_end: 'Estimated end',
|
||||
ai_new_project_review: 'Uncheck the activities you do not want. You can change the name here or later in the project.',
|
||||
ai_new_project_create: 'Create project',
|
||||
nav_projects: 'Projects',
|
||||
nav_organization: 'Organization',
|
||||
nav_config: 'Settings',
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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')}>
|
||||
|
||||
@@ -3,3 +3,5 @@ import { api } from './api.js';
|
||||
export const getAiStatus = () => api.get('/ai/status');
|
||||
export const generateProjectPlan = (projectId, data) => api.post(`/ai/projects/${projectId}/plan`, data);
|
||||
export const applyProjectPlan = (projectId, activities) => api.post(`/ai/projects/${projectId}/plan/apply`, { activities });
|
||||
export const proposeNewProject = (data) => api.post('/ai/new-project/propose', data);
|
||||
export const createNewProject = (data) => api.post('/ai/new-project', data);
|
||||
|
||||
Reference in New Issue
Block a user