/* global React, Icons, Button, Card, SectionTitle, Badge, Input, Checkbox, Avatar, Logo, cn,
useState, useRef, ProgressBar, Ring, EmptyState, Switch, EnergyModal,
useT */
/* ============================================================
PAGE 4 — HOME (/home)
============================================================ */
/* Shared energy scale — used by quick header picker, EnergyModal, AI
suggestions, and the day-curve check-ins. Source of truth for level →
emoji/color/label across the app. Do not redefine elsewhere. */
const ENERGY_SCALE = [
{ n: 1, emoji: "😴", c: "0 84% 60%", label: "Exhausted" },
{ n: 2, emoji: "😕", c: "20 90% 55%", label: "Low" },
{ n: 3, emoji: "😐", c: "50 90% 55%", label: "Medium" },
{ n: 4, emoji: "😄", c: "142 70% 50%", label: "Good" },
{ n: 5, emoji: "🔥", c: "263 70% 60%", label: "High" },
];
const ENERGY_BY_N = Object.fromEntries(ENERGY_SCALE.map(e => [e.n, e]));
if (typeof window !== "undefined") {
window.ENERGY_SCALE = ENERGY_SCALE;
window.ENERGY_BY_N = ENERGY_BY_N;
}
/* Day check-ins — { time: "HH:MM", level: 1..5 }. In a real app this is
persisted; the mockup keeps a few realistic samples + lets the user add. */
const DEFAULT_CHECKINS = [
{ id: "c1", time: "07:30", level: 3 },
{ id: "c2", time: "09:45", level: 5 },
{ id: "c3", time: "13:00", level: 2 },
{ id: "c4", time: "14:32", level: 4 },
];
if (typeof window !== "undefined" && !window.__dpmCheckIns) {
window.__dpmCheckIns = DEFAULT_CHECKINS;
}
const CHECKINS_EVT = "dpm-energy-checkins-change";
function useEnergyCheckIns() {
const [list, setList] = useState(
typeof window !== "undefined" ? window.__dpmCheckIns : DEFAULT_CHECKINS
);
useEffect(() => {
const onChange = (e) => setList([...e.detail]);
window.addEventListener(CHECKINS_EVT, onChange);
return () => window.removeEventListener(CHECKINS_EVT, onChange);
}, []);
const addCheckIn = (level) => {
const now = new Date();
const hh = String(now.getHours()).padStart(2, "0");
const mm = String(now.getMinutes()).padStart(2, "0");
const next = [...window.__dpmCheckIns, { id: "c" + Date.now(), time: `${hh}:${mm}`, level }];
window.__dpmCheckIns = next;
window.dispatchEvent(new CustomEvent(CHECKINS_EVT, { detail: next }));
};
return [list, addCheckIn];
}
if (typeof window !== "undefined") window.useEnergyCheckIns = useEnergyCheckIns;
/* Sleep log — one entry per night: { date, bedtime, wake, qualityLevel (1-5),
source: "manual" | "health" }. Duration is derived in minutes. */
const DEFAULT_SLEEP = [
{ date: "lun", bedtime: "23:45", wake: "07:00", qualityLevel: 4, source: "manual" },
{ date: "mar", bedtime: "23:30", wake: "06:45", qualityLevel: 4, source: "manual" },
{ date: "mer", bedtime: "00:50", wake: "06:40", qualityLevel: 2, source: "manual" }, // mauvaise nuit, prouve le moat
{ date: "jeu", bedtime: "23:15", wake: "06:50", qualityLevel: 4, source: "manual" },
{ date: "ven", bedtime: "00:20", wake: "07:15", qualityLevel: 3, source: "manual" },
{ date: "sam", bedtime: "01:10", wake: "08:30", qualityLevel: 5, source: "manual" },
{ date: "dim", bedtime: "23:30", wake: "06:45", qualityLevel: 4, source: "health" },
];
if (typeof window !== "undefined" && !window.__dpmSleep) {
window.__dpmSleep = { entries: DEFAULT_SLEEP, todayLogged: false };
}
const SLEEP_EVT = "dpm-sleep-change";
function useSleepLog() {
const [state, setState] = useState(window.__dpmSleep);
useEffect(() => {
const h = (e) => setState({ ...e.detail });
window.addEventListener(SLEEP_EVT, h);
return () => window.removeEventListener(SLEEP_EVT, h);
}, []);
const setTodayLogged = (v) => {
window.__dpmSleep = { ...window.__dpmSleep, todayLogged: v };
window.dispatchEvent(new CustomEvent(SLEEP_EVT, { detail: window.__dpmSleep }));
};
return [state, setTodayLogged];
}
if (typeof window !== "undefined") window.useSleepLog = useSleepLog;
/* ============================================================
HOME WIDGETS — modular like the dashboard; togglable via the
same "Personnaliser" panel (reused from pages-tracking.jsx).
IDs are stable and stored in localStorage("dpm-home-widgets-v1").
============================================================ */
const HOME_WIDGETS = [
{ id: "workload", label: "Daily workload", group: "Overview", desc: "Stacked bar — tasks / meetings / focus" },
{ id: "sleep-prompt", label: "Morning sleep check-in", group: "Overview", desc: "Nightly check-in — bedtime / wake-up / quality" },
{ id: "energy-mini", label: "Energy of the day", group: "Overview", desc: "Sparkline + summary + link to analytics" },
{ id: "health", label: "Health & sleep", group: "Overview", desc: "Vitals, sleep & chronotype carousel with day/week/month selector" },
{ id: "current-task", label: "Current task", group: "Action", desc: "Banner of the active task with progress" },
{ id: "overview", label: "Day overview", group: "Action", desc: "4 key figures: tasks, meetings, focus, habits" },
{ id: "quick-actions",label: "Quick actions", group: "Action", desc: "5 shortcuts: Task, Calendar, Focus, Habits, Stats" },
{ id: "assistant", label: "AI assistant", group: "Advice", desc: "Contextual advice + sourced suggestions" },
{ id: "upcoming", label: "Upcoming", group: "Side", desc: "The day's next events" },
{ id: "tasks-today", label: "Today's tasks", group: "Side", desc: "Checkable list of tasks scheduled today" },
];
if (typeof window !== "undefined") window.HOME_WIDGETS = HOME_WIDGETS;
const HOME_STORAGE_KEY = "dpm-home-widgets-v1";
/* Duration in min between bedtime "HH:MM" and wake "HH:MM" (wraps midnight). */
function sleepDurationMin(bedtime, wake) {
const [bh, bm] = bedtime.split(":").map(Number);
const [wh, wm] = wake.split(":").map(Number);
const bedMin = bh * 60 + bm;
const wakeMin = wh * 60 + wm;
let dur = wakeMin - bedMin;
if (dur <= 0) dur += 24 * 60;
return dur;
}
function fmtDur(min) {
const h = Math.floor(min / 60);
const m = min % 60;
return `${h}h${String(m).padStart(2, "0")}`;
}
/* ============================================================
WORKLOAD WIDGET — editable hours of availability + breakdown.
The user can change "heures disponibles" (capacity) inline; the
breakdown bar updates automatically.
============================================================ */
function WorkloadWidget() {
// Persisted "available hours" — defaults to 8h. Stored in localStorage so
// it survives reloads (mockup uses a separate key from the widget config).
const [hoursStr, setHoursStr] = useState(() => {
try { return localStorage.getItem("dpm-workload-hours") || "8"; } catch { return "8"; }
});
const hours = Math.max(1, Math.min(24, parseFloat(hoursStr) || 8));
const [bump, setBump] = useState(false); // tiny pulse on change — delightful feedback
useEffect(() => {
try { localStorage.setItem("dpm-workload-hours", String(hours)); } catch {}
}, [hours]);
const setHours = (n, snap = true) => {
let v = snap ? Math.round(n * 2) / 2 : Math.round(n * 60) / 60; // snap=0.5h for steppers, exact minutes when typing
v = Math.max(1, Math.min(24, v));
setHoursStr(String(v));
setBump(true);
setTimeout(() => setBump(false), 180);
};
const fmtHours = (h) => {
const hh = Math.floor(h);
const mm = Math.round((h - hh) * 60);
return mm === 0 ? `${hh}h` : `${hh}h${String(mm).padStart(2, "0")}`;
};
// Inline typing of the availability — double-click the number to edit.
const [editing, setEditing] = useState(false);
const parseHoursInput = (str) => {
const s = String(str).trim().toLowerCase();
let m;
if ((m = s.match(/^(\d+(?:[.,]\d+)?)\s*h\s*(\d+)$/))) return parseFloat(m[1].replace(",", ".")) + parseInt(m[2], 10) / 60;
if ((m = s.match(/^(\d+(?:[.,]\d+)?)\s*h?$/))) return parseFloat(m[1].replace(",", "."));
return NaN;
};
const commitEdit = (val) => {
const n = parseHoursInput(val);
if (Number.isFinite(n)) setHours(n, false);
setEditing(false);
};
// Mock planned breakdown (mins)
const tasksMin = 105;
const meetingsMin = 85;
const focusMin = 50;
const totalPlanned = tasksMin + meetingsMin + focusMin;
const totalCapacity = hours * 60;
const pctTasks = (tasksMin / totalCapacity) * 100;
const pctMeetings = (meetingsMin / totalCapacity) * 100;
const pctFocus = (focusMin / totalCapacity) * 100;
const fmt = (m) => `${Math.floor(m / 60)}h${String(m % 60).padStart(2, "0")}`;
return (
{fmt(totalPlanned)} planned
/
dispo
}>
Daily workload
);
}
function HomePage({ setRoute, emptyState, onOpenTask }) {
const isMobile = window.useIsMobile ? window.useIsMobile() : false;
const [profile] = (typeof useProfile === "function") ? useProfile() : [{}];
const greetLang = (typeof useLang === "function") ? useLang() : (window.__dpmLang || "en");
const greetName = (profile && profile.firstName || "").trim() || "Ralph";
const greet = window.DPMDate ? window.DPMDate.greeting(greetLang, greetName)
: (greetLang === "fr" ? "Bon après-midi, " : "Good afternoon, ") + greetName;
// Live clock — re-renders the date line each minute so it never freezes.
const [nowTick, setNowTick] = useState(() => Date.now());
useEffect(() => {
const id = setInterval(() => setNowTick(Date.now()), 30000);
return () => clearInterval(id);
}, []);
const dateLine = window.DPMDate
? `${window.DPMDate.time(undefined, greetLang)} · ${window.DPMDate.longDate(undefined, greetLang)}`
: "";
const [energy, setEnergy] = useState(4);
const [homeSpaceId] = useSpace();
const inHomeSpace = (e) => homeSpaceId === "all" || (window.__dpmItemInSpace ? window.__dpmItemInSpace(e, homeSpaceId) : true);
const [doneTasks, setDoneTasks] = useState(new Set([1, 4]));
const [energyModalLevel, setEnergyModalLevel] = useState(null);
const [checkIns, addCheckIn] = useEnergyCheckIns();
const [sleep, setTodaySleepLogged] = useSleepLog();
const [customizing, setCustomizing] = useState(false);
// Generic widget visibility hook lives in pages-tracking.jsx and is exposed
// on window. We reuse it here with HOME_WIDGETS to mirror the dashboard's
// "Personnaliser" panel without duplicating logic.
// Inline widget-visibility + order hook — kept local so HomePage doesn't
// depend on pages-tracking.jsx being parsed first (which would otherwise
// violate Rules of Hooks when window.useWidgetVisibility becomes available
// after first render).
const HOME_ALL_ON = useMemo(() => Object.fromEntries(HOME_WIDGETS.map(w => [w.id, true])), []);
const HOME_DEFAULT_ORDER = useMemo(() => HOME_WIDGETS.map(w => w.id), []);
const [homeVisible, setHomeVisible] = useState(() => {
try {
const saved = localStorage.getItem(HOME_STORAGE_KEY);
if (saved) {
const p = JSON.parse(saved);
return { ...HOME_ALL_ON, ...(p.visible || p) };
}
} catch (e) { /* ignore */ }
return HOME_ALL_ON;
});
const [homeOrder, setHomeOrder] = useState(() => {
try {
const saved = localStorage.getItem(HOME_STORAGE_KEY);
if (saved) {
const p = JSON.parse(saved);
if (Array.isArray(p.order)) {
const known = new Set(HOME_DEFAULT_ORDER);
const valid = p.order.filter(id => known.has(id));
for (const id of HOME_DEFAULT_ORDER) if (!valid.includes(id)) valid.push(id);
return valid;
}
}
} catch (e) { /* ignore */ }
return HOME_DEFAULT_ORDER;
});
useEffect(() => {
try { localStorage.setItem(HOME_STORAGE_KEY, JSON.stringify({ visible: homeVisible, order: homeOrder })); } catch (e) { /* ignore */ }
}, [homeVisible, homeOrder]);
const toggleHome = (id) => setHomeVisible(v => ({ ...v, [id]: !v[id] }));
const resetHome = () => { setHomeVisible(HOME_ALL_ON); setHomeOrder(HOME_DEFAULT_ORDER); };
const hideAllHome = () => setHomeVisible(Object.fromEntries(HOME_WIDGETS.map(w => [w.id, false])));
const homeReorder = (movedId, toId) => {
setHomeOrder(curr => {
const without = curr.filter(id => id !== movedId);
if (toId == null) return [...without, movedId];
const idx = without.indexOf(toId);
if (idx < 0) return [...without, movedId];
return [...without.slice(0, idx), movedId, ...without.slice(idx)];
});
};
const homeVisibleCount = HOME_WIDGETS.filter(w => homeVisible[w.id]).length;
const homeTotalCount = HOME_WIDGETS.length;
// Essentiel / Complet quick presets (P6). Essentiel = a curated focused subset.
const HOME_ESSENTIAL = ["workload", "current-task", "assistant", "tasks-today"];
const setHomeMode = (mode) => {
if (mode === "full") setHomeVisible(HOME_ALL_ON);
else setHomeVisible(Object.fromEntries(HOME_WIDGETS.map(w => [w.id, HOME_ESSENTIAL.includes(w.id)])));
};
const homeMode = HOME_WIDGETS.every(w => !!homeVisible[w.id]) ? "full"
: HOME_WIDGETS.every(w => !!homeVisible[w.id] === HOME_ESSENTIAL.includes(w.id)) ? "essential"
: "custom";
// Drag-and-drop in-place reorder on the page (Mechanism B from P11.7).
const [draggingWidget, setDraggingWidget] = useState(null);
const [overWidget, setOverWidget] = useState(null);
const onWidgetDragStart = (id) => (e) => {
setDraggingWidget(id);
e.dataTransfer.effectAllowed = "move";
try { e.dataTransfer.setData("text/plain", id); } catch {}
};
const onWidgetDragOver = (id) => (e) => {
if (!draggingWidget || draggingWidget === id) return;
e.preventDefault();
setOverWidget(id);
};
const onWidgetDrop = (id) => (e) => {
e.preventDefault();
if (draggingWidget && draggingWidget !== id) homeReorder(draggingWidget, id);
setDraggingWidget(null);
setOverWidget(null);
};
const onWidgetDragEnd = () => { setDraggingWidget(null); setOverWidget(null); };
const HW = (id, children) => {
const W = window.Widget;
if (!homeVisible[id]) return null;
if (!W) return children;
const isOver = overWidget === id && draggingWidget && draggingWidget !== id;
return (
<>
{isOver &&
}
{children}
);
};
const pickEnergy = (n) => {
setEnergy(n);
setEnergyModalLevel(n);
addCheckIn(n); // every quick-pick logs a timestamped check-in
};
if (emptyState) {
return (
{greet}
Your day starts here.
No tasks planned
Start by planning your day to see your workload, rituals and focus suggestions appear.
setRoute("daily-planning")} icon={Icons.Sunrise} size="lg">Plan my day
Create a task
);
}
return (
{/* Greeting + Personnaliser */}
{[["essential", "Essential"], ["full", "Complete"]].map(([m, lbl]) => (
setHomeMode(m)}
className={cn(
"h-8 px-3 rounded-[7px] text-[12px] font-medium transition-colors",
homeMode === m
? "bg-[hsl(var(--primary))] text-white"
: "text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"
)}
>{lbl}
))}
setCustomizing(c => !c)}
>
Customize
{homeVisibleCount < homeTotalCount && (
{homeVisibleCount}/{homeTotalCount}
)}
{/* Empty state when all home widgets hidden */}
{homeVisibleCount === 0 && (
All widgets are hidden
Open “Customize” to re-enable the sections you care about. Your settings are remembered.
setCustomizing(true)}>Customize
)}
{/* Slot content per widget id — full-width vertical stack. */}
{(() => {
const HOME_SLOTS = {
"workload":
,
"sleep-prompt":
setTodaySleepLogged(true)} />,
"energy-mini": setRoute("dashboard")} />,
"health": window.HealthSleepWidget ? setRoute("dashboard")} /> : null,
"current-task": (
In progress
Urgent
Finalize the Desjardins client proposal
Done
),
"overview": (
Day overview
{[
{ l: "Tasks", v: "3/5", icon: Icons.CheckSquare, color: "primary", trend: "+1 yesterday" },
{ l: "Meetings", v: "2", icon: Icons.Calendar, color: "info", trend: "1h25" },
{ l: "Focus", v: "2h", icon: Icons.Target, color: "success", trend: "Goal 3h" },
{ l: "Habits", v: "1/3", icon: Icons.Flame, color: "warning", trend: "Med · Reading" },
].map(s => (
{s.l}
{s.v}
{s.trend}
))}
),
"quick-actions": (
Quick actions
{[
{ l: "Task", icon: Icons.Plus, action: () => onOpenTask?.() },
{ l: "Calendar", icon: Icons.Calendar, action: () => setRoute("calendar") },
{ l: "Focus", icon: Icons.Target, action: () => setRoute("planner") },
{ l: "Habits", icon: Icons.Flame, action: () => setRoute("habits") },
{ l: "Stats", icon: Icons.BarChart, action: () => setRoute("dashboard") },
].map(a => (
{a.l}
))}
),
"assistant":
View all}>
Upcoming
{[
{ t: "14:30 → 14:45", title: "Product team stand-up", type: "meeting", participants: 6, space: "pro" },
{ t: "15:00 → 16:00", title: "Desjardins client call", type: "meeting", participants: 3, urgent: true, space: "pro" },
{ t: "16:30 → 17:15", title: "Review PR #142", type: "task", space: "pro" },
{ t: "17:15 → 18:00", title: "Deep work focus", type: "focus", space: "pro" },
{ t: "19:00 → 19:20", title: "Reading (habit)", type: "habit", spaces: ["perso","etudes"] },
].filter(inHomeSpace).map((e, i) => (
{e.t}
{e.title}
{e.participants &&
{e.participants} participants
}
{e.urgent &&
! }
))}
),
"tasks-today": (
setRoute("tasks")} className="text-[11px] text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]">View all}>
Today's tasks · 2/5
{[
{ id: 1, title: "Morning stand-up · prep notes", duration: "10min", priority: "muted", space: "pro" },
{ id: 2, title: "Desjardins proposal", duration: "2h", priority: "danger", space: "pro" },
{ id: 3, title: "Review PR #142", duration: "45min", priority: "warning", space: "pro" },
{ id: 4, title: "Reply to supplier emails", duration: "30min", priority: "primary", spaces: ["pro","perso"] },
{ id: 5, title: "Prepare Q2 presentation", duration: "3h", priority: "warning", space: "pro" },
].filter(inHomeSpace).map(t => {
const done = doneTasks.has(t.id);
return (
setDoneTasks(s => { const n = new Set(s); n.has(t.id) ? n.delete(t.id) : n.add(t.id); return n; })}
className="w-full flex items-center gap-2.5 p-2 rounded-[6px] hover:bg-[hsl(var(--accent)/0.3)] transition-colors text-left cursor-pointer"
>
{}} />
{t.title}
{t.duration}
);
})}
),
};
return homeOrder.map(id => HOME_SLOTS[id] ? {HW(id, HOME_SLOTS[id])} : null);
})()}
setEnergyModalLevel(null)} level={energyModalLevel || 5} />
{/* Customize panel — same component as the dashboard, scoped to the home */}
{customizing && window.CustomizePanel && (
setCustomizing(false)}
visibleCount={homeVisibleCount}
totalCount={homeTotalCount}
widgets={HOME_WIDGETS}
surfaceLabel="the home"
order={homeOrder}
onReorder={homeReorder}
/>
)}
);
}
function Legend({ color, label, v, raw }) {
return (
{label}
{v}
);
}
/* ============================================================
MORNING SLEEP PROMPT — appears in the morning, once per day.
Soft, non-modal. Reuses ENERGY_SCALE for "qualité ressentie".
Two intake modes: empty (manual) or pre-filled from Health.
Confirmed state: collapses to a 1-line summary with "modifier".
============================================================ */
function MorningSleepPrompt({ logged, onLogged }) {
const [dismissed, setDismissed] = useState(false);
const [mode, setMode] = useState("health"); // "manual" | "health" — toggle to demo both
const [bedtime, setBedtime] = useState(mode === "health" ? "23:30" : "");
const [wake, setWake] = useState(mode === "health" ? "06:45" : "");
const [quality, setQuality] = useState(mode === "health" ? 4 : null);
const [editing, setEditing] = useState(false);
if (dismissed) return null;
// Once logged: collapsed summary card
if (logged && !editing) {
const min = sleepDurationMin(bedtime, wake);
const qMeta = quality ? ENERGY_BY_N[quality] : null;
return (
Sleep logged · {fmtDur(min)}
{qMeta && {qMeta.emoji} }
{bedtime} → {wake}
setEditing(true)}
className="text-[11.5px] text-[hsl(263_70%_50%)] dark:text-[hsl(263_70%_75%)] hover:text-[hsl(263_70%_40%)] dark:hover:text-[hsl(263_70%_85%)] px-2 py-1 rounded hover:bg-[hsl(263_70%_55%/0.10)] dark:hover:bg-[hsl(263_70%_30%/0.3)]"
>
Edit
);
}
const min = bedtime && wake ? sleepDurationMin(bedtime, wake) : null;
const canSave = bedtime && wake && quality != null;
return (
{/* Health import banner */}
{mode === "health" && (
Imported from Health · confirm or adjust if needed
{ setMode("manual"); setBedtime(""); setWake(""); setQuality(null); }} className="text-[10.5px] underline opacity-80 hover:opacity-100">
enter manually
)}
How did you sleep?
30 seconds · helps DPM plan your day
setDismissed(true)}
aria-label="Later"
title="Later"
className="flex-shrink-0 w-7 h-7 rounded-md text-[hsl(var(--muted-foreground))] hover:bg-[hsl(263_70%_55%/0.15)] dark:hover:bg-[hsl(263_70%_30%/0.4)] hover:text-[hsl(var(--foreground))] flex items-center justify-center -mt-1"
>
Duration
{min != null ? fmtDur(min) : "—"}
Perceived quality
{ENERGY_SCALE.map(e => (
setQuality(e.n)}
title={`${e.label} · ${e.n}/5`}
className={cn(
"flex-1 h-12 rounded-[10px] border-2 flex flex-col items-center justify-center gap-0.5 transition-all",
quality === e.n
? "scale-105"
: "opacity-50 grayscale hover:opacity-90 hover:grayscale-0 border-transparent bg-[hsl(263_70%_55%/0.06)] dark:bg-[hsl(263_70%_25%/0.25)]"
)}
style={quality === e.n ? {
borderColor: `hsl(${e.c})`,
background: `hsl(${e.c} / 0.18)`,
} : {}}
>
{e.emoji}
{e.label}
))}
setDismissed(true)}
className="text-[12px] text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"
>
Later
{ onLogged(); setEditing(false); }}
>
Save
);
}
/* ============================================================
ENERGY HEADER PICKER — the SINGLE energy entry point on Home.
Two states:
- "à saisir" : 5 emojis to tap (if last check-in is older than
THRESHOLD_MIN, default 3h, or no check-in today)
- "capté" : "Énergie captée à HH:MM ✓ · modifier" (reduced state)
The picker auto-collapses after a tap and stays collapsed until the
threshold elapses again. Never bloque, toujours modifiable.
============================================================ */
function EnergyHeaderPicker({ energy, checkIns, onPick }) {
const THRESHOLD_MIN = 180; // 3h
const last = checkIns.length ? checkIns[checkIns.length - 1] : null;
const [editing, setEditing] = useState(false);
// Time since last check-in, in minutes. We mock "now" against the
// last check-in's time string (HH:MM) — in real app this uses Date.now().
const nowMins = (() => {
const d = new Date();
return d.getHours() * 60 + d.getMinutes();
})();
const lastMins = last ? (() => {
const [h, m] = last.time.split(":").map(Number);
return h * 60 + m;
})() : null;
const ageMin = lastMins != null ? Math.max(0, nowMins - lastMins) : Infinity;
const stale = ageMin >= THRESHOLD_MIN;
const expanded = editing || stale || !last;
if (expanded) {
return (
<>
Energy
{last ? "Recapture now" : "How are you feeling?"}
{ENERGY_SCALE.map(e => (
{ onPick(e.n); setEditing(false); }}
title={`${e.label} · ${e.n}/5`}
className={cn(
"w-9 h-9 rounded-full flex items-center justify-center text-[16px] transition-all",
e.n <= energy
? "shadow-sm scale-100"
: "grayscale opacity-50 hover:opacity-90 hover:grayscale-0"
)}
style={e.n <= energy ? { background: `hsl(${e.c} / 0.18)`, boxShadow: `inset 0 0 0 1px hsl(${e.c} / 0.4)` } : {}}
>{e.emoji}
))}
);
}
// Captured (compact) state
const meta = ENERGY_BY_N[last.level];
return (
<>
{meta.emoji}
Energy
Captured at {last.time}
setEditing(true)}
className="text-[11.5px] text-[hsl(263_70%_75%)] hover:text-[hsl(263_70%_85%)] px-2 py-1 rounded hover:bg-[hsl(263_70%_30%/0.2)]"
>
Edit
);
}
/* ============================================================
ENERGY MINI CARD — compact feedback. Sparkline only (no axes,
no legend, no per-point emojis), one-line textual summary, link
to the full analysis on the Tableau d'analyses.
Target height ~120px. Empty state stays elegant.
============================================================ */
function EnergyMiniCard({ checkIns, onNavigateAnalysis }) {
const empty = checkIns.length === 0;
// Find peak / trough across the day
let peak = null, trough = null;
for (const c of checkIns) {
if (!peak || c.level > peak.level) peak = c;
if (!trough || c.level < trough.level) trough = c;
}
return (
Your energy today
{empty
? "No check-in yet — a tap in the header above is enough."
: (
<>
{peak && trough && peak !== trough
? <>peak {peak.time} · trough {trough.time}
: <>last check-in {checkIns[checkIns.length - 1].time}
}
·
{checkIns.length} check-in{checkIns.length > 1 ? "s" : ""}
)}
View analysis
);
}
/* Plain sparkline — silhouette only, no axes, no legend, no point markers. */
function EnergySparkline({ checkIns }) {
const W = 200, H = 48, padY = 6;
if (checkIns.length === 0) {
return (
);
}
const dayStart = 6 * 60, dayEnd = 22 * 60;
const sorted = [...checkIns].sort((a, b) => a.time.localeCompare(b.time));
const xOf = (timeStr) => {
const [h, m] = timeStr.split(":").map(Number);
const mins = Math.max(dayStart, Math.min(dayEnd, h * 60 + m));
return (mins - dayStart) / (dayEnd - dayStart) * W;
};
const yOf = (lvl) => padY + (H - 2 * padY) * (1 - (lvl - 1) / 4);
const pts = sorted.map(c => ({ x: xOf(c.time), y: yOf(c.level) }));
const path = (() => {
if (pts.length === 1) return `M ${pts[0].x} ${pts[0].y}`;
let d = `M ${pts[0].x} ${pts[0].y}`;
for (let i = 0; i < pts.length - 1; i++) {
const p0 = pts[i - 1] || pts[i];
const p1 = pts[i];
const p2 = pts[i + 1];
const p3 = pts[i + 2] || p2;
const cp1x = p1.x + (p2.x - p0.x) / 6;
const cp1y = p1.y + (p2.y - p0.y) / 6;
const cp2x = p2.x - (p3.x - p1.x) / 6;
const cp2y = p2.y - (p3.y - p1.y) / 6;
d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;
}
return d;
})();
const areaPath = `${path} L ${pts[pts.length - 1].x} ${H} L ${pts[0].x} ${H} Z`;
return (
);
}
/* ============================================================
SOFT ENERGY CHECK-IN — non-modal AI-driven nudge.
Tap a level → it's gone. Never blocks the UI.
============================================================ */
function SoftCheckInPrompt({ onLog }) {
const [dismissed, setDismissed] = useState(false);
if (dismissed) return null;
return (
What's your energy level right now?
One tap is enough · it helps the app better suggest what to do and when
{ENERGY_SCALE.map(e => (
{ onLog(e.n); setDismissed(true); }}
title={`${e.label} · ${e.n}/5`}
className="w-10 h-10 rounded-full flex items-center justify-center text-[18px] grayscale opacity-70 hover:opacity-100 hover:grayscale-0 hover:scale-110 transition-all focus:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]"
>
{e.emoji}
))}
setDismissed(true)}
aria-label="Later"
title="Later"
className="flex-shrink-0 w-7 h-7 rounded-md text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--foreground))] flex items-center justify-center"
>
);
}
/* ============================================================
ENERGY CURVE CARD — today's check-ins as a curve + 7-day pattern.
============================================================ */
function EnergyCurveCard({ checkIns, onAdd }) {
const [tab, setTab] = useState("today");
const [showAdd, setShowAdd] = useState(false);
const empty = checkIns.length === 0;
const history = [
{ d: "Mon", curve: [2, 3, 4, 5, 4, 3, 4, 3, 2, 3] },
{ d: "Tue", curve: [3, 4, 5, 5, 4, 2, 3, 3, 2, 2] },
{ d: "Wed", curve: [3, 4, 4, 5, 3, 2, 3, 4, 4, 3] },
{ d: "Thu", curve: [2, 3, 4, 5, 5, 3, 2, 3, 3, 3] },
{ d: "Fri", curve: [3, 4, 5, 4, 3, 2, 2, 3, 2, 1] },
{ d: "Sat", curve: [4, 4, 5, 4, 4, 3, 4, 4, 3, 3] },
{ d: "Sun", curve: [3, 3, 5, 4, 2, 4, 4, 3, 3, 2] },
];
const avg = Array.from({ length: 10 }, (_, i) =>
history.reduce((a, b) => a + b.curve[i], 0) / history.length
);
return (
Energy throughout the day
{checkIns.length} check-in{checkIns.length > 1 ? "s" : ""}
{empty
? "No check-in yet today — make one to see your curve take shape."
: "Peak, trough, rebound — visualized at a glance."}
{[
{ id: "today", label: "Today" },
{ id: "history", label: "History" },
].map(t => (
setTab(t.id)}
className={cn(
"h-7 px-2.5 rounded-[6px] text-[11.5px] font-medium transition-all",
tab === t.id
? "bg-[hsl(var(--card))] text-[hsl(var(--foreground))] shadow-sm"
: "text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))]"
)}
>
{t.label}
))}
{tab === "today" && (
setShowAdd(s => !s)}>
Check in now
)}
{showAdd && tab === "today" && (
How do you feel right now?
{ENERGY_SCALE.map(e => (
{ onAdd(e.n); setShowAdd(false); }}
title={`${e.label} · ${e.n}/5`}
className="w-9 h-9 rounded-full flex items-center justify-center text-[16px] grayscale opacity-70 hover:opacity-100 hover:grayscale-0 hover:scale-110 transition-all"
>
{e.emoji}
))}
)}
{tab === "today" ? (
empty
? setShowAdd(true)} />
:
);
}
function EnergyCurveEmpty({ onPrompt }) {
return (
📈
No check-in today
Check in on your energy whenever you think of it. No pressure — a few check-ins are enough to see your rhythm emerge.
Check in now
);
}
function EnergyCurveToday({ checkIns }) {
const dayStart = 6 * 60, dayEnd = 22 * 60;
const W = 720, H = 160, padL = 38, padR = 16, padT = 16, padB = 26;
const plotW = W - padL - padR;
const plotH = H - padT - padB;
const xOf = (timeStr) => {
const [h, m] = timeStr.split(":").map(Number);
const mins = Math.max(dayStart, Math.min(dayEnd, h * 60 + m));
return padL + ((mins - dayStart) / (dayEnd - dayStart)) * plotW;
};
const yOf = (level) => padT + plotH - ((level - 1) / 4) * plotH;
const sorted = [...checkIns].sort((a, b) => a.time.localeCompare(b.time));
const pts = sorted.map(c => ({ x: xOf(c.time), y: yOf(c.level), c }));
const path = (() => {
if (pts.length === 0) return "";
if (pts.length === 1) return `M ${pts[0].x} ${pts[0].y}`;
let d = `M ${pts[0].x} ${pts[0].y}`;
for (let i = 0; i < pts.length - 1; i++) {
const p0 = pts[i - 1] || pts[i];
const p1 = pts[i];
const p2 = pts[i + 1];
const p3 = pts[i + 2] || p2;
const cp1x = p1.x + (p2.x - p0.x) / 6;
const cp1y = p1.y + (p2.y - p0.y) / 6;
const cp2x = p2.x - (p3.x - p1.x) / 6;
const cp2y = p2.y - (p3.y - p1.y) / 6;
d += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${p2.x} ${p2.y}`;
}
return d;
})();
const areaPath = path
? `${path} L ${pts[pts.length - 1].x} ${padT + plotH} L ${pts[0].x} ${padT + plotH} Z`
: "";
const ticks = [6, 10, 14, 18, 22];
return (
{[1,2,3,4,5].map(l => {
const y = yOf(l);
return (
{ENERGY_BY_N[l].emoji}
);
})}
{ticks.map(h => {
const x = padL + ((h * 60 - dayStart) / (dayEnd - dayStart)) * plotW;
return (
{String(h).padStart(2,"0")}:00
);
})}
{areaPath &&
{ENERGY_BY_N[p.c.level].emoji}
{`${p.c.time} · ${ENERGY_BY_N[p.c.level].label}`}
))}
{(() => {
const now = new Date();
const nowMins = now.getHours() * 60 + now.getMinutes();
if (nowMins < dayStart || nowMins > dayEnd) return null;
const x = padL + ((nowMins - dayStart) / (dayEnd - dayStart)) * plotW;
return (
);
})()}
{ENERGY_SCALE.map(e => (
))}
{sorted[0]?.time}{sorted.length > 1 ? ` → ${sorted[sorted.length - 1].time}` : ""}
);
}
function EnergyHistory({ history, avg }) {
const W = 720, H = 110, padL = 36, padR = 16, padT = 8, padB = 22;
const plotW = W - padL - padR;
const plotH = H - padT - padB;
const xOfIdx = (i) => padL + (i / 9) * plotW;
const yOf = (level) => padT + plotH - ((level - 1) / 4) * plotH;
const hours = ["06", "08", "10", "12", "14", "16", "18", "20", "22"];
const avgPath = (() => {
let d = `M ${xOfIdx(0)} ${yOf(avg[0])}`;
for (let i = 1; i < avg.length; i++) {
const xPrev = xOfIdx(i - 1), yPrev = yOf(avg[i - 1]);
const xCur = xOfIdx(i), yCur = yOf(avg[i]);
const xMid = (xPrev + xCur) / 2;
d += ` C ${xMid} ${yPrev}, ${xMid} ${yCur}, ${xCur} ${yCur}`;
}
return d;
})();
return (
{history.map((day, di) => {
const isToday = di === history.length - 1;
const pts = day.curve.map((v, i) => `${xOfIdx(i)},${yOf(v)}`).join(" ");
return (
{day.d}
{(day.curve.reduce((a, b) => a + b, 0) / day.curve.length).toFixed(1)}
);
})}
Your pattern — 7-day average
{[1,3,5].map(l => (
{h}:00
))}
);
}
/* ============================================================
ASSISTANT IA — single voice on the Home page.
Consolidates "Suggestions IA" + "Conseil personnalisé" +
"Astuce productivité" into one block with a contextual
message + actionable suggestions + sourced principles.
Enable/disable is mirrored between this block's "..." menu
and the Paramètres page via a global signal so both stay
in sync without prop drilling.
============================================================ */
const AI_EVT = "dpm-ai-enabled-change";
if (typeof window !== "undefined" && typeof window.__dpmAIEnabled === "undefined") {
window.__dpmAIEnabled = true;
}
function useAIEnabled() {
const [enabled, setEnabledState] = useState(
typeof window !== "undefined" ? !!window.__dpmAIEnabled : true
);
useEffect(() => {
const onChange = (e) => setEnabledState(!!e.detail);
window.addEventListener(AI_EVT, onChange);
return () => window.removeEventListener(AI_EVT, onChange);
}, []);
const setEnabled = (v) => {
const next = typeof v === "function" ? v(window.__dpmAIEnabled) : v;
window.__dpmAIEnabled = !!next;
window.dispatchEvent(new CustomEvent(AI_EVT, { detail: !!next }));
};
return [enabled, setEnabled];
}
// Expose for cross-file use (settings page lives in pages-tracking.jsx).
if (typeof window !== "undefined") window.useAIEnabled = useAIEnabled;
const AI_SUGGESTIONS = [
{
id: "sleep-light",
text: "You slept little (5h50, quality 2/5). Lighten your morning: push “Desjardins proposal” to 2pm, keep the morning for admin and short meetings.",
action: "Reschedule",
icon: "Moon",
source: { title: "Why We Sleep", author: "Matthew Walker" },
apply: { toast: "Task rescheduled to 2 PM", doneLabel: "Rescheduled" },
},
{
id: "energy-pattern",
text: "Your energy is usually high around 10am and low around 2pm. Place your hard task in the morning rather than after lunch — you'll gain 20–30% productivity.",
action: "View the day",
icon: "Sunrise",
source: { title: "When", author: "Daniel H. Pink" },
nav: "calendar",
},
{
id: "habit-1",
text: "The “Reading” habit hasn't been checked for 2 days. Block 20 min tonight before journaling to keep your momentum.",
action: "Block 20 min",
icon: "Clock",
source: { title: "Atomic Habits", author: "James Clear" },
apply: { toast: "20 min blocked for Reading tonight", doneLabel: "Blocked" },
},
];
function AIAssistant() {
const [enabled, setEnabled] = useAIEnabled();
const [menuOpen, setMenuOpen] = useState(false);
const menuRef = useRef(null);
useEffect(() => {
if (!menuOpen) return;
const onDown = (e) => { if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false); };
document.addEventListener("mousedown", onDown);
return () => document.removeEventListener("mousedown", onDown);
}, [menuOpen]);
if (!enabled) {
return (
AI assistant disabled
You'll no longer see contextual advice on the home page. You can re-enable it anytime here or in Settings.
setEnabled(true)}>
Re-enable the assistant
);
}
return (
AI assistant
setMenuOpen(o => !o)}
aria-label="AI assistant options"
aria-haspopup="menu"
aria-expanded={menuOpen}
className="w-7 h-7 rounded-md text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--foreground))] flex items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]"
>
{menuOpen && (
Regenerate advice
Assistant preferences
{ setMenuOpen(false); setEnabled(false); }}>
Hide the AI assistant
)}
{/* Contextual message — top voice of the assistant */}
Your day is busy and your hardest task —{" "}
Desjardins proposal {" "}
— is still to do. Use your morning energy peak to tackle it first.
{/* Suggestions */}
{AI_SUGGESTIONS.map(s => (
);
}
function MenuItem({ icon: Icon, children, onClick }) {
return (
);
}
function SuggestionRow({ suggestion }) {
const ActionIcon = Icons[suggestion.icon] || Icons.ArrowRight;
const [done, setDone] = useState(false);
const onAction = () => {
if (suggestion.nav) {
window.__dpmNavigate?.(suggestion.nav);
return;
}
if (suggestion.apply) {
setDone(true);
window.__dpmToast?.(suggestion.apply.toast);
}
};
return (
{suggestion.text}
{suggestion.source && (
{suggestion.source.title}
·
{suggestion.source.author}
)}
{done ? (
) : (
{suggestion.action}
)}
);
}
/* ============================================================
CLOSING SCREEN — shown after the user finishes the
end-of-day rituel. Calm, positive, sourced quote.
============================================================ */
function ClosingScreen({ onClose }) {
// Pick a daily quote from the curated list. In a real app, this would
// rotate by date so each evening surfaces a different one.
const quote = PRODUCTIVITY_TIPS[(new Date().getDate()) % PRODUCTIVITY_TIPS.length];
useEffect(() => {
const onKey = (e) => { if (e.key === "Escape") onClose(); };
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [onClose]);
return (
{/* Ambient gradient */}
{/* Header band */}
Have a good evening
Your day is wrapped up.
4 tasks completed · 3h00 of deep work · 5h of buffer respected. Rest up, tomorrow is already planned.
{/* Stats récap */}
{[
{ v: "4/4", l: "Tasks" },
{ v: "3h00", l: "Focus" },
{ v: "78", l: "Score" },
].map(s => (
))}
{/* Quote — the reward */}
{/* Footer */}
Good evening
setOpen(o => !o)}
className="w-full flex items-center justify-between mb-2 -mx-1 px-1 rounded-md hover:bg-[hsl(var(--accent)/0.3)] transition-colors py-0.5"
>
{open && (
« {tip.q} »
{tip.a}
setI(p => (p - 1 + total) % total)}
className="w-6 h-6 rounded-md hover:bg-[hsl(var(--accent))] flex items-center justify-center text-[hsl(var(--muted-foreground))]">
{i+1}/{total}
setI(p => (p + 1) % total)}
className="w-6 h-6 rounded-md hover:bg-[hsl(var(--accent))] flex items-center justify-center text-[hsl(var(--muted-foreground))]">
)}
);
}
/* ============================================================
PAGE 10 — DAILY PLANNING (/daily-planning)
============================================================ */
function DailyPlanningPage({ setRoute }) {
const t = useT();
const [step, setStep] = useState(3);
const [showClosing, setShowClosing] = useState(false);
// Shared daily-planning task list — built up step by step and reused across
// Estimate / Prioritize / Schedule. Each task has stable id.
const [dpTasks, setDpTasks] = useState([
{ id: "dt1", title: "Desjardins client proposal", duration: 120, priority: "URGENT" },
{ id: "dt2", title: "Review PR #142", duration: 45, priority: "HIGH" },
{ id: "dt3", title: "Call the supplier", duration: 15, priority: "MEDIUM" },
{ id: "dt4", title: "API doc update", duration: 60, priority: "LOW" },
]);
// Scheduled slots — used by step 5. Each "drop" slot is empty by default,
// and the user can drop a task onto it. Time slots are HH:MM strings.
const [schedule, setSchedule] = useState([
{ id: "s1", time: "09:00", end: null, title: "Stand-up", type: "meeting" },
{ id: "s2", time: "09:30", end: "11:30", title: "Desjardins proposal", type: "task", taskId: "dt1" },
{ id: "s3", time: "11:30", end: null, title: "Break", type: "break" },
{ id: "s4", time: "14:00", end: "14:45", title: "Review PR #142", type: "task", taskId: "dt2" },
{ id: "s5", time: "15:00", end: null, title: "Desjardins client call", type: "meeting" },
{ id: "s6", time: "16:30", end: null, title: "", type: "drop", taskId: null },
{ id: "s7", time: "17:30", end: null, title: "", type: "drop", taskId: null },
]);
const steps = [
{ t: t("dp.add"), d: "List the day's tasks" },
{ t: t("dp.estimate"), d: t("dp.estimate.subtitle") },
{ t: t("dp.fill"), d: "Check capacity" },
{ t: t("dp.prioritize"), d: t("dp.prioritize.subtitle") },
{ t: t("dp.schedule"), d: t("dp.schedule.subtitle") },
{ t: t("dp.document"), d: "Notes & summary" },
];
return (
{/* Progress bar */}
{t("dp.title")}
Step {step + 1} / 6 · ~ 3min
{steps.map((s, i) => (
setStep(i)} className="text-left">
{String(i+1).padStart(2,"0")} {s.t}
))}
{/* Step content */}
{steps[step].t}
{steps[step].d}
{step === 0 &&
{/* Footer nav */}
setStep(s => s-1)} icon={Icons.ChevronLeft}>{t("common.previous")}
Auto-save on
{step < 5
?
setStep(s => s+1)} iconRight={Icons.ChevronRight}>{t("common.next")}
:
setShowClosing(true)} icon={Icons.Check}>End my day
}
{showClosing && (
{ setShowClosing(false); setRoute("home"); }}
/>
)}
{t("common.add")}
{tasks.map((task, i) => (
{task.title}
setTasks(arr => arr.filter((_, j) => j !== i))} className="text-[hsl(var(--muted-foreground))] hover:text-[hsl(0_84%_60%)]">
))}
2 tasks left from yesterday — drag them here to resume them.
);
}
function DPEstimate({ tasks, setTasks }) {
const t = useT();
const presets = [5, 15, 30, 45, 60, 90, 120, 180];
const [customFor, setCustomFor] = useState(null);
const [customVal, setCustomVal] = useState("");
const setDuration = (id, d) => setTasks(arr => arr.map(x => x.id === id ? { ...x, duration: d } : x));
const fmt = (m) => m < 60 ? `${m}min` : `${Math.floor(m / 60)}h${m % 60 ? " " + (m % 60) : ""}`;
return (
{tasks.map(task => {
const customActive = customFor === task.id;
return (
{task.title}
{presets.map(p => (
setDuration(task.id, p)}
className={cn(
"px-3 h-8 rounded-[6px] text-[12px] font-medium transition-colors tabular-nums",
task.duration === p
? "bg-[hsl(var(--primary))] text-white"
: "border border-[hsl(var(--border))] text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))]"
)}>{fmt(p)}
))}
{!presets.includes(task.duration) && task.duration > 0 && (
setDuration(task.id, task.duration)}
className="px-3 h-8 rounded-[6px] text-[12px] font-medium bg-[hsl(var(--primary))] text-white tabular-nums">
{fmt(task.duration)}
)}
{customActive ? (
min
) : (
{ setCustomFor(task.id); setCustomVal(String(task.duration || "")); }}
className="px-3 h-8 rounded-[6px] text-[12px] font-medium border border-dashed border-[hsl(var(--border))] text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))]">
{t("dp.custom")}
)}
);
})}
Day capacity
{planedH}h{String(planedM).padStart(2, "0")} planned / 8h available
{tasks.map(x => {
const pct = (x.duration / capacityMin) * 100;
const colors = { URGENT: "263 70% 60%", HIGH: "38 92% 55%", MEDIUM: "217 91% 60%", LOW: "142 70% 50%" };
const c = colors[x.priority] || "263 70% 60%";
return (
{pct > 5 ? x.title.split(" ").slice(0, 2).join(" ") : ""}
);
})}
{totalMin <= capacityMin ? "Balanced day" : "Overloaded day"}
{Math.max(0, Math.floor((capacityMin - totalMin) / 60))}h of buffer for the unexpected.
);
}
function DPPrioritize({ tasks, setTasks }) {
const t = useT();
const [dragIdx, setDragIdx] = useState(null);
const [overIdx, setOverIdx] = useState(null);
const colors = { URGENT: "bg-[hsl(0_84%_60%)]", HIGH: "bg-[hsl(20_90%_55%)]", MEDIUM: "bg-[hsl(50_90%_55%)]", LOW: "bg-[hsl(142_70%_50%)]" };
const fmt = (m) => m < 60 ? `${m}min` : `${Math.floor(m / 60)}h${m % 60 ? " " + (m % 60) : ""}`;
const reorder = (from, to) => {
if (from === to || from < 0 || to < 0 || from >= tasks.length || to > tasks.length) return;
setTasks(arr => {
const next = arr.slice();
const [moved] = next.splice(from, 1);
const insertAt = from < to ? to - 1 : to;
next.splice(insertAt, 0, moved);
return next;
});
};
const move = (idx, delta) => {
const target = idx + delta;
if (target < 0 || target >= tasks.length) return;
setTasks(arr => {
const next = arr.slice();
[next[idx], next[target]] = [next[target], next[idx]];
return next;
});
};
return (
{t("dp.prioritize.hint")}
{tasks.map((it, i) => {
const isOver = overIdx === i && dragIdx !== null && dragIdx !== i;
return (
{isOver &&
}
{ setDragIdx(i); e.dataTransfer.effectAllowed = "move"; try { e.dataTransfer.setData("text/plain", it.id); } catch {} }}
onDragOver={(e) => { if (dragIdx !== null) { e.preventDefault(); setOverIdx(i); } }}
onDragLeave={() => { if (overIdx === i) setOverIdx(null); }}
onDrop={(e) => { e.preventDefault(); if (dragIdx !== null && dragIdx !== i) reorder(dragIdx, i); setDragIdx(null); setOverIdx(null); }}
onDragEnd={() => { setDragIdx(null); setOverIdx(null); }}
className={cn(
"flex items-center gap-3 p-3 rounded-[10px] border border-[hsl(var(--border))] bg-[hsl(var(--card))] cursor-grab hover:border-[hsl(var(--primary)/0.4)] transition-colors",
dragIdx === i && "opacity-40"
)}>
{it.title}
{it.priority}
· {fmt(it.duration)}
move(i, -1)} disabled={i === 0} title="Move up"
className="w-6 h-6 rounded text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] disabled:opacity-30 disabled:pointer-events-none flex items-center justify-center">
move(i, 1)} disabled={i === tasks.length - 1} title="Move down"
className="w-6 h-6 rounded text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] disabled:opacity-30 disabled:pointer-events-none flex items-center justify-center">
#{i+1}
);
})}
);
}
function DPSchedule({ tasks, schedule, setSchedule }) {
const t = useT();
// Unplaced tasks = anything in `tasks` whose id is not on a schedule slot.
const placedIds = new Set(schedule.filter(s => s.taskId).map(s => s.taskId));
const unplaced = tasks.filter(x => !placedIds.has(x.id));
const [dragId, setDragId] = useState(null);
const [overSlot, setOverSlot] = useState(null);
const fmt = (m) => m < 60 ? `${m}min` : `${Math.floor(m / 60)}h${m % 60 ? " " + (m % 60) : ""}`;
const colorByPrio = { URGENT: "danger", HIGH: "warning", MEDIUM: "info", LOW: "success" };
const drop = (slotId, taskId) => {
const task = tasks.find(x => x.id === taskId);
if (!task) return;
setSchedule(arr => arr.map(s => {
if (s.id === slotId) {
return { ...s, title: task.title, type: "task", taskId: task.id };
}
return s;
}));
};
const unplace = (slotId) => {
setSchedule(arr => arr.map(s => s.id === slotId ? { ...s, title: "", type: "drop", taskId: null, end: null } : s));
};
return (
{t("dp.schedule.tasksToPlace")}
{unplaced.map(x => (
{ setDragId(x.id); e.dataTransfer.effectAllowed = "move"; try { e.dataTransfer.setData("text/plain", x.id); } catch {} }}
onDragEnd={() => { setDragId(null); setOverSlot(null); }}
className={cn(
"flex items-center gap-2 p-2.5 rounded-[8px] border border-[hsl(var(--border))] bg-[hsl(var(--muted)/0.3)] cursor-grab hover:border-[hsl(var(--primary)/0.4)] transition-colors",
dragId === x.id && "opacity-40"
)}>
{x.title}
{fmt(x.duration)}
))}
{unplaced.length === 0 ? t("dp.schedule.allPlaced") : `${unplaced.length} task${unplaced.length > 1 ? "s" : ""} to place`}
{window.DPMDate ? ((window.__dpmLang === "fr" ? "Aujourd'hui · " : "Today · ") + window.DPMDate.fmt(window.DPMDate.today(), { month: "long", day: "numeric" }, window.__dpmLang === "fr" ? "fr" : "en")) : "Today · May 24"}
{schedule.map(row => {
const isDrop = row.type === "drop" && !row.taskId;
const isOver = overSlot === row.id && dragId;
return (
{ if (isDrop && dragId) { e.preventDefault(); setOverSlot(row.id); } }}
onDragLeave={() => { if (overSlot === row.id) setOverSlot(null); }}
onDrop={(e) => { if (isDrop && dragId) { e.preventDefault(); drop(row.id, dragId); } setDragId(null); setOverSlot(null); }}
className={cn(
"flex items-center gap-3 px-3 py-2 border-b border-[hsl(var(--border))] last:border-b-0 transition-colors group/slot",
isOver && "bg-[hsl(var(--primary)/0.08)] ring-1 ring-inset ring-[hsl(var(--primary)/0.5)]"
)}>
{row.time}{row.end &&
→ {row.end}
}
{isDrop ? (
{isOver ? "Release to add" : t("dp.schedule.dropHere")}
) : row.title}
{row.taskId && (
unplace(row.id)} title="Remove"
className="absolute right-1.5 top-1/2 -translate-y-1/2 w-5 h-5 rounded hover:bg-[hsl(var(--accent))] text-[hsl(var(--muted-foreground))] opacity-0 group-hover/slot:opacity-100 flex items-center justify-center">
)}
);
})}
);
}
function DPDocument() {
return (
Summary of your day
{[
{ v: "4", l: "Tasks" },
{ v: "3h00", l: "Work" },
{ v: "2", l: "Meetings" },
{ v: "5h", l: "Buffer" },
].map(s => (
))}
Notes & intentions
{}} />
Start the first task now
);
}
/* ============================================================
PAGE 11 — PLANNER (/planner) — command center
============================================================ */
/* Pomodoro duration stepper — round 44px tap target, disabled state grays out */
function Stepper({ dir, disabled, onClick, title }) {
return (
{dir === "up"
?
);
}
/* ============================================================
FOCUS VIEW PANELS (P24) — the same "Personnaliser" pattern as Home /
Dashboard, generalized to a view's PANELS. Order + visibility persist per
view in localStorage (dpm-layout-focus) via the shared useViewLayout engine.
`session` is the REQUIRED core panel (movable, never hidden). `weight` drives
flex-grow so hiding a panel lets the others — especially the Session — widen.
============================================================ */
const FOCUS_PANELS = [
{ id: "queue", labelKey: "focusLayout.queue.label", descKey: "focusLayout.queue.desc", weight: 1 },
{ id: "session", labelKey: "focusLayout.session.label", descKey: "focusLayout.session.desc", weight: 1.5, required: true },
{ id: "schedule", labelKey: "focusLayout.schedule.label", descKey: "focusLayout.schedule.desc", weight: 1 },
{ id: "music", labelKey: "focusLayout.music.label", descKey: "focusLayout.music.desc", weight: 1, selfStart: true },
];
function PlannerPage({ setRoute, onOpenTask }) {
const t = useT();
const isMobile = window.useIsMobile ? window.useIsMobile() : false;
// Local task queue (mutable for reordering). We carry the original list shape.
const [taskQueue, setTaskQueue] = useState([
{ id: 1, t: "Stand-up · notes", d: "10min", p: "muted", done: true },
{ id: 2, t: "Desjardins proposal", d: "2h", p: "danger" },
{ id: 3, t: "Review PR #142", d: "45min", p: "warning" },
{ id: 4, t: "Supplier emails", d: "30min", p: "primary" },
{ id: 5, t: "Q2 presentation", d: "3h", p: "warning" },
]);
// The task the user is hovering on / has selected (preview).
// Defaults to the second one to preserve the demo.
const [selectedTask, setSelectedTask] = useState(2);
// The task that's LOCKED in (set when user clicks Démarrer). null = no lock.
const [lockedTask, setLockedTask] = useState(null);
const [focusActive, setFocusActive] = useState(false);
const [duration, setDuration] = useState(60);
const [skipBreaks, setSkipBreaks] = useState(false);
const [editing, setEditing] = useState(false);
const [editValue, setEditValue] = useState("");
const editRef = useRef(null);
// Drag-reorder state on the queue
const [dragId, setDragId] = useState(null);
const [overId, setOverId] = useState(null);
// Focus-time accrual: while a task is locked AND the session is running, add
// one real second per second to that task's focus total (persisted + shared
// with the Tasks board and the Home "elapsed" banner).
const [focusMap, focusTimeOps] = (typeof useFocusTime === "function") ? useFocusTime() : [{}, { add() {} }];
const fmtFT = window.fmtFocusTime || ((s) => "");
const nT = window.normTitle || ((s) => String(s || "").trim().toLowerCase());
useEffect(() => {
if (!focusActive || lockedTask == null) return;
const title = taskQueue.find(x => x.id === lockedTask)?.t;
if (!title) return;
const id = setInterval(() => focusTimeOps.add(title, 1), 1000);
return () => clearInterval(id);
}, [focusActive, lockedTask]);
const reorder = (fromId, toId) => {
if (fromId === toId) return;
setTaskQueue(arr => {
const next = arr.slice();
const fromIdx = next.findIndex(x => x.id === fromId);
const toIdx = next.findIndex(x => x.id === toId);
if (fromIdx < 0 || toIdx < 0) return arr;
const [moved] = next.splice(fromIdx, 1);
const insertAt = fromIdx < toIdx ? toIdx - 1 : toIdx;
next.splice(insertAt, 0, moved);
return next;
});
};
const FOCUS_MIN = 15;
const FOCUS_MAX = 240;
const FOCUS_STEP = 15;
const SEGMENT_MIN = 30;
const BREAK_MIN = 5;
const locked = focusActive || lockedTask !== null;
const atMin = duration <= FOCUS_MIN;
const atMax = duration >= FOCUS_MAX;
const autoBreaks = Math.max(0, Math.floor(duration / SEGMENT_MIN) - 1);
const effectiveBreaks = skipBreaks ? 0 : autoBreaks;
const schedule = (() => {
if (skipBreaks || autoBreaks === 0) return [{ kind: "focus", min: duration }];
const segs = [];
let remaining = duration;
while (remaining > 0) {
const f = Math.min(SEGMENT_MIN, remaining);
segs.push({ kind: "focus", min: f });
remaining -= f;
if (remaining > 0) segs.push({ kind: "break", min: BREAK_MIN });
}
return segs;
})();
const totalWithBreaks = duration + effectiveBreaks * BREAK_MIN;
const countdownLabel = (() => {
const total = duration * 60;
const remaining = Math.max(0, Math.floor(total * 0.62));
const mm = String(Math.floor(remaining / 60)).padStart(2, "0");
const ss = String(remaining % 60).padStart(2, "0");
return `${mm}:${ss}`;
})();
// The visible "tâche en cours" reflects the LOCKED task once started, or
// the user's current selection (preview) otherwise.
const shownTaskId = lockedTask ?? selectedTask;
const shownTask = taskQueue.find(x => x.id === shownTaskId) || taskQueue[0];
const startEdit = () => {
if (locked) return;
setEditValue(String(duration));
setEditing(true);
requestAnimationFrame(() => { editRef.current?.focus(); editRef.current?.select(); });
};
const commitEdit = () => {
const n = parseInt(editValue, 10);
if (Number.isFinite(n) && n >= FOCUS_MIN && n <= FOCUS_MAX) setDuration(n);
setEditing(false);
};
const cancelEdit = () => setEditing(false);
const step = (delta) => {
if (locked) return;
setDuration(d => {
const snapped = Math.round(d / FOCUS_STEP) * FOCUS_STEP;
return Math.max(FOCUS_MIN, Math.min(FOCUS_MAX, snapped + delta));
});
};
const handleSelect = (id) => {
if (lockedTask !== null) return; // can't change selection while locked
setSelectedTask(id);
};
const startSession = () => {
setLockedTask(selectedTask);
setFocusActive(true);
};
const endSession = () => {
setLockedTask(null);
setFocusActive(false);
};
const restartSession = () => {
setFocusActive(false);
setLockedTask(null);
// user can now pick another task
};
// ---- View layout (P24): per-view order + visibility of Focus panels ----
const [customizing, setCustomizing] = useState(false);
const layout = window.useViewLayout("focus", FOCUS_PANELS);
const { visible: pVisible, toggle: pToggle, reset: pReset, hideAll: pHideAll, order: pOrder, reorder: pReorder, move: pMove } = layout;
const panelMeta = useMemo(() => Object.fromEntries(FOCUS_PANELS.map(p => [p.id, p])), []);
const focusPanelsT = useMemo(() => FOCUS_PANELS.map(p => ({ ...p, label: t(p.labelKey), desc: t(p.descKey), group: t("layout.group") })), [t]);
const orderedVisible = pOrder.filter(id => panelMeta[id] && pVisible[id] !== false);
const layoutTotal = FOCUS_PANELS.length;
const layoutVisible = FOCUS_PANELS.filter(p => pVisible[p.id] !== false).length;
const [panelDrag, setPanelDrag] = useState(null);
const [panelOver, setPanelOver] = useState(null);
// ---- Panel content renderers (kept here for access to session state) ----
const renderQueue = () => (
{t("focus.queue")}
{taskQueue.filter(x => !x.done).length} {t("focus.remaining")}
{lockedTask !== null && (
)}
{lockedTask === null && (
{t("focus.selectToStart")}
)}
{taskQueue.map(taskItem => {
const isSelected = shownTaskId === taskItem.id;
const isLockedRow = lockedTask === taskItem.id;
const disabled = lockedTask !== null && !isLockedRow;
const isOver = overId === taskItem.id && dragId && dragId !== taskItem.id;
return (
{isOver &&
}
!disabled && handleSelect(taskItem.id)}
draggable={!locked && !customizing}
onDragStart={(e) => { if (locked || customizing) return; setDragId(taskItem.id); e.dataTransfer.effectAllowed = "move"; try { e.dataTransfer.setData("text/plain", String(taskItem.id)); } catch {} }}
onDragOver={(e) => { if (dragId && dragId !== taskItem.id) { e.preventDefault(); setOverId(taskItem.id); } }}
onDragLeave={() => { if (overId === taskItem.id) setOverId(null); }}
onDrop={(e) => { e.preventDefault(); if (dragId && dragId !== taskItem.id) reorder(dragId, taskItem.id); setDragId(null); setOverId(null); }}
onDragEnd={() => { setDragId(null); setOverId(null); }}
className={cn(
"w-full flex items-center gap-2.5 p-3 rounded-[8px] text-left transition-all",
disabled && "opacity-40 cursor-not-allowed",
!disabled && !locked && "cursor-pointer",
isLockedRow ? "bg-[hsl(38_92%_55%/0.12)] border border-[hsl(38_92%_55%/0.4)]" :
isSelected ? "bg-[hsl(var(--primary)/0.1)] border border-[hsl(var(--primary)/0.4)]" :
"hover:bg-[hsl(var(--accent)/0.3)] border border-transparent",
dragId === taskItem.id && "opacity-40"
)}
>
{}} />
{taskItem.t}
{taskItem.d}
{(() => {
const ft = focusMap[nT(taskItem.t)] || 0;
if (!ft) return null;
return (
);
})()}
{isLockedRow && Selected }
{!locked && !customizing &&
);
})}
);
const renderSession = () => (
{t("focus.session")}
{duration} min · {effectiveBreaks} break{effectiveBreaks > 1 ? "s" : ""}
{!focusActive && (
Notifications will be silenced during the session. For longer sessions, short breaks are added to recharge you.
)}
{t("focus.currentTask")}
{shownTask?.t}
{focusActive ? (
{countdownLabel}
) : editing ? (
) : (
{duration}
min
Double-click to edit
)}
step(-FOCUS_STEP)} title={locked ? "Locked during the session" : atMin ? "Minimum 15 min" : "−15 minutes"} />
{locked ? "Locked" : skipBreaks ? t("focus.noBreaks") : `${t("focus.youWillHave")} ${autoBreaks} break${autoBreaks > 1 ? "s" : ""}`}
steps of {FOCUS_STEP} min · {FOCUS_MIN}–{FOCUS_MAX} min
step(FOCUS_STEP)} title={locked ? "Locked during the session" : atMax ? "Maximum 4h" : "+15 minutes"} />
{skipBreaks &&
{t("focus.skipBreaks")}
{!focusActive && (
{t("focus.run")}
{totalWithBreaks} min total
{schedule.map((seg, i) => {
const flex = seg.min;
const isFocus = seg.kind === "focus";
return (
{seg.min >= 15 ? `${seg.min}'` : ""}
);
})}
)}
{t("focus.start")}
)}
{locked && focusActive && (
setFocusActive(false)}>{t("common.pause")}
)}
{locked && !focusActive && (
setFocusActive(true)}>{t("common.resume")}
)}
{lockedTask !== null && (
{t("focus.endSession")}
)}
);
const renderSchedule = () => (
{t("focus.programme")}
14:32
);
const renderPanel = (id) =>
id === "queue" ? renderQueue() :
id === "session" ? renderSession() :
id === "schedule" ? renderSchedule() :
id === "music" ?
{ setPanelDrag(id); e.dataTransfer.effectAllowed = "move"; try { e.dataTransfer.setData("text/plain", id); } catch (x) {} }}
onDragEnd={() => { setPanelDrag(null); setPanelOver(null); }}
title={t("layout.dragReorder")} aria-label={t("layout.dragReorder")}
className="w-7 h-7 rounded-md flex items-center justify-center text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] cursor-grab active:cursor-grabbing">
{t(meta.labelKey)}
pMove(id, -1)} disabled={idx <= 0}
title={t("layout.moveLeft")} aria-label={t("layout.moveLeft")}
className="w-7 h-7 rounded-md flex items-center justify-center text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--primary))] disabled:opacity-30 disabled:pointer-events-none">
pMove(id, 1)} disabled={idx >= orderedVisible.length - 1}
title={t("layout.moveRight")} aria-label={t("layout.moveRight")}
className="w-7 h-7 rounded-md flex items-center justify-center text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--primary))] disabled:opacity-30 disabled:pointer-events-none">
{meta.required ? (
) : (
pToggle(id)} title={t("layout.hidePanel")} aria-label={t("layout.hidePanel")}
className="w-7 h-7 rounded-md flex items-center justify-center text-[hsl(var(--muted-foreground))] hover:text-[hsl(0_84%_70%)] hover:bg-[hsl(0_84%_60%/0.12)]">
)}
);
};
return (
{/* Toolbar */}
{t("focus.title")}
{window.DPMDate ? window.DPMDate.fmt(window.DPMDate.today(), { weekday: "long", month: "long", day: "numeric" }, window.__dpmLang === "fr" ? "fr" : "en") : "Saturday May 24"} · {taskQueue.length} tasks · 3h planned
setCustomizing(c => !c)}
className={cn(
"inline-flex items-center gap-2 h-8 px-3 rounded-[8px] text-[13px] font-medium border transition-colors whitespace-nowrap",
customizing
? "border-[hsl(var(--primary)/0.55)] bg-[hsl(var(--primary)/0.12)] text-[hsl(var(--foreground))]"
: "border-[hsl(var(--border))] text-[hsl(var(--foreground))] hover:bg-[hsl(var(--accent))]"
)}
>
{layoutVisible}/{layoutTotal}
setRoute("calendar")}>{t("nav.calendar")}
setRoute("daily-planning")}>Re-plan
{t("tasks.new")}
{customizing && (
)}
{orderedVisible.length === 0 ? (
{t("layout.editHint")}
{t("common.reset") || "Reset"}
) : (
{orderedVisible.map(id => {
const meta = panelMeta[id];
const isOver = customizing && panelOver === id && panelDrag && panelDrag !== id;
return (
{ if (customizing) { setPanelDrag(id); e.dataTransfer.effectAllowed = "move"; try { e.dataTransfer.setData("text/plain", id); } catch (x) {} } }}
onDragOver={(e) => { if (customizing && panelDrag && panelDrag !== id) { e.preventDefault(); e.dataTransfer.dropEffect = "move"; setPanelOver(id); } }}
onDragLeave={(e) => { if (e.currentTarget.contains(e.relatedTarget)) return; if (panelOver === id) setPanelOver(null); }}
onDrop={(e) => { e.preventDefault(); if (customizing && panelDrag && panelDrag !== id) pReorder(panelDrag, id); setPanelDrag(null); setPanelOver(null); }}
onDragEnd={() => { setPanelDrag(null); setPanelOver(null); }}
style={isMobile ? {} : { flexGrow: meta.weight, flexBasis: 0 }}
className={cn(
"min-w-0 flex flex-col",
!isMobile && "min-h-0",
meta.selfStart && !customizing && "lg:self-start",
customizing && "rounded-[14px] border-2 border-dashed p-2 transition-colors",
customizing && (isOver ? "border-[hsl(var(--primary))] bg-[hsl(var(--primary)/0.06)]" : "border-[hsl(var(--primary)/0.35)]"),
panelDrag === id && "opacity-40"
)}
>
{customizing &&
}
{renderPanel(id)}
);
})}
)}
{customizing && window.CustomizePanel && (
setCustomizing(false)}
visibleCount={layoutVisible}
totalCount={layoutTotal}
widgets={focusPanelsT}
surfaceLabel={t("layout.viewSurface")}
order={pOrder}
onReorder={pReorder}
onMove={pMove}
/>
)}
);
}
function MiniTimeline() {
const items = [
{ h: "09:00", t: "Team stand-up", type: "meeting", done: true },
{ h: "09:30", t: "Desjardins proposal", type: "task", active: true, h2: "13:47 → 15:47" },
{ h: "14:30", t: "Quick stand-up", type: "meeting", up: true },
{ h: "15:00", t: "Desjardins call", type: "meeting" },
{ h: "16:30", t: "Review PR #142", type: "task" },
{ h: "17:15", t: "Free focus", type: "focus" },
{ h: "19:00", t: "Reading", type: "habit" },
];
return (
{items.map((it, i) => (
{it.h}
{it.t}
{it.h2 &&
{it.h2}
}
{it.up && !it.h2 &&
In 2 min
}
))}