Fixed MilestoneEditModal and FinancialProjectionService impact signs.
This commit is contained in:
parent
15d28ce2e8
commit
5ad377b50e
@ -240,8 +240,9 @@ I'm here to support you with personalized coaching. What would you like to focus
|
||||
setMessages((prev) => [...prev, { role: "assistant", content: friendlyReply }]);
|
||||
|
||||
if (riskData && onAiRiskFetched) onAiRiskFetched(riskData);
|
||||
if (createdMilestones.length && onMilestonesCreated)
|
||||
onMilestonesCreated(createdMilestones.length);
|
||||
if (createdMilestones.length && typeof onMilestonesCreated === 'function') {
|
||||
onMilestonesCreated(); // no arg needed – just refetch
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setMessages((prev) => [...prev, { role: "assistant", content: "Sorry, something went wrong." }]);
|
||||
|
||||
@ -37,6 +37,7 @@ import parseAIJson from "../utils/parseAIJson.js"; // your shared parser
|
||||
import InfoTooltip from "./ui/infoTooltip.js";
|
||||
import differenceInMonths from 'date-fns/differenceInMonths';
|
||||
|
||||
|
||||
import "../styles/legacy/MilestoneTimeline.legacy.css";
|
||||
|
||||
// --------------
|
||||
@ -1295,6 +1296,14 @@ const fetchMilestones = useCallback(async () => {
|
||||
} // single rebuild
|
||||
}, [financialProfile, scenarioRow, careerProfileId]); // ← NOTICE: no buildProjection here
|
||||
|
||||
const handleMilestonesCreated = useCallback(
|
||||
(count = 0) => {
|
||||
// optional toast
|
||||
if (count) console.log(`💾 ${count} milestone(s) saved – refreshing list…`);
|
||||
fetchMilestones();
|
||||
},
|
||||
[fetchMilestones]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="milestone-tracker max-w-screen-lg mx-auto px-4 py-6 space-y-4">
|
||||
@ -1524,7 +1533,10 @@ const fetchMilestones = useCallback(async () => {
|
||||
|
||||
{/* Milestones – stacked list under chart */}
|
||||
<div className="mt-4 bg-white p-4 rounded shadow">
|
||||
<h4 className="text-lg font-semibold mb-2">Milestones</h4>
|
||||
<h4 className="text-lg font-semibold mb-2">
|
||||
Milestones
|
||||
<InfoTooltip message="Milestones are career or life events—promotions, relocations, degree completions, etc.—that may change your income or spending. They feed directly into the financial projection if they have a financial impact." />
|
||||
</h4>
|
||||
<MilestonePanel
|
||||
groups={milestoneGroups}
|
||||
onEdit={onEditMilestone}
|
||||
|
||||
@ -2,263 +2,257 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import authFetch from '../utils/authFetch.js';
|
||||
|
||||
const MilestoneAddModal = ({
|
||||
/* ─────────────────────────────────────────────────────────
|
||||
CONSTANTS
|
||||
───────────────────────────────────────────────────────── */
|
||||
const IMPACT_TYPES = ['salary', 'cost', 'tuition', 'note'];
|
||||
const FREQ_OPTIONS = ['ONE_TIME', 'MONTHLY'];
|
||||
|
||||
export default function MilestoneAddModal({
|
||||
show,
|
||||
onClose,
|
||||
defaultScenarioId,
|
||||
scenarioId, // which scenario this milestone applies to
|
||||
editMilestone, // if editing an existing milestone, pass its data
|
||||
}) => {
|
||||
// Basic milestone fields
|
||||
scenarioId, // active scenario UUID
|
||||
editMilestone = null // pass full row when editing
|
||||
}) {
|
||||
/* ────────────── state ────────────── */
|
||||
const [title, setTitle] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
|
||||
// We'll store an array of impacts. Each impact is { impact_type, direction, amount, start_month, end_month }
|
||||
const [impacts, setImpacts] = useState([]);
|
||||
|
||||
// On open, if editing, fill in existing fields
|
||||
/* ────────────── init / reset ────────────── */
|
||||
useEffect(() => {
|
||||
if (!show) return; // if modal is hidden, do nothing
|
||||
if (!show) return;
|
||||
|
||||
if (editMilestone) {
|
||||
setTitle(editMilestone.title || '');
|
||||
setDescription(editMilestone.description || '');
|
||||
// If editing, you might fetch existing impacts from the server or they could be passed in
|
||||
if (editMilestone.impacts) {
|
||||
setImpacts(editMilestone.impacts);
|
||||
setImpacts(editMilestone.impacts || []);
|
||||
} else {
|
||||
// fetch from backend if needed
|
||||
// e.g. GET /api/premium/milestones/:id/impacts
|
||||
}
|
||||
} else {
|
||||
// Creating a new milestone
|
||||
setTitle('');
|
||||
setDescription('');
|
||||
setImpacts([]);
|
||||
setTitle(''); setDescription(''); setImpacts([]);
|
||||
}
|
||||
}, [show, editMilestone]);
|
||||
|
||||
// Handler: add a new blank impact
|
||||
const handleAddImpact = () => {
|
||||
setImpacts((prev) => [
|
||||
/* ────────────── helpers ────────────── */
|
||||
const addImpactRow = () =>
|
||||
setImpacts(prev => [
|
||||
...prev,
|
||||
{
|
||||
impact_type: 'ONE_TIME',
|
||||
impact_type : 'cost',
|
||||
frequency : 'ONE_TIME',
|
||||
direction : 'subtract',
|
||||
amount : 0,
|
||||
start_month: 0,
|
||||
end_month: null
|
||||
start_date : '', // ISO yyyy‑mm‑dd
|
||||
end_date : '' // blank ⇒ indefinite
|
||||
}
|
||||
]);
|
||||
};
|
||||
|
||||
// Handler: update a single impact in the array
|
||||
const handleImpactChange = (index, field, value) => {
|
||||
setImpacts((prev) => {
|
||||
const updated = [...prev];
|
||||
updated[index] = { ...updated[index], [field]: value };
|
||||
return updated;
|
||||
const updateImpact = (idx, field, value) =>
|
||||
setImpacts(prev => {
|
||||
const copy = [...prev];
|
||||
copy[idx] = { ...copy[idx], [field]: value };
|
||||
return copy;
|
||||
});
|
||||
};
|
||||
|
||||
// Handler: remove an impact row
|
||||
const handleRemoveImpact = (index) => {
|
||||
setImpacts((prev) => prev.filter((_, i) => i !== index));
|
||||
};
|
||||
const removeImpact = idx =>
|
||||
setImpacts(prev => prev.filter((_, i) => i !== idx));
|
||||
|
||||
// Handler: Save everything to the server
|
||||
const handleSave = async () => {
|
||||
/* ────────────── save ────────────── */
|
||||
async function handleSave() {
|
||||
try {
|
||||
let milestoneId;
|
||||
if (editMilestone) {
|
||||
// 1) Update existing milestone
|
||||
milestoneId = editMilestone.id;
|
||||
/* 1️⃣ create OR update the milestone row */
|
||||
let milestoneId = editMilestone?.id;
|
||||
if (milestoneId) {
|
||||
await authFetch(`api/premium/milestones/${milestoneId}`, {
|
||||
method : 'PUT',
|
||||
headers: { 'Content-Type':'application/json' },
|
||||
body: JSON.stringify({
|
||||
title,
|
||||
description,
|
||||
scenario_id: scenarioId,
|
||||
// Possibly other fields
|
||||
})
|
||||
body : JSON.stringify({ title, description })
|
||||
});
|
||||
// Then handle impacts below...
|
||||
} else {
|
||||
// 1) Create new milestone
|
||||
const res = await authFetch('api/premium/milestones', {
|
||||
method : 'POST',
|
||||
headers: { 'Content-Type':'application/json' },
|
||||
body : JSON.stringify({
|
||||
title,
|
||||
description,
|
||||
scenario_id: scenarioId
|
||||
career_profile_id: scenarioId
|
||||
})
|
||||
});
|
||||
if (!res.ok) throw new Error('Failed to create milestone');
|
||||
const created = await res.json();
|
||||
milestoneId = created.id; // assuming the response returns { id: newMilestoneId }
|
||||
if (!res.ok) throw new Error('Milestone create failed');
|
||||
const json = await res.json();
|
||||
milestoneId = json.id ?? json[0]?.id; // array OR obj
|
||||
}
|
||||
|
||||
// 2) For the impacts, we can do a batch approach or individual calls
|
||||
// For simplicity, let's do multiple POST calls
|
||||
for (const impact of impacts) {
|
||||
// If editing, you might do a PUT if the impact already has an id
|
||||
/* 2️⃣ upsert each impact (one call per row) */
|
||||
for (const imp of impacts) {
|
||||
const body = {
|
||||
milestone_id : milestoneId,
|
||||
impact_type : imp.impact_type,
|
||||
frequency : imp.frequency, // ONE_TIME / MONTHLY
|
||||
direction : imp.direction,
|
||||
amount : parseFloat(imp.amount) || 0,
|
||||
start_date : imp.start_date || null,
|
||||
end_date : imp.frequency === 'MONTHLY' && imp.end_date
|
||||
? imp.end_date
|
||||
: null
|
||||
};
|
||||
await authFetch('api/premium/milestone-impacts', {
|
||||
method : 'POST',
|
||||
headers: { 'Content-Type':'application/json' },
|
||||
body: JSON.stringify({
|
||||
milestone_id: milestoneId,
|
||||
impact_type: impact.impact_type,
|
||||
direction: impact.direction,
|
||||
amount: parseFloat(impact.amount) || 0,
|
||||
start_month: parseInt(impact.start_month, 10) || 0,
|
||||
end_month: impact.end_month !== null
|
||||
? parseInt(impact.end_month, 10)
|
||||
: null,
|
||||
created_at: new Date().toISOString().slice(0, 10),
|
||||
updated_at: new Date().toISOString().slice(0, 10)
|
||||
})
|
||||
body : JSON.stringify(body)
|
||||
});
|
||||
}
|
||||
|
||||
// Done, close modal
|
||||
onClose();
|
||||
onClose(true); // ← parent will refetch
|
||||
} catch (err) {
|
||||
console.error('Failed to save milestone + impacts:', err);
|
||||
// Show some UI error if needed
|
||||
console.error('Save failed:', err);
|
||||
alert('Sorry, something went wrong – please try again.');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/* ────────────── UI ────────────── */
|
||||
if (!show) return null;
|
||||
|
||||
return (
|
||||
<div className="modal-backdrop">
|
||||
<div className="modal-container">
|
||||
<div className="modal-container w-full max-w-lg">
|
||||
<h2 className="text-xl font-bold mb-2">
|
||||
{editMilestone ? 'Edit Milestone' : 'Add Milestone'}
|
||||
</h2>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="block font-semibold">Title</label>
|
||||
{/* basic fields */}
|
||||
<label className="block font-semibold mt-2">Title</label>
|
||||
<input
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
onChange={e => setTitle(e.target.value)}
|
||||
className="border w-full px-2 py-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-3">
|
||||
<label className="block font-semibold">Description</label>
|
||||
<label className="block font-semibold mt-4">Description</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
rows={3}
|
||||
className="border w-full px-2 py-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Impacts Section */}
|
||||
<h3 className="text-lg font-semibold mt-4">Financial Impacts</h3>
|
||||
{impacts.map((impact, i) => (
|
||||
<div key={i} className="border rounded p-2 my-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p>Impact #{i + 1}</p>
|
||||
{/* impacts */}
|
||||
<h3 className="text-lg font-semibold mt-6">Financial Impacts</h3>
|
||||
|
||||
{impacts.map((imp, i) => (
|
||||
<div key={i} className="border rounded p-3 mt-4 space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="font-medium">Impact #{i + 1}</span>
|
||||
<button
|
||||
className="text-red-500"
|
||||
onClick={() => handleRemoveImpact(i)}
|
||||
className="text-red-600 text-sm"
|
||||
onClick={() => removeImpact(i)}
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Impact Type */}
|
||||
<div className="mt-2">
|
||||
<label className="block font-semibold">Type</label>
|
||||
{/* type */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold">Type</label>
|
||||
<select
|
||||
value={impact.impact_type}
|
||||
onChange={(e) =>
|
||||
handleImpactChange(i, 'impact_type', e.target.value)
|
||||
}
|
||||
value={imp.impact_type}
|
||||
onChange={e => updateImpact(i, 'impact_type', e.target.value)}
|
||||
className="border px-2 py-1 w-full"
|
||||
>
|
||||
<option value="ONE_TIME">One-Time</option>
|
||||
<option value="MONTHLY">Monthly</option>
|
||||
{IMPACT_TYPES.map(t => (
|
||||
<option key={t} value={t}>
|
||||
{t === 'salary' ? 'Salary change'
|
||||
: t === 'cost' ? 'Cost / expense'
|
||||
: t.charAt(0).toUpperCase() + t.slice(1)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Direction */}
|
||||
<div className="mt-2">
|
||||
<label className="block font-semibold">Direction</label>
|
||||
{/* frequency */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold">Frequency</label>
|
||||
<select
|
||||
value={impact.direction}
|
||||
onChange={(e) =>
|
||||
handleImpactChange(i, 'direction', e.target.value)
|
||||
}
|
||||
value={imp.frequency}
|
||||
onChange={e => updateImpact(i, 'frequency', e.target.value)}
|
||||
className="border px-2 py-1 w-full"
|
||||
>
|
||||
<option value="add">Add (Income)</option>
|
||||
<option value="subtract">Subtract (Expense)</option>
|
||||
<option value="ONE_TIME">One‑time</option>
|
||||
<option value="MONTHLY">Monthly (recurring)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Amount */}
|
||||
<div className="mt-2">
|
||||
<label className="block font-semibold">Amount</label>
|
||||
{/* direction */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold">Direction</label>
|
||||
<select
|
||||
value={imp.direction}
|
||||
onChange={e => updateImpact(i, 'direction', e.target.value)}
|
||||
className="border px-2 py-1 w-full"
|
||||
>
|
||||
<option value="add">Add (income)</option>
|
||||
<option value="subtract">Subtract (expense)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* amount */}
|
||||
<div>
|
||||
<label className="block text-sm font-semibold">Amount ($)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={impact.amount}
|
||||
onChange={(e) =>
|
||||
handleImpactChange(i, 'amount', e.target.value)
|
||||
}
|
||||
value={imp.amount}
|
||||
onChange={e => updateImpact(i, 'amount', e.target.value)}
|
||||
className="border px-2 py-1 w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Start Month */}
|
||||
<div className="mt-2">
|
||||
<label className="block font-semibold">Start Month</label>
|
||||
{/* dates */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-semibold">Start date</label>
|
||||
<input
|
||||
type="number"
|
||||
value={impact.start_month}
|
||||
onChange={(e) =>
|
||||
handleImpactChange(i, 'start_month', e.target.value)
|
||||
}
|
||||
type="date"
|
||||
value={imp.start_date}
|
||||
onChange={e => updateImpact(i, 'start_date', e.target.value)}
|
||||
className="border px-2 py-1 w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* End Month (for MONTHLY, can be null/blank if indefinite) */}
|
||||
{impact.impact_type === 'MONTHLY' && (
|
||||
<div className="mt-2">
|
||||
<label className="block font-semibold">End Month (optional)</label>
|
||||
{imp.frequency === 'MONTHLY' && (
|
||||
<div>
|
||||
<label className="block text-sm font-semibold">
|
||||
End date (optional)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={impact.end_month || ''}
|
||||
onChange={(e) =>
|
||||
handleImpactChange(i, 'end_month', e.target.value || null)
|
||||
}
|
||||
type="date"
|
||||
value={imp.end_date || ''}
|
||||
onChange={e => updateImpact(i, 'end_date', e.target.value)}
|
||||
className="border px-2 py-1 w-full"
|
||||
placeholder="Leave blank for indefinite"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<button onClick={handleAddImpact} className="bg-gray-200 px-3 py-1 my-2">
|
||||
+ Add Impact
|
||||
<button
|
||||
onClick={addImpactRow}
|
||||
className="bg-gray-200 px-4 py-1 rounded mt-4"
|
||||
>
|
||||
+ Add impact
|
||||
</button>
|
||||
|
||||
{/* Modal Actions */}
|
||||
<div className="flex justify-end mt-4">
|
||||
<button className="mr-2" onClick={onClose}>
|
||||
{/* actions */}
|
||||
<div className="flex justify-end gap-3 mt-6">
|
||||
<button onClick={() => onClose(false)} className="px-4 py-2">
|
||||
Cancel
|
||||
</button>
|
||||
<button className="bg-blue-500 text-white px-4 py-2 rounded" onClick={handleSave}>
|
||||
Save Milestone
|
||||
<button
|
||||
onClick={handleSave}
|
||||
className="bg-blue-600 text-white px-5 py-2 rounded"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MilestoneAddModal;
|
||||
}
|
||||
|
||||
@ -1,19 +1,13 @@
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { Button } from "./ui/button.js";
|
||||
import authFetch from "../utils/authFetch.js";
|
||||
import MilestoneCopyWizard from "./MilestoneCopyWizard.js";
|
||||
// src/components/MilestoneEditModal.js
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import { Button } from './ui/button.js';
|
||||
import InfoTooltip from './ui/infoTooltip.js';
|
||||
import authFetch from '../utils/authFetch.js';
|
||||
import MilestoneCopyWizard from './MilestoneCopyWizard.js';
|
||||
|
||||
/* Helper ---------------------------------------------------- */
|
||||
const toSqlDate = (v) => (v ? String(v).slice(0, 10) : '');
|
||||
|
||||
/**
|
||||
* Full‑screen overlay for creating / editing milestones + impacts + tasks.
|
||||
* Extracted from ScenarioContainer so it can be shared with CareerRoadmap.
|
||||
*
|
||||
* Props
|
||||
* ──────────────────────────────────────────────────────────────────────
|
||||
* careerProfileId – number (required)
|
||||
* milestones – array of milestone objects to edit
|
||||
* fetchMilestones – async fn to refresh parent after a save/delete
|
||||
* onClose(bool) – close overlay. param = true if data changed
|
||||
*/
|
||||
export default function MilestoneEditModal({
|
||||
careerProfileId,
|
||||
milestones: incomingMils = [],
|
||||
@ -21,596 +15,506 @@ export default function MilestoneEditModal({
|
||||
fetchMilestones,
|
||||
onClose
|
||||
}) {
|
||||
/* ────────────────────────────────
|
||||
Local state mirrors ScenarioContainer
|
||||
*/
|
||||
/* ───────────────── state */
|
||||
const [milestones, setMilestones] = useState(incomingMils);
|
||||
const [editingMilestoneId, setEditingMilestoneId] = useState(null);
|
||||
const [newMilestoneMap, setNewMilestoneMap] = useState({});
|
||||
const [addingNewMilestone, setAddingNewMilestone] = useState(false);
|
||||
const [newMilestoneData, setNewMilestoneData] = useState({
|
||||
title: "",
|
||||
description: "",
|
||||
date: "",
|
||||
progress: 0,
|
||||
newSalary: "",
|
||||
impacts: [],
|
||||
isUniversal: 0
|
||||
const [editingId, setEditingId] = useState(null);
|
||||
const [draft, setDraft] = useState({}); // id → {…fields}
|
||||
const [originalImpactIdsMap, setOriginalImpactIdsMap] = useState({});
|
||||
const [addingNew, setAddingNew] = useState(false);
|
||||
const [newMilestone, setNewMilestone] = useState({
|
||||
title:'', description:'', date:'', progress:0, newSalary:'',
|
||||
impacts:[], isUniversal:0
|
||||
});
|
||||
const [copyWizardMilestone, setCopyWizardMilestone] = useState(null);
|
||||
const [MilestoneCopyWizard, setMilestoneCopyWizard] = useState(null);
|
||||
const [isSavingEdit, setIsSavingEdit] = useState(false);
|
||||
const [isSavingNew , setIsSavingNew ] = useState(false);
|
||||
|
||||
function toSqlDate(val) {
|
||||
if (!val) return ''; // null | undefined | '' | 0
|
||||
return String(val).slice(0, 10);
|
||||
}
|
||||
/* keep list in sync with prop */
|
||||
useEffect(()=> setMilestones(incomingMils), [incomingMils]);
|
||||
|
||||
/* keep milestones in sync with prop */
|
||||
useEffect(() => {
|
||||
setMilestones(incomingMils);
|
||||
}, [incomingMils]);
|
||||
/* --------------------------------------------------------- *
|
||||
* Load impacts for one milestone then open its accordion
|
||||
* --------------------------------------------------------- */
|
||||
const openEditor = useCallback(async (m) => {
|
||||
|
||||
/* ────────────────────────────────
|
||||
Inline-edit helpers
|
||||
──────────────────────────────────*/
|
||||
|
||||
// 1️⃣ fetch impacts + open editor ── moved **up** so the next effect
|
||||
// can safely reference it in its dependency array
|
||||
const loadMilestoneImpacts = useCallback(async (m) => {
|
||||
try {
|
||||
const res = await authFetch(
|
||||
`/api/premium/milestone-impacts?milestone_id=${m.id}`
|
||||
);
|
||||
if (!res.ok) throw new Error('impact fetch failed');
|
||||
const json = await res.json();
|
||||
|
||||
const impacts = (json.impacts || []).map(imp => ({
|
||||
id : imp.id,
|
||||
impact_type : imp.impact_type || 'ONE_TIME',
|
||||
direction : imp.direction || 'subtract',
|
||||
amount : imp.amount || 0,
|
||||
start_date : toSqlDate(imp.start_date) || '',
|
||||
end_date : toSqlDate(imp.end_date) || ''
|
||||
setEditingId(m.id);
|
||||
const res = await authFetch(`/api/premium/milestone-impacts?milestone_id=${m.id}`);
|
||||
const json = res.ok ? await res.json() : { impacts:[] };
|
||||
const imps = (json.impacts||[]).map(i=>({
|
||||
id:i.id,
|
||||
impact_type : i.impact_type||'ONE_TIME',
|
||||
direction : i.direction||'subtract',
|
||||
amount : i.amount||0,
|
||||
start_date : toSqlDate(i.start_date),
|
||||
end_date : toSqlDate(i.end_date)
|
||||
}));
|
||||
|
||||
// editable copy for the form
|
||||
setNewMilestoneMap(prev => ({
|
||||
...prev,
|
||||
setDraft(d => ({ ...d,
|
||||
[m.id]: {
|
||||
title : m.title||'',
|
||||
description : m.description||'',
|
||||
date : toSqlDate(m.date) || '',
|
||||
date : toSqlDate(m.date),
|
||||
progress : m.progress||0,
|
||||
newSalary : m.new_salary||'',
|
||||
impacts,
|
||||
impacts : imps,
|
||||
isUniversal : m.is_universal?1:0
|
||||
}
|
||||
}));
|
||||
setOriginalImpactIdsMap(p => ({ ...p, [m.id]: imps.map(i=>i.id)}));
|
||||
}, [editingId]);
|
||||
|
||||
// snapshot of original impact IDs
|
||||
setOriginalImpactIdsMap(prev => ({
|
||||
...prev,
|
||||
[m.id]: impacts.map(i => i.id)
|
||||
}));
|
||||
|
||||
setEditingMilestoneId(m.id); // open accordion
|
||||
} catch (err) {
|
||||
console.error('loadImpacts', err);
|
||||
const handleAccordionClick = (m) => {
|
||||
if (editingId === m.id) {
|
||||
setEditingId(null); // just close
|
||||
} else {
|
||||
openEditor(m); // open + fetch
|
||||
}
|
||||
}, []); // ← useCallback deps (none)
|
||||
|
||||
// NOW the effect that calls it; declared **after** the callback
|
||||
useEffect(() => {
|
||||
if (selectedMilestone) {
|
||||
loadMilestoneImpacts(selectedMilestone);
|
||||
}
|
||||
}, [selectedMilestone, loadMilestoneImpacts]);
|
||||
|
||||
const [originalImpactIdsMap, setOriginalImpactIdsMap] = useState({});
|
||||
|
||||
|
||||
/* 2️⃣ toggle open / close */
|
||||
const handleEditMilestoneInline = (milestone) => {
|
||||
setEditingMilestoneId((curr) =>
|
||||
curr === milestone.id ? null : milestone.id
|
||||
);
|
||||
if (editingMilestoneId !== milestone.id) loadMilestoneImpacts(milestone);
|
||||
};
|
||||
|
||||
/* 3️⃣ generic field updater for one impact row */
|
||||
const updateInlineImpact = (mid, idx, field, value) => {
|
||||
setNewMilestoneMap(prev => {
|
||||
const m = prev[mid];
|
||||
if (!m) return prev;
|
||||
const impacts = [...m.impacts];
|
||||
impacts[idx] = { ...impacts[idx], [field]: value };
|
||||
return { ...prev, [mid]: { ...m, impacts } };
|
||||
/* open editor automatically when parent passed selectedMilestone */
|
||||
useEffect(()=>{ if(selectedMilestone) openEditor(selectedMilestone)},[selectedMilestone,openEditor]);
|
||||
|
||||
/* --------------------------------------------------------- *
|
||||
* Handlers – shared small helpers
|
||||
* --------------------------------------------------------- */
|
||||
const updateImpact = (mid, idx, field, value) =>
|
||||
setDraft(p => {
|
||||
const d = p[mid]; if(!d) return p;
|
||||
const copy = [...d.impacts]; copy[idx] = { ...copy[idx], [field]: value };
|
||||
return { ...p, [mid]: { ...d, impacts:copy }};
|
||||
});
|
||||
};
|
||||
|
||||
/* 4️⃣ add an empty impact row */
|
||||
const addInlineImpact = (mid) => {
|
||||
setNewMilestoneMap(prev => {
|
||||
const m = prev[mid];
|
||||
if (!m) return prev;
|
||||
return {
|
||||
...prev,
|
||||
[mid]: {
|
||||
...m,
|
||||
impacts: [
|
||||
...m.impacts,
|
||||
{
|
||||
impact_type : 'ONE_TIME',
|
||||
direction : 'subtract',
|
||||
amount : 0,
|
||||
start_date : '',
|
||||
end_date : ''
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
const addImpactRow = (mid) =>
|
||||
setDraft(p=>{
|
||||
const d=p[mid]; if(!d) return p;
|
||||
const blank = { impact_type:'ONE_TIME', direction:'subtract', amount:0, start_date:'', end_date:'' };
|
||||
return { ...p, [mid]: { ...d, impacts:[...d.impacts, blank]}};
|
||||
});
|
||||
};
|
||||
|
||||
/* 5️⃣ remove one impact row (local only – diff happens on save) */
|
||||
const removeInlineImpact = (mid, idx) => {
|
||||
setNewMilestoneMap(prev => {
|
||||
const m = prev[mid];
|
||||
if (!m) return prev;
|
||||
const clone = [...m.impacts];
|
||||
clone.splice(idx, 1);
|
||||
return { ...prev, [mid]: { ...m, impacts: clone } };
|
||||
const removeImpactRow = (mid,idx)=>
|
||||
setDraft(p=>{
|
||||
const d=p[mid]; if(!d) return p;
|
||||
const c=[...d.impacts]; c.splice(idx,1);
|
||||
return {...p,[mid]:{...d,impacts:c}};
|
||||
});
|
||||
};
|
||||
|
||||
/* 6️⃣ persist the edits – PUT milestone, diff impacts */
|
||||
const saveInlineMilestone = async (m) => {
|
||||
const data = newMilestoneMap[m.id];
|
||||
if (!data) return;
|
||||
/* --------------------------------------------------------- *
|
||||
* Persist edits (UPDATE / create / delete diff)
|
||||
* --------------------------------------------------------- */
|
||||
async function saveMilestone(m){
|
||||
if(isSavingEdit) return; // guard
|
||||
const d = draft[m.id]; if(!d) return;
|
||||
setIsSavingEdit(true);
|
||||
|
||||
/* --- update the milestone header --- */
|
||||
/* header */
|
||||
const payload = {
|
||||
milestone_type:'Financial',
|
||||
title : data.title,
|
||||
description : data.description,
|
||||
date : toSqlDate(data.date),
|
||||
career_profile_id : careerProfileId,
|
||||
progress : data.progress,
|
||||
status : data.progress >= 100 ? 'completed' : 'planned',
|
||||
new_salary : data.newSalary ? parseFloat(data.newSalary) : null,
|
||||
is_universal : data.isUniversal || 0
|
||||
title:d.title, description:d.description, date:toSqlDate(d.date),
|
||||
career_profile_id:careerProfileId, progress:d.progress,
|
||||
status:d.progress>=100?'completed':'planned',
|
||||
new_salary:d.newSalary?parseFloat(d.newSalary):null,
|
||||
is_universal:d.isUniversal
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await authFetch(`/api/premium/milestones/${m.id}`,{
|
||||
method : 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body : JSON.stringify(payload)
|
||||
method:'PUT', headers:{'Content-Type':'application/json'}, body:JSON.stringify(payload)
|
||||
});
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
if(!res.ok){ alert('Save failed'); return;}
|
||||
const saved = await res.json();
|
||||
|
||||
/* --- figure out what changed ---------------------------------- */
|
||||
/* impacts diff */
|
||||
const originalIds = originalImpactIdsMap[m.id]||[];
|
||||
const currentIds = (data.impacts || []).map(i => i.id).filter(Boolean);
|
||||
const toDelete = originalIds.filter(id => !currentIds.includes(id));
|
||||
|
||||
/* --- deletions first --- */
|
||||
for (const delId of toDelete) {
|
||||
await authFetch(`/api/premium/milestone-impacts/${delId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
const currentIds = d.impacts.map(i=>i.id).filter(Boolean);
|
||||
/* deletions */
|
||||
for(const id of originalIds.filter(x=>!currentIds.includes(x))){
|
||||
await authFetch(`/api/premium/milestone-impacts/${id}`,{method:'DELETE'});
|
||||
}
|
||||
|
||||
/* --- creates / updates --- */
|
||||
for (const imp of data.impacts) {
|
||||
const impPayload = {
|
||||
/* upserts */
|
||||
for(const imp of d.impacts){
|
||||
const body = {
|
||||
milestone_id:saved.id,
|
||||
impact_type:imp.impact_type,
|
||||
direction : imp.impact_type === "salary" ? "add" : imp.direction,
|
||||
direction:imp.impact_type==='salary'?'add':imp.direction,
|
||||
amount:parseFloat(imp.amount)||0,
|
||||
start_date : toSqlDate(imp.start_date) || null,
|
||||
end_date : toSqlDate(imp.end_date) || null
|
||||
start_date:imp.start_date||null,
|
||||
end_date:imp.end_date||null
|
||||
};
|
||||
|
||||
if(imp.id){
|
||||
await authFetch(`/api/premium/milestone-impacts/${imp.id}`,{
|
||||
method : 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body : JSON.stringify(impPayload)
|
||||
});
|
||||
method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
|
||||
}else{
|
||||
await authFetch('/api/premium/milestone-impacts',{
|
||||
method : 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body : JSON.stringify(impPayload)
|
||||
});
|
||||
method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
|
||||
}
|
||||
}
|
||||
|
||||
/* --- refresh + close --- */
|
||||
await fetchMilestones();
|
||||
setEditingMilestoneId(null);
|
||||
|
||||
} catch (err) {
|
||||
alert('Failed to save milestone');
|
||||
console.error(err);
|
||||
setEditingId(null);
|
||||
setIsSavingEdit(false);
|
||||
onClose(true);
|
||||
}
|
||||
};
|
||||
|
||||
/* ───────────── misc helpers the JSX still calls ───────────── */
|
||||
|
||||
/* A) delete one milestone row altogether */
|
||||
const deleteMilestone = async (milestone) => {
|
||||
if (!window.confirm(`Delete “${milestone.title}” ?`)) return;
|
||||
try {
|
||||
const res = await authFetch(
|
||||
`/api/premium/milestones/${milestone.id}`,
|
||||
{ method: 'DELETE' }
|
||||
);
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
await fetchMilestones(); // refresh parent list
|
||||
onClose(true); // bubble up that something changed
|
||||
} catch (err) {
|
||||
alert('Failed to delete milestone');
|
||||
console.error(err);
|
||||
async function deleteMilestone(m){
|
||||
if(!window.confirm(`Delete “${m.title}”?`)) return;
|
||||
await authFetch(`/api/premium/milestones/${m.id}`,{method:'DELETE'});
|
||||
await fetchMilestones();
|
||||
onClose(true);
|
||||
}
|
||||
};
|
||||
|
||||
/* B) add a blank impact row while creating a brand-new milestone */
|
||||
const addNewImpactToNewMilestone = () => {
|
||||
setNewMilestoneData(prev => ({
|
||||
...prev,
|
||||
impacts: [
|
||||
...prev.impacts,
|
||||
{
|
||||
impact_type : 'ONE_TIME',
|
||||
direction : 'subtract',
|
||||
amount : 0,
|
||||
start_date : '',
|
||||
end_date : ''
|
||||
}
|
||||
]
|
||||
/* --------------------------------------------------------- *
|
||||
* New‑milestone helpers (create flow)
|
||||
* --------------------------------------------------------- */
|
||||
const addBlankImpactToNew = ()=> setNewMilestone(n=>({
|
||||
...n, impacts:[...n.impacts,{impact_type:'ONE_TIME',direction:'subtract',amount:0,start_date:'',end_date:''}]
|
||||
}));
|
||||
};
|
||||
|
||||
/* C) create an entirely new milestone + its impacts */
|
||||
const saveNewMilestone = async () => {
|
||||
if (!newMilestoneData.title.trim() || !newMilestoneData.date.trim()) {
|
||||
alert('Need title and date'); return;
|
||||
}
|
||||
|
||||
const payload = {
|
||||
title : newMilestoneData.title,
|
||||
description : newMilestoneData.description,
|
||||
date : toSqlDate(newMilestoneData.date),
|
||||
career_profile_id: careerProfileId,
|
||||
progress : newMilestoneData.progress,
|
||||
status : newMilestoneData.progress >= 100 ? 'completed' : 'planned',
|
||||
is_universal : newMilestoneData.isUniversal || 0
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await authFetch('/api/premium/milestone', {
|
||||
method : 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body : JSON.stringify(payload)
|
||||
const updateNewImpact = (idx,field,val)=> setNewMilestone(n=>{
|
||||
const c=[...n.impacts]; c[idx]={...c[idx],[field]:val}; return {...n,impacts:c};
|
||||
});
|
||||
const removeNewImpact = (idx)=> setNewMilestone(n=>{
|
||||
const c=[...n.impacts]; c.splice(idx,1); return {...n,impacts:c};
|
||||
});
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
const created =
|
||||
Array.isArray(await res.json()) ? (await res.json())[0] : await res.json();
|
||||
|
||||
/* impacts for the new milestone */
|
||||
for (const imp of newMilestoneData.impacts) {
|
||||
const impPayload = {
|
||||
milestone_id : created.id,
|
||||
impact_type : imp.impact_type,
|
||||
direction : imp.impact_type === "salary" ? "add" : imp.direction,
|
||||
amount : parseFloat(imp.amount) || 0,
|
||||
start_date : toSqlDate(imp.start_date) || null,
|
||||
end_date : toSqlDate(imp.end_date) || null
|
||||
async function saveNew(){
|
||||
if(isSavingNew) return;
|
||||
if(!newMilestone.title.trim()||!newMilestone.date.trim()){
|
||||
alert('Need title & date'); return;
|
||||
}
|
||||
setIsSavingNew(true);
|
||||
const hdr = { title:newMilestone.title, description:newMilestone.description,
|
||||
date:toSqlDate(newMilestone.date), career_profile_id:careerProfileId,
|
||||
progress:newMilestone.progress, status:newMilestone.progress>=100?'completed':'planned',
|
||||
is_universal:newMilestone.isUniversal };
|
||||
const res = await authFetch('/api/premium/milestone',{method:'POST',
|
||||
headers:{'Content-Type':'application/json'},body:JSON.stringify(hdr)});
|
||||
const created = Array.isArray(await res.json())? (await res.json())[0]:await res.json();
|
||||
for(const imp of newMilestone.impacts){
|
||||
const body = {
|
||||
milestone_id:created.id, impact_type:imp.impact_type,
|
||||
direction:imp.impact_type==='salary'?'add':imp.direction,
|
||||
amount:parseFloat(imp.amount)||0, start_date:imp.start_date||null, end_date:imp.end_date||null
|
||||
};
|
||||
await authFetch('/api/premium/milestone-impacts',{
|
||||
method : 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body : JSON.stringify(impPayload)
|
||||
});
|
||||
method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
|
||||
}
|
||||
|
||||
await fetchMilestones(); // refresh list
|
||||
setAddingNewMilestone(false); // collapse the new-mile form
|
||||
await fetchMilestones();
|
||||
setAddingNew(false);
|
||||
onClose(true);
|
||||
} catch (err) {
|
||||
alert('Failed to save milestone');
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
/* ────────────────────────────────
|
||||
Render
|
||||
*/
|
||||
/* ══════════════════════════════════════════════════════════════ */
|
||||
/* RENDER */
|
||||
/* ══════════════════════════════════════════════════════════════ */
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
background: "rgba(0,0,0,0.4)",
|
||||
zIndex: 9999,
|
||||
display: "flex",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "center",
|
||||
overflowY: "auto"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: "#fff",
|
||||
width: "800px",
|
||||
padding: "1rem",
|
||||
margin: "2rem auto",
|
||||
borderRadius: "4px"
|
||||
}}
|
||||
>
|
||||
<h3>Edit Milestones</h3>
|
||||
|
||||
{milestones.map((m) => {
|
||||
const hasEditOpen = editingMilestoneId === m.id;
|
||||
const data = newMilestoneMap[m.id] || {};
|
||||
|
||||
return (
|
||||
<div key={m.id} style={{ border: "1px solid #ccc", padding: "0.5rem", marginBottom: "1rem" }}>
|
||||
<div style={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<h5 style={{ margin: 0 }}>{m.title}</h5>
|
||||
<Button onClick={() => handleEditMilestoneInline(m)}>
|
||||
{hasEditOpen ? "Cancel" : "Edit"}
|
||||
</Button>
|
||||
<Button
|
||||
style={{ marginLeft: "0.5rem", color: "black", backgroundColor: "red" }}
|
||||
onClick={() => deleteMilestone(m)}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
<p>{m.description}</p>
|
||||
<p>
|
||||
<strong>Date:</strong> {toSqlDate(m.date)}
|
||||
<div className="fixed inset-0 z-[9999] flex items-start justify-center overflow-y-auto bg-black/40">
|
||||
<div className="bg-white w-full max-w-3xl mx-4 my-10 rounded-md shadow-lg ring-1 ring-gray-300">
|
||||
{/* header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold">Milestones</h2>
|
||||
<p className="text-xs text-gray-500">
|
||||
Track important events and their financial impact on this scenario.
|
||||
</p>
|
||||
<p>Progress: {m.progress}%</p>
|
||||
</div>
|
||||
<Button variant="ghost" onClick={() => onClose(false)}>✕</Button>
|
||||
</div>
|
||||
|
||||
{/* inline form */}
|
||||
{hasEditOpen && (
|
||||
<div style={{ border: "1px solid #aaa", marginTop: "1rem", padding: "0.5rem" }}>
|
||||
{/* body */}
|
||||
<div className="p-6 space-y-6 max-h-[70vh] overflow-y-auto">
|
||||
{/* EXISTING */}
|
||||
{milestones.map(m=>{
|
||||
const open = editingId===m.id;
|
||||
const d = draft[m.id]||{};
|
||||
return (
|
||||
<div key={m.id} className="border rounded-md">
|
||||
{/* accordion header */}
|
||||
<button
|
||||
className="w-full flex justify-between items-center px-4 py-2 bg-gray-50 hover:bg-gray-100 text-left"
|
||||
onClick={()=>handleAccordionClick(m)}>
|
||||
<span className="font-medium">{m.title}</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
{toSqlDate(m.date)} ▸ {open?'Hide':'Edit'}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="px-4 py-4 grid gap-4 bg-white">
|
||||
{/* ------------- fields */}
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-medium flex items-center gap-1">
|
||||
Title <InfoTooltip message="Short, action‑oriented label (max 60 chars)." />
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Title"
|
||||
value={data.title}
|
||||
style={{ display: "block", marginBottom: "0.5rem" }}
|
||||
onChange={(e) =>
|
||||
setNewMilestoneMap((p) => ({
|
||||
...p,
|
||||
[m.id]: { ...p[m.id], title: e.target.value }
|
||||
}))
|
||||
}
|
||||
className="input"
|
||||
value={d.title||''}
|
||||
onChange={e=>setDraft(p=>({...p,[m.id]:{...p[m.id],title:e.target.value}}))}
|
||||
/>
|
||||
<textarea
|
||||
placeholder="Description"
|
||||
value={data.description}
|
||||
style={{ display: "block", width: "100%", marginBottom: "0.5rem" }}
|
||||
onChange={(e) =>
|
||||
setNewMilestoneMap((p) => ({
|
||||
...p,
|
||||
[m.id]: { ...p[m.id], description: e.target.value }
|
||||
}))
|
||||
}
|
||||
/>
|
||||
<label>Date:</label>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm font-medium">Date</label>
|
||||
<input
|
||||
type="date"
|
||||
value={data.date || ""}
|
||||
style={{ display: "block", marginBottom: "0.5rem" }}
|
||||
onChange={(e) =>
|
||||
setNewMilestoneMap((p) => ({
|
||||
...p,
|
||||
[m.id]: { ...p[m.id], date: e.target.value }
|
||||
}))
|
||||
}
|
||||
className="input"
|
||||
value={d.date||''}
|
||||
onChange={e=>setDraft(p=>({...p,[m.id]:{...p[m.id],date:e.target.value}}))}
|
||||
/>
|
||||
</div>
|
||||
<div className="md:col-span-2 space-y-1">
|
||||
<label className="text-sm font-medium flex items-center gap-1">
|
||||
Description <InfoTooltip message="1‑2 sentences on what success looks like."/>
|
||||
</label>
|
||||
<textarea
|
||||
rows={2}
|
||||
className="input resize-none"
|
||||
value={d.description||''}
|
||||
onChange={e=>setDraft(p=>({...p,[m.id]:{...p[m.id],description:e.target.value}}))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* impacts */}
|
||||
<div style={{ border: "1px solid #ccc", padding: "0.5rem", marginBottom: "0.5rem" }}>
|
||||
<h6>Financial Impacts</h6>
|
||||
{data.impacts?.map((imp, idx) => (
|
||||
<div key={idx} style={{ border: "1px solid #bbb", margin: "0.5rem 0", padding: "0.3rem" }}>
|
||||
<label>Type:</label>
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="font-medium text-sm">Financial impacts</h4>
|
||||
<Button size="xs" onClick={()=>addImpactRow(m.id)}>+ Add impact</Button>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mb-2">
|
||||
Use <em>salary</em> for annual income changes; <em>monthly</em> for recurring amounts.
|
||||
</p>
|
||||
|
||||
<div className="space-y-3">
|
||||
{d.impacts?.map((imp,idx)=>(
|
||||
<div key={idx} className="grid gap-2 md:grid-cols-[150px_120px_1fr_auto] items-end">
|
||||
{/* type */}
|
||||
<div>
|
||||
<label className="label-xs">Type</label>
|
||||
<select
|
||||
className="input"
|
||||
value={imp.impact_type}
|
||||
onChange={(e) => updateInlineImpact(m.id, idx, "impact_type", e.target.value)}
|
||||
>
|
||||
onChange={e=>updateImpact(m.id,idx,'impact_type',e.target.value)}>
|
||||
<option value="salary">Salary (annual)</option>
|
||||
<option value="ONE_TIME">One-Time</option>
|
||||
<option value="ONE_TIME">One‑time</option>
|
||||
<option value="MONTHLY">Monthly</option>
|
||||
</select>
|
||||
<label>Direction:</label>
|
||||
{imp.impact_type !== "salary" && (
|
||||
</div>
|
||||
{/* direction – hide for salary */}
|
||||
{imp.impact_type!=='salary' && (
|
||||
<div>
|
||||
<label className="label-xs">Direction</label>
|
||||
<select
|
||||
className="input"
|
||||
value={imp.direction}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
setNewMilestoneData((prev) => {
|
||||
const copy = [...prev.impacts];
|
||||
copy[idx] = { ...copy[idx], direction: val };
|
||||
return { ...prev, impacts: copy };
|
||||
});
|
||||
}}
|
||||
>
|
||||
onChange={e=>updateImpact(m.id,idx,'direction',e.target.value)}>
|
||||
<option value="add">Add</option>
|
||||
<option value="subtract">Subtract</option>
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<label>Amount:</label>
|
||||
{/* amount */}
|
||||
<div>
|
||||
<label className="label-xs">Amount</label>
|
||||
<input
|
||||
type="number"
|
||||
className="input"
|
||||
value={imp.amount}
|
||||
onChange={(e) => updateInlineImpact(m.id, idx, "amount", e.target.value)}
|
||||
onChange={e=>updateImpact(m.id,idx,'amount',e.target.value)}
|
||||
/>
|
||||
<label>Start:</label>
|
||||
</div>
|
||||
{/* dates */}
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<label className="label-xs">Start</label>
|
||||
<input
|
||||
type="date"
|
||||
value={imp.start_date || ""}
|
||||
onChange={(e) => updateInlineImpact(m.id, idx, "start_date", e.target.value)}
|
||||
className="input"
|
||||
value={imp.start_date}
|
||||
onChange={e=>updateImpact(m.id,idx,'start_date',e.target.value)}
|
||||
/>
|
||||
{imp.impact_type === "MONTHLY" && (
|
||||
<>
|
||||
<label>End:</label>
|
||||
</div>
|
||||
{imp.impact_type==='MONTHLY' && (
|
||||
<div>
|
||||
<label className="label-xs">End</label>
|
||||
<input
|
||||
type="date"
|
||||
value={imp.end_date || ""}
|
||||
onChange={(e) => updateInlineImpact(m.id, idx, "end_date", e.target.value)}
|
||||
className="input"
|
||||
value={imp.end_date}
|
||||
onChange={e=>updateImpact(m.id,idx,'end_date',e.target.value)}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
<Button onClick={() => removeInlineImpact(m.id, idx)} style={{ marginLeft: "0.5rem", color: "red" }}>
|
||||
Remove
|
||||
</div>
|
||||
{/* remove */}
|
||||
<Button
|
||||
size="icon-xs"
|
||||
variant="ghost"
|
||||
className="text-red-600"
|
||||
onClick={()=>removeImpactRow(m.id,idx)}
|
||||
>
|
||||
✕
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Button onClick={() => addInlineImpact(m.id)}>+ Financial Impact</Button>
|
||||
</div>
|
||||
<Button onClick={() => saveInlineMilestone(m)}>Save</Button>
|
||||
</div>
|
||||
|
||||
{/* footer buttons */}
|
||||
<div className="flex justify-between pt-4 border-t">
|
||||
<div className="space-x-2">
|
||||
<Button variant="destructive" onClick={()=>deleteMilestone(m)}>
|
||||
Delete milestone
|
||||
</Button>
|
||||
<Button variant="secondary" onClick={()=>setMilestoneCopyWizard(m)}>
|
||||
Copy to other scenarios
|
||||
</Button>
|
||||
</div>
|
||||
<Button disabled={isSavingEdit} onClick={()=>saveMilestone(m)}>
|
||||
{isSavingEdit ? 'Saving…' : 'Save'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* add‑new toggle */}
|
||||
<Button onClick={() => setAddingNewMilestone((p) => !p)}>
|
||||
{addingNewMilestone ? "Cancel New Milestone" : "Add Milestone"}
|
||||
</Button>
|
||||
{/* NEW milestone accordion */}
|
||||
<details className="border rounded-md" open={addingNew}>
|
||||
<summary
|
||||
className="cursor-pointer px-4 py-2 bg-gray-50 hover:bg-gray-100 text-sm font-medium flex justify-between items-center"
|
||||
onClick={(e)=>{e.preventDefault();setAddingNew(p=>!p);}}
|
||||
>
|
||||
Add new milestone
|
||||
<span>{addingNew?'–':'+'}</span>
|
||||
</summary>
|
||||
|
||||
{addingNewMilestone && (
|
||||
<div style={{ border: "1px solid #aaa", padding: "0.5rem", marginTop: "0.5rem" }}>
|
||||
{addingNew && (
|
||||
<div className="px-4 py-4 space-y-4 bg-white">
|
||||
{/* fields */}
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="space-y-1">
|
||||
<label className="label-xs">Title</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Title"
|
||||
value={newMilestoneData.title}
|
||||
style={{ display: "block", marginBottom: "0.5rem" }}
|
||||
onChange={(e) => setNewMilestoneData((p) => ({ ...p, title: e.target.value }))}
|
||||
className="input"
|
||||
value={newMilestone.title}
|
||||
onChange={e=>setNewMilestone(n=>({...n,title:e.target.value}))}
|
||||
/>
|
||||
<textarea
|
||||
placeholder="Description"
|
||||
value={newMilestoneData.description}
|
||||
style={{ display: "block", width: "100%", marginBottom: "0.5rem" }}
|
||||
onChange={(e) => setNewMilestoneData((p) => ({ ...p, description: e.target.value }))}
|
||||
/>
|
||||
<label>Date:</label>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="label-xs">Date</label>
|
||||
<input
|
||||
type="date"
|
||||
value={newMilestoneData.date || ""}
|
||||
style={{ display: "block", marginBottom: "0.5rem" }}
|
||||
onChange={(e) => setNewMilestoneData((p) => ({ ...p, date: e.target.value }))}
|
||||
className="input"
|
||||
value={newMilestone.date}
|
||||
onChange={e=>setNewMilestone(n=>({...n,date:e.target.value}))}
|
||||
/>
|
||||
<div style={{ border: "1px solid #ccc", padding: "0.5rem", marginBottom: "0.5rem" }}>
|
||||
<h6>Impacts</h6>
|
||||
{newMilestoneData.impacts.map((imp, idx) => (
|
||||
<div key={idx} style={{ border: "1px solid #bbb", margin: "0.5rem 0", padding: "0.3rem" }}>
|
||||
{/* Direction – show only when NOT salary */}
|
||||
{imp.impact_type !== "salary" && (
|
||||
<>
|
||||
<label>Add or Subtract?</label>
|
||||
</div>
|
||||
<div className="md:col-span-2 space-y-1">
|
||||
<label className="label-xs">Description</label>
|
||||
<textarea
|
||||
rows={2}
|
||||
className="input resize-none"
|
||||
value={newMilestone.description}
|
||||
onChange={e=>setNewMilestone(n=>({...n,description:e.target.value}))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* impacts */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between">
|
||||
<h4 className="font-medium text-sm">Financial impacts</h4>
|
||||
<Button size="xs" onClick={addBlankImpactToNew}>+ Add impact</Button>
|
||||
</div>
|
||||
<div className="space-y-3 mt-2">
|
||||
{newMilestone.impacts.map((imp,idx)=>(
|
||||
<div key={idx} className="grid md:grid-cols-[150px_120px_1fr_auto] gap-2 items-end">
|
||||
<div>
|
||||
<label className="label-xs">Type</label>
|
||||
<select
|
||||
className="input"
|
||||
value={imp.impact_type}
|
||||
onChange={e=>updateNewImpact(idx,'impact_type',e.target.value)}>
|
||||
<option value="salary">Salary (annual)</option>
|
||||
<option value="ONE_TIME">One‑time</option>
|
||||
<option value="MONTHLY">Monthly</option>
|
||||
</select>
|
||||
</div>
|
||||
{imp.impact_type!=='salary' && (
|
||||
<div>
|
||||
<label className="label-xs">Direction</label>
|
||||
<select
|
||||
className="input"
|
||||
value={imp.direction}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
setNewMilestoneData((prev) => {
|
||||
const copy = [...prev.impacts];
|
||||
copy[idx] = { ...copy[idx], direction: val };
|
||||
return { ...prev, impacts: copy };
|
||||
});
|
||||
}}
|
||||
>
|
||||
onChange={e=>updateNewImpact(idx,'direction',e.target.value)}>
|
||||
<option value="add">Add</option>
|
||||
<option value="subtract">Subtract</option>
|
||||
</select>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
<label>Amount:</label>
|
||||
<div>
|
||||
<label className="label-xs">Amount</label>
|
||||
<input
|
||||
type="number"
|
||||
className="input"
|
||||
value={imp.amount}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
setNewMilestoneData((prev) => {
|
||||
const copy = [...prev.impacts];
|
||||
copy[idx] = { ...copy[idx], amount: val };
|
||||
return { ...prev, impacts: copy };
|
||||
});
|
||||
}}
|
||||
onChange={e=>updateNewImpact(idx,'amount',e.target.value)}
|
||||
/>
|
||||
<label>Start:</label>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<input
|
||||
type="date"
|
||||
value={imp.start_date || ""}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
setNewMilestoneData((prev) => {
|
||||
const copy = [...prev.impacts];
|
||||
copy[idx] = { ...copy[idx], start_date: val };
|
||||
return { ...prev, impacts: copy };
|
||||
});
|
||||
}}
|
||||
className="input"
|
||||
value={imp.start_date}
|
||||
onChange={e=>updateNewImpact(idx,'start_date',e.target.value)}
|
||||
/>
|
||||
{imp.impact_type === "MONTHLY" && (
|
||||
<>
|
||||
<label>End:</label>
|
||||
{imp.impact_type==='MONTHLY' && (
|
||||
<input
|
||||
type="date"
|
||||
value={imp.end_date || ""}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
setNewMilestoneData((prev) => {
|
||||
const copy = [...prev.impacts];
|
||||
copy[idx] = { ...copy[idx], end_date: val };
|
||||
return { ...prev, impacts: copy };
|
||||
});
|
||||
}}
|
||||
className="input"
|
||||
value={imp.end_date}
|
||||
onChange={e=>updateNewImpact(idx,'end_date',e.target.value)}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setNewMilestoneData((prev) => {
|
||||
const cpy = [...prev.impacts];
|
||||
cpy.splice(idx, 1);
|
||||
return { ...prev, impacts: cpy };
|
||||
});
|
||||
}}
|
||||
style={{ color: "red", marginLeft: "0.5rem" }}
|
||||
size="icon-xs"
|
||||
variant="ghost"
|
||||
className="text-red-600"
|
||||
onClick={()=>removeNewImpact(idx)}
|
||||
>
|
||||
Remove
|
||||
✕
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Button onClick={addNewImpactToNewMilestone}>+ Financial Impact</Button>
|
||||
</div>
|
||||
<Button onClick={saveNewMilestone}>Add Milestone</Button>
|
||||
</div>
|
||||
{/* save row */}
|
||||
<div className="flex justify-end border-t pt-4">
|
||||
<Button disabled={isSavingNew} onClick={saveNew}>
|
||||
{isSavingNew ? 'Saving…' : 'Save milestone'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</details>
|
||||
</div>
|
||||
|
||||
{/* Copy Wizard */}
|
||||
{copyWizardMilestone && (
|
||||
{/* footer */}
|
||||
<div className="px-6 py-4 border-t text-right">
|
||||
<Button variant="secondary" onClick={()=>onClose(false)}>Close</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* COPY wizard */}
|
||||
{MilestoneCopyWizard && (
|
||||
<MilestoneCopyWizard
|
||||
milestone={copyWizardMilestone}
|
||||
onClose={(didCopy) => {
|
||||
setCopyWizardMilestone(null);
|
||||
if (didCopy) fetchMilestones();
|
||||
}}
|
||||
milestone={MilestoneCopyWizard}
|
||||
onClose={(didCopy)=>{setMilestoneCopyWizard(null); if(didCopy) fetchMilestones();}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div style={{ marginTop: "1rem", textAlign: "right" }}>
|
||||
<Button onClick={() => onClose(false)}>Close</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* -------------- tiny utility styles (or swap for Tailwind) ---- */
|
||||
const inputBase = 'border rounded-md w-full px-2 py-1 text-sm';
|
||||
const labelBase = 'block text-xs font-medium text-gray-600';
|
||||
export const input = inputBase; // export so you can reuse
|
||||
export const label = labelBase;
|
||||
|
||||
@ -461,15 +461,17 @@ milestoneImpacts.forEach((rawImpact) => {
|
||||
if (!isActiveThisMonth) return; // skip to next impact
|
||||
|
||||
/* ---------- 3. Apply the impact ---------- */
|
||||
const sign = direction === 'add' ? 1 : -1;
|
||||
|
||||
if (type.startsWith('SALARY')) {
|
||||
// SALARY = already-monthly | SALARY_ANNUAL = annual → divide by 12
|
||||
// ─── salary changes affect GROSS income ───
|
||||
const monthlyDelta = type.endsWith('ANNUAL') ? amount / 12 : amount;
|
||||
salaryAdjustThisMonth += sign * monthlyDelta;
|
||||
const salarySign = direction === 'add' ? 1 : -1; // unchanged
|
||||
salaryAdjustThisMonth += salarySign * monthlyDelta;
|
||||
} else {
|
||||
// MONTHLY or ONE_TIME expenses / windfalls
|
||||
extraImpactsThisMonth += sign * amount;
|
||||
// ─── everything else is an expense or windfall ───
|
||||
// “Add” ⇒ money coming *in* ⇒ LOWER expenses
|
||||
// “Subtract” ⇒ money going *out* ⇒ HIGHER expenses
|
||||
const expenseSign = direction === 'add' ? -1 : 1;
|
||||
extraImpactsThisMonth += expenseSign * amount;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
BIN
user_profile.db
BIN
user_profile.db
Binary file not shown.
Loading…
Reference in New Issue
Block a user