Scribd
Upload
6 views12 pages

Cortex Planner

The document is a React application that manages tasks and reflections, utilizing an AI model for task parsing and insights. It includes features for task scheduling, notifications, and data export in various formats. The app also tracks task completion and provides a user interface for managing tasks and reflections effectively.

Uploaded by

Berreta M9
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views12 pages

Cortex Planner

The document is a React application that manages tasks and reflections, utilizing an AI model for task parsing and insights. It includes features for task scheduling, notifications, and data export in various formats. The app also tracks task completion and provides a user interface for managing tasks and reflections effectively.

Uploaded by

Berreta M9
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

import { useState, useEffect, useCallback, useRef } from "react";

const CLAUDE_MODEL = "claude-sonnet-4-20250514";


const today = () => new Date().toISOString().split("T")[0];
const fmtDate = d => new Date(d + "T00:00:00").toLocaleDateString("en-US", { weekday:"short",
const fmtTime = t => { if (!t) return ""; const [h,m] = [Link](":"); const ap = +h>=12?"PM":
const uid = () => [Link]().toString(36).slice(2,9);
const SRS_INTERVALS = [1,3,7,14,30];
function addDays(dateStr, n) { const d = new Date(dateStr+"T00:00:00"); [Link]([Link]()
const CATEGORIES = ["Study","Work","Health","Personal","Finance","Other"];
const PRIORITY_COLOR = { High:"#ef4444", Medium:"#f59e0b", Low:"#22c55e" };
const CAT_COLOR = { Study:"#8b5cf6", Work:"#3b82f6", Health:"#10b981", Personal:"#f59e0b", Fi

async function callClaude(messages, system) {


const res = await fetch("[Link] {
method:"POST", headers:{"Content-Type":"application/json"},
body: [Link]({ model: CLAUDE_MODEL, max_tokens:1200, system, messages })
});
const data = await [Link]();
return [Link]?.map(b=>[Link]||"").join("") || "";
}

async function loadData(key) { try { const r = await [Link](key); return r ? JSON


async function saveData(key, val) { try { await [Link](key, [Link](val));

function Tag({ icon, label, color }) {


return <span style={{ background:"#12122a", border:"1px solid #2d2b55", borderRadius:6, pad
}

function TaskCard({ task, onToggle, onDelete, onEdit }) {


return (
<div style={{ background:"#1a1a2e", border:"1px solid", borderColor:[Link]?"#1f29
<div style={{ display:"flex", alignItems:"flex-start", gap:12 }}>
<button onClick={()=>onToggle([Link])} style={{ width:26, height:26, borderRadius:8,
{[Link]?"✓":""}
</button>
<div style={{ flex:1, minWidth:0 }}>
<div style={{ fontSize:15, fontWeight:600, color:[Link]?"#6b7280":"#e2e8f0"
<div style={{ display:"flex", flexWrap:"wrap", gap:5, marginTop:6 }}>
{[Link] && <Tag icon=" " label={fmtTime([Link])} />}
{[Link] && <Tag icon=" " label={`${[Link]}m`} />}
<Tag icon=" " label={[Link]} color={CAT_COLOR[[Link]]} />
<Tag icon=" " label={[Link]} color={PRIORITY_COLOR[[Link]]} />
{[Link] && <Tag icon=" " label="Review" color="#a78bfa" />}
</div>
</div>
<div style={{ display:"flex", flexDirection:"column", gap:4 }}>
<button onClick={()=>onEdit(task)} style={{ background:"none", border:"none", color
<button onClick={()=>onDelete([Link])} style={{ background:"none", border:"none",
</div>
</div>
</div>
);
}

export default function App() {


const [view, setView] = useState("today");
const [tasks, setTasks] = useState([]);
const [reflections, setReflections] = useState([]);
const [loading, setLoading] = useState(true);
const [aiInput, setAiInput] = useState("");
const [aiParsing, setAiParsing] = useState(false);
const [pendingTask, setPendingTask] = useState(null);
const [showReflect, setShowReflect] = useState(false);
const [reflectText, setReflectText] = useState("");
const [reflectSaving, setReflectSaving] = useState(false);
const [aiInsight, setAiInsight] = useState("");
const [toast, setToast] = useState(null);
const [editTask, setEditTask] = useState(null);
const [report, setReport] = useState(null);
const [reportLoading, setReportLoading] = useState(false);
const [calMonth, setCalMonth] = useState(() => { const n=new Date(); return `${[Link]
const [dragTaskId, setDragTaskId] = useState(null);
const [dragOverDate, setDragOverDate] = useState(null);
const notifGranted = useRef(false);

useEffect(() => {
(async () => {
const t = await loadData("cp:tasks"); if (t) setTasks(t);
const r = await loadData("cp:reflections"); if (r) setReflections(r);
setLoading(false);
})();
if ("Notification" in window && [Link]==="granted") [Link]
}, []);

const saveTasks = useCallback(async t => { setTasks(t); await saveData("cp:tasks", t); }, [


const saveReflections = useCallback(async r => { setReflections(r); await saveData("cp:refl
const showToast = (msg, color="#22c55e") => { setToast({msg,color}); setTimeout(()=>setToas

// ── Notifications ─────────────────────────────────────────────────────────
async function requestNotifications() {
if (!("Notification" in window)) { showToast("Notifications not supported in this browser
const perm = await [Link]();
if (perm==="granted") { [Link]=true; showToast("Notifications enabled! ")
else showToast("Notifications blocked","#f59e0b");
}

function scheduleNotifications(taskList) {
if (![Link]) return;
[Link](t => ![Link] && [Link] >= today() && [Link]).forEach(t => {
const dt = new Date(`${[Link]}T${[Link]}`);
const ms = [Link]() - [Link]() - 10*60*1000; // 10min before
if (ms > 0 && ms < 86400000) {
setTimeout(() => { try { new Notification(` Starting soon: ${[Link]}`, { body:`In
}
});
}

// ── Parse task ────────────────────────────────────────────────────────────


async function parseTask() {
if (![Link]()) return;
setAiParsing(true);
try {
const raw = await callClaude(
[{ role:"user", content:`Today is ${today()}. Parse: "${aiInput}"` }],
`You are a task parser. Return ONLY valid JSON with: title(string), date(YYYY-MM-DD),
);
const parsed = [Link]([Link](/```json|```/g,"").trim());
setPendingTask({ ...parsed, id:uid(), completed:false, missed:false, srsLevel:0 });
} catch { showToast("Couldn't parse task. Try again.","#ef4444"); }
setAiParsing(false);
}

function confirmTask() {
if (!pendingTask) return;
const newTasks = [...tasks, pendingTask];
if ([Link]) {
SRS_INTERVALS.forEach((days,i) => [Link]({
id:uid(), title:` Review: ${[Link]}`,
date:addDays([Link],days), time:[Link],
duration:[Link](([Link]||60)*0.3),
priority:"Medium", category:"Study", deadline:null,
isStudy:false, isReview:true, parentId:[Link],
srsLevel:i+1, completed:false, missed:false, recurrence:"none"
}));
}
saveTasks(newTasks);
scheduleNotifications(newTasks);
setAiInput(""); setPendingTask(null);
showToast("Task added"+([Link]?" + 5 review sessions!":"!"));
}

function toggleTask(id) { saveTasks([Link](t=>[Link]===id?{...t,completed:![Link]}:t)


function deleteTask(id) { saveTasks([Link](t=>[Link]!==id)); showToast("Deleted","#6b72

// ── Edit task ─────────────────────────────────────────────────────────────


function saveEdit() {
if (!editTask) return;
saveTasks([Link](t=>[Link]===[Link]?editTask:t));
setEditTask(null); showToast("Task updated!");
}

// ── Reflection ────────────────────────────────────────────────────────────
async function saveReflection() {
if (![Link]()) return;
setReflectSaving(true);
const td = [Link](t=>[Link]===today());
const insight = await callClaude(
[{ role:"user", content:`Reflection: "${reflectText}". Completed ${[Link](t=>[Link]
"You are a productivity coach. Be concise, warm, and actionable."
);
const entry = { id:uid(), date:today(), text:reflectText, insight, done:[Link](t=>[Link]
await saveReflections([...reflections, entry]);
setAiInsight(insight); setReflectText(""); setReflectSaving(false); setShowReflect(false)
showToast("Reflection saved!");
}

// ── Reports ───────────────────────────────────────────────────────────────
async function generateReport(period) {
setReportLoading(true); setReport(null);
const now = new Date();
let from, label;
if (period==="weekly") { from = addDays(today(),-7); label="Weekly"; }
else if (period==="monthly") { from = addDays(today(),-30); label="Monthly"; }
else { from = addDays(today(),-365); label="Yearly"; }
const slice = [Link](t=>[Link]>=from && [Link]<=today());
const refSlice = [Link](r=>[Link]>=from && [Link]<=today());
const summary = `Tasks (${from} to ${today()}): total=${[Link]}, completed=${slice.
const text = await callClaude(
[{ role:"user", content:summary }],
`You are a productivity analyst. Generate a ${label} Report with sections: ## Summary,
);
setReport({ label, from, to:today(), text, tasks:slice });
setReportLoading(false);
}
function exportData(format) {
if (format==="json") {
const blob = new Blob([[Link]({tasks,reflections},null,2)],{type:"application/j
download(blob,"[Link]");
} else if (format==="markdown") {
let md = `# Cortex Planner Export\n_${new Date().toLocaleDateString()}_\n\n## Tasks\n`;
[Link](t=>{ md+=`- [${[Link]?"x":" "}] **${[Link]}** (${[Link]}${[Link]?"
md+=`\n## Reflections\n`;
[Link](r=>{ md+=`### ${[Link]}\n${[Link]}\n\n> AI: ${[Link]||""}\n\n`;
if (report) md+=`\n---\n# ${[Link]} Report\n${[Link]}`;
download(new Blob([md],{type:"text/markdown"}),"[Link]");
} else if (format==="pdf") {
[Link]();
}
showToast(`Exported as ${[Link]()}`);
}

function download(blob, name) {


const a = [Link]("a"); [Link]=[Link](blob); [Link]=name;
}

// ── Calendar ──────────────────────────────────────────────────────────────
const [ym, yyyymm] = (() => { const [y,m]=[Link]("-").map(Number); return [[y,m],ca
function calDays() {
const first = new Date(ym[0],ym[1]-1,1).getDay();
const days = new Date(ym[0],ym[1],0).getDate();
return { first, days };
}
const { first:calFirst, days:calDays2 } = calDays();
function calDateStr(d) { return `${ym[0]}-${String(ym[1]).padStart(2,"0")}-${String(d).padS

function onDrop(dateStr) {
if (!dragTaskId) return;
saveTasks([Link](t=>[Link]===dragTaskId?{...t,date:dateStr}:t));
setDragTaskId(null); setDragOverDate(null);
showToast(`Task moved to ${fmtDate(dateStr)}`);
}

// ── Derived ───────────────────────────────────────────────────────────────
const todayTasks = [Link](t=>[Link]===today()).sort((a,b)=>([Link]||"99:99").localeCo
const upcomingTasks = [Link](t=>[Link]>today()).sort((a,b)=>[Link]([Link]
const reviewQueue = [Link](t=>[Link]&&![Link]&&[Link]<=today());
const completedCount = [Link](t=>[Link]).length;
const rate = [Link] ? [Link](completedCount/[Link]*100) : 0;
const catStats = [Link](c=>({ cat:c, count:[Link](t=>[Link]===c).length,
if (loading) return (
<div style={{ background:"#0f0f1a", minHeight:"100vh", display:"flex", alignItems:"center
<div style={{ color:"#a78bfa", fontSize:18 }}>Loading Cortex Planner…</div>
</div>
);

return (
<div style={{ background:"#0f0f1a", minHeight:"100vh", color:"#e2e8f0", fontFamily:"-appl

{/* Header */}


<div style={{ background:"linear-gradient(135deg,#1e1b4b,#312e81)", padding:"20px 20px
<div style={{ fontSize:22, fontWeight:700, color:"#a78bfa", letterSpacing:-0.5 }}>
<div style={{ fontSize:13, color:"#7c6fcd", marginTop:2 }}>{new Date().toLocaleDateSt
</div>

{toast && <div style={{ position:"fixed", top:16, left:"50%", transform:"translateX(-50

{/* AI Input */}


<div style={{ padding:"16px 16px 0" }}>
<div style={{ background:"#1a1a2e", border:"1px solid #2d2b55", borderRadius:14, padd
<div style={{ fontSize:13, color:"#7c6fcd", marginBottom:8, fontWeight:600 }}> Ad
<div style={{ display:"flex", gap:8 }}>
<input value={aiInput} onChange={e=>setAiInput([Link])} onKeyDown={e=>e.k
placeholder="e.g. Study calculus tomorrow 7pm for 2 hours"
style={{ flex:1, background:"#0f0f1a", border:"1px solid #2d2b55", borderRadius
<button onClick={parseTask} disabled={aiParsing} style={{ background:"#7c3aed", c
{aiParsing?"…":"Parse"}
</button>
</div>
{pendingTask && (
<div style={{ marginTop:12, background:"#12122a", borderRadius:12, padding:12, bo
<div style={{ fontSize:13, color:"#a78bfa", fontWeight:700, marginBottom:8 }}>A
<div style={{ fontSize:15, fontWeight:700, marginBottom:6 }}>{[Link]
<div style={{ display:"flex", flexWrap:"wrap", gap:6, marginBottom:10 }}>
{[
{ label:fmtDate([Link]), icon:" " },
[Link] ? { label:fmtTime([Link]), icon:" " } : null,
{ label:`${[Link]}min`, icon:" " },
{ label:[Link], icon:" ", color:PRIORITY_COLOR[pendingTask.p
{ label:[Link], icon:" ", color:CAT_COLOR[[Link]
[Link] ? { label:"SRS enabled", icon:" ", color:"#a78bfa" } :
].filter(Boolean).map((b,i)=>(
<span key={i} style={{ background:"#1e1b4b", borderRadius:8, padding:"3px 8
))}
</div>
<div style={{ display:"flex", gap:8 }}>
<button onClick={confirmTask} style={{ flex:1, background:"#7c3aed", color:"#
<button onClick={()=>setPendingTask(null)} style={{ flex:1, background:"#2d2b
</div>
</div>
)}
</div>
</div>

{/* Nav */}


<div style={{ display:"flex", gap:4, padding:"12px 16px 0", overflowX:"auto" }}>
{[["today"," ","Today"],["upcoming"," ","Upcoming"],["calendar"," ","Calendar"],["
<button key={v} onClick={()=>setView(v)} style={{ background:view===v?"#7c3aed":"#1
{icon} {label}
{v==="reviews"&&[Link]>0&&<span style={{ background:"#ef4444", color:
</button>
))}
</div>

{/* ── TODAY ── */}


{view==="today" && (
<div style={{ padding:"16px 16px 0" }}>
<div style={{ display:"flex", gap:10, marginBottom:16 }}>
{[{ label:"Today", val:[Link], color:"#7c3aed" },{ label:"Done", val:t
<div key={i} style={{ flex:1, background:"#1a1a2e", border:"1px solid #2d2b55",
<div style={{ fontSize:22, fontWeight:800, color:[Link] }}>{[Link]}</div>
<div style={{ fontSize:11, color:"#7c6fcd", marginTop:2 }}>{[Link]}</div>
</div>
))}
</div>
{aiInsight && <div style={{ background:"#1a1a2e", border:"1px solid #4c1d95", borde
{[Link]===0
? <div style={{ textAlign:"center", padding:"40px 20px", color:"#4c4880" }}><div
: [Link](t=><TaskCard key={[Link]} task={t} onToggle={toggleTask} onDelete=
}
<div style={{ display:"flex", gap:10, marginTop:16 }}>
<button onClick={()=>setShowReflect(true)} style={{ flex:1, background:"linear-gr
<button onClick={requestNotifications} style={{ flex:1, background:"#1a1a2e", bor
</div>
</div>
)}

{/* ── UPCOMING ── */}


{view==="upcoming" && (
<div style={{ padding:"16px 16px 0" }}>
{[Link]===0
? <div style={{ textAlign:"center", padding:"40px 20px", color:"#4c4880" }}><div
: (() => {
const grouped = {};
[Link](t=>{ if (!grouped[[Link]]) grouped[[Link]]=[]; grouped[
return [Link](grouped).map(([date,ts])=>(
<div key={date} style={{ marginBottom:16 }}>
<div style={{ fontSize:13, color:"#7c6fcd", fontWeight:700, marginBottom:
{[Link](t=><TaskCard key={[Link]} task={t} onToggle={toggleTask} onDelete={
</div>
));
})()
}
</div>
)}

{/* ── CALENDAR ── */}


{view==="calendar" && (
<div style={{ padding:"16px 16px 0" }}>
<div style={{ display:"flex", alignItems:"center", justifyContent:"space-between",
<button onClick={()=>{ const [y,m]=[Link]("-").map(Number); const d=new D
<div style={{ fontWeight:700, color:"#e2e8f0", fontSize:16 }}>{new Date(ym[0],ym[
<button onClick={()=>{ const [y,m]=[Link]("-").map(Number); const d=new D
</div>
<div style={{ display:"grid", gridTemplateColumns:"repeat(7,1fr)", gap:3, marginBot
{["Su","Mo","Tu","We","Th","Fr","Sa"].map(d=><div key={d} style={{ textAlign:"cen
</div>
<div style={{ display:"grid", gridTemplateColumns:"repeat(7,1fr)", gap:3 }}>
{[Link]({length:calFirst}).map((_,i)=><div key={"e"+i} />)}
{[Link]({length:calDays2}).map((_,i)=>{
const d = i+1;
const ds = calDateStr(d);
const dayTasks = [Link](t=>[Link]===ds);
const isToday = ds===today();
const isOver = dragOverDate===ds;
return (
<div key={d}
onDragOver={e=>{[Link]();setDragOverDate(ds);}}
onDrop={()=>onDrop(ds)}
onDragLeave={()=>setDragOverDate(null)}
style={{ background:isOver?"#2d2b55":isToday?"#1e1b4b":"#1a1a2e", border:`1
<div style={{ fontSize:12, fontWeight:isToday?800:500, color:isToday?"#a78b
{[Link](0,3).map(t=>(
<div key={[Link]} draggable
onDragStart={e=>{[Link]="move";setDragTaskId([Link]
style={{ background:CAT_COLOR[[Link]]+"33", borderLeft:`2px solid $
{[Link]}
</div>
))}
{[Link]>3&&<div style={{ fontSize:9, color:"#7c6fcd", textAlign:"c
</div>
);
})}
</div>
<div style={{ marginTop:12, fontSize:12, color:"#4c4880", textAlign:"center" }}>
</div>
)}

{/* ── REVIEWS ── */}


{view==="reviews" && (
<div style={{ padding:"16px 16px 0" }}>
<div style={{ fontSize:13, color:"#7c6fcd", marginBottom:12 }}>Spaced repetition re
{[Link]===0
? <div style={{ textAlign:"center", padding:"40px 20px", color:"#4c4880" }}><div
: [Link](t=><TaskCard key={[Link]} task={t} onToggle={toggleTask} onDelete
}
</div>
)}

{/* ── ANALYTICS ── */}


{view==="analytics" && (
<div style={{ padding:"16px 16px 0" }}>
<div style={{ background:"#1a1a2e", border:"1px solid #2d2b55", borderRadius:14, pa
<div style={{ fontSize:14, fontWeight:700, color:"#a78bfa", marginBottom:8 }}>Ove
<div style={{ fontSize:48, fontWeight:900, color:rate>=75?"#22c55e":rate>=50?"#f5
<div style={{ color:"#7c6fcd", fontSize:13, marginTop:4 }}>{completedCount} of {t
<div style={{ marginTop:12, background:"#0f0f1a", borderRadius:8, height:8 }}>
<div style={{ width:`${rate}%`, height:"100%", borderRadius:8, background:rate>
</div>
</div>
<div style={{ background:"#1a1a2e", border:"1px solid #2d2b55", borderRadius:14, pa
<div style={{ fontSize:14, fontWeight:700, color:"#a78bfa", marginBottom:12 }}>By
{[Link]===0 ? <div style={{ color:"#4c4880", fontSize:13 }}>No tasks yet
<div key={[Link]} style={{ marginBottom:10 }}>
<div style={{ display:"flex", justifyContent:"space-between", marginBottom:4
<span style={{ fontSize:13, color:CAT_COLOR[[Link]], fontWeight:600 }}> {c
<span style={{ fontSize:13, color:"#94a3b8" }}>{[Link]}/{[Link]}</span>
</div>
<div style={{ background:"#0f0f1a", borderRadius:6, height:6 }}>
<div style={{ width:`${[Link]?[Link]([Link]/[Link]*100):0}%`, height:
</div>
</div>
))}
</div>
<div style={{ background:"#1a1a2e", border:"1px solid #2d2b55", borderRadius:14, pa
<div style={{ fontSize:14, fontWeight:700, color:"#a78bfa", marginBottom:12 }}>St
<div style={{ display:"flex", gap:10 }}>
{[{ label:"Study Tasks", val:[Link](t=>[Link]).length, color:"#8b5cf6"
<div key={i} style={{ flex:1, background:"#0f0f1a", borderRadius:10, padding:
<div style={{ fontSize:20, fontWeight:800, color:[Link] }}>{[Link]}</div>
<div style={{ fontSize:10, color:"#7c6fcd", marginTop:2 }}>{[Link]}</div>
</div>
))}
</div>
</div>
</div>
)}

{/* ── REPORTS ── */}


{view==="reports" && (
<div style={{ padding:"16px 16px 0" }}>
<div style={{ fontSize:14, fontWeight:700, color:"#a78bfa", marginBottom:12 }}> A
<div style={{ display:"flex", gap:8, marginBottom:16 }}>
{[["weekly","Weekly"],["monthly","Monthly"],["yearly","Yearly"]].map(([p,l])=>(
<button key={p} onClick={()=>generateReport(p)} disabled={reportLoading}
style={{ flex:1, background:"#1a1a2e", border:"1px solid #2d2b55", borderRadi
{l}
</button>
))}
</div>
{reportLoading && <div style={{ textAlign:"center", padding:30, color:"#7c6fcd" }}>
{report && (
<div style={{ background:"#1a1a2e", border:"1px solid #2d2b55", borderRadius:14,
<div style={{ fontSize:16, fontWeight:700, color:"#a78bfa", marginBottom:4 }}>{
<div style={{ fontSize:12, color:"#7c6fcd", marginBottom:12 }}>{fmtDate(report.
<div style={{ fontSize:13, color:"#e2e8f0", lineHeight:1.7, whiteSpace:"pre-wra
</div>
)}
{/* Export */}
<div style={{ marginTop:16, background:"#1a1a2e", border:"1px solid #2d2b55", borde
<div style={{ fontSize:14, fontWeight:700, color:"#a78bfa", marginBottom:12 }}>
<div style={{ display:"flex", gap:8 }}>
{[["json","JSON Backup","#06b6d4"],["markdown","Markdown","#a78bfa"],["pdf","Pr
<button key={f} onClick={()=>exportData(f)} style={{ flex:1, background:"#0f0
))}
</div>
</div>
</div>
)}

{/* ── REFLECTIONS ── */}


{view==="reflections" && (
<div style={{ padding:"16px 16px 0" }}>
<button onClick={()=>setShowReflect(true)} style={{ width:"100%", background:"linea
+ Add Today's Reflection
</button>
{[Link]===0
? <div style={{ textAlign:"center", padding:"40px 20px", color:"#4c4880" }}><div
: [...reflections].reverse().map(r=>(
<div key={[Link]} style={{ background:"#1a1a2e", border:"1px solid #2d2b55", bord
<div style={{ display:"flex", justifyContent:"space-between", marginBottom:6
<span style={{ fontSize:12, color:"#7c6fcd", fontWeight:600 }}>{fmtDate(r.d
<span style={{ fontSize:12, color:[Link]===[Link]?"#22c55e":"#f59e0b" }}>{
</div>
<div style={{ fontSize:14, color:"#e2e8f0", marginBottom:8, lineHeight:1.5 }}
{[Link] && <div style={{ fontSize:13, color:"#c4b5fd", background:"#12122a
</div>
))
}
</div>
)}

{/* ── Edit Modal ── */}


{editTask && (
<div style={{ position:"fixed", inset:0, background:"rgba(0,0,0,0.75)", display:"flex
<div style={{ background:"#1a1a2e", borderRadius:"20px 20px 0 0", padding:24, width
<div style={{ fontSize:17, fontWeight:700, color:"#a78bfa", marginBottom:16 }}>
{[["title","Title","text"],["date","Date","date"],["time","Time","time"],["durati
<div key={k} style={{ marginBottom:12 }}>
<div style={{ fontSize:12, color:"#7c6fcd", marginBottom:4 }}>{l}</div>
<input type={type} value={editTask[k]||""} onChange={e=>setEditTask({...editT
style={{ width:"100%", background:"#0f0f1a", border:"1px solid #2d2b55", bo
</div>
))}
<div style={{ marginBottom:12 }}>
<div style={{ fontSize:12, color:"#7c6fcd", marginBottom:4 }}>Priority</div>
<div style={{ display:"flex", gap:8 }}>
{["High","Medium","Low"].map(p=>(
<button key={p} onClick={()=>setEditTask({...editTask,priority:p})} style={
))}
</div>
</div>
<div style={{ marginBottom:16 }}>
<div style={{ fontSize:12, color:"#7c6fcd", marginBottom:4 }}>Category</div>
<div style={{ display:"flex", flexWrap:"wrap", gap:6 }}>
{[Link](c=>(
<button key={c} onClick={()=>setEditTask({...editTask,category:c})} style={
))}
</div>
</div>
<div style={{ display:"flex", gap:10 }}>
<button onClick={saveEdit} style={{ flex:1, background:"#7c3aed", color:"#fff",
<button onClick={()=>setEditTask(null)} style={{ background:"#2d2b55", color:"#
</div>
</div>
</div>
)}

{/* ── Reflection Modal ── */}


{showReflect && (
<div style={{ position:"fixed", inset:0, background:"rgba(0,0,0,0.7)", display:"flex"
<div style={{ background:"#1a1a2e", borderRadius:"20px 20px 0 0", padding:24, width
<div style={{ fontSize:18, fontWeight:700, color:"#a78bfa", marginBottom:4 }}>
<div style={{ fontSize:13, color:"#7c6fcd", marginBottom:14 }}>How did your day g
<textarea value={reflectText} onChange={e=>setReflectText([Link])} placeh
style={{ width:"100%", background:"#0f0f1a", border:"1px solid #2d2b55", border
<div style={{ display:"flex", gap:10, marginTop:12 }}>
<button onClick={saveReflection} disabled={reflectSaving} style={{ flex:1, back
{reflectSaving?"Getting AI insight…":"Save & Get AI Insight"}
</button>
<button onClick={()=>setShowReflect(false)} style={{ background:"#2d2b55", colo
</div>
</div>
</div>
)}

{/* Bottom nav */}


<div style={{ position:"fixed", bottom:0, left:"50%", transform:"translateX(-50%)", wid
{[["today"," ","Today"],["upcoming"," ","Soon"],["calendar"," ","Cal"],["reviews",
<button key={v} onClick={()=>setView(v)} style={{ flex:1, background:"none", border
<span style={{ fontSize:18 }}>{icon}</span>{label}
</button>
))}
</div>
</div>
);
}

You might also like