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
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user