import React, { useState, useRef, useEffect } from "react"; const QUADRANTS = [ { key: "do_first", label: "Do First", desc: "Urgent & Important", help: "Tasks you’ll do immediately.", }, { key: "schedule", label: "Schedule", desc: "Not Urgent but Important", help: "Tasks to plan or schedule.", }, { key: "delegate", label: "Delegate", desc: "Urgent but Not Important", help: "Who else can help do these?", }, { key: "eliminate", label: "Eliminate", desc: "Neither Urgent nor Important", help: "Consider removing these tasks.", }, ]; const QUADRANT_GRID = [ ["do_first", "schedule"], ["delegate", "eliminate"], ]; function getQuadrantLabel(key) { const q = QUADRANTS.find((q) => q.key === key); return q ? q.label : ""; } export default function App() { // Shared task state const [tasks, setTasks] = useSharedStorage("daily_eisenhower_tasks", []); // UI state const [input, setInput] = useState(""); const [draggingId, setDraggingId] = useState(null); const [dragTarget, setDragTarget] = useState(null); const inputRef = useRef(null); // Keyboard focus on new list useEffect(() => { if (inputRef.current) inputRef.current.focus(); }, []); // Add a new task to Unsorted list (will pop into Do First by default) function addTask(e) { e.preventDefault(); const raw = input.trim(); if (!raw) return; setTasks((prev) => [ ...prev, { id: Date.now() + Math.random().toString(36).slice(2), text: raw, quadrant: "do_first", created: Date.now(), }, ]); setInput(""); inputRef.current?.focus(); } function onDragStart(id) { setDraggingId(id); } function onDragEnd() { setDraggingId(null); setDragTarget(null); } function onDropQuadrant(quadrant) { if (!draggingId) return; setTasks((prev) => prev.map((t) => (t.id === draggingId ? { ...t, quadrant } : t)) ); setDraggingId(null); setDragTarget(null); } function handleTaskDelete(id) { setTasks((prev) => prev.filter((t) => t.id !== id)); } function handleTaskEdit(id, value) { setTasks((prev) => prev.map((t) => (t.id === id ? { ...t, text: value } : t)) ); } function handleClear() { if (!window.confirm("Clear all tasks?")) return; setTasks([]); } // Allow inline editing function TaskItem({ t, onDelete, onEdit }) { const [editing, setEditing] = useState(false); const [local, setLocal] = useState(t.text); const editRef = useRef(null); useEffect(() => { if (editing && editRef.current) editRef.current.focus(); }, [editing]); return (

onDragStart(t.id)} onDragEnd={onDragEnd} tabIndex={0} aria-label={t.text} onKeyDown={(e) => { if (e.key === "Enter") setEditing(true); }} > {editing ? ( setLocal(e.target.value)} onBlur={() => { setEditing(false); if (local.trim()) onEdit(local.trim()); }} onKeyDown={(e) => { if (e.key === "Enter") { setEditing(false); if (local.trim()) onEdit(local.trim()); } if (e.key === "Escape") setEditing(false); }} /> ) : ( setEditing(true)} className="block truncate cursor-text" title="Click to edit" > {t.text} )}

); } // Collect tasks by quadrant const quadrantTasks = { do_first: [], schedule: [], delegate: [], eliminate: [] }; tasks.forEach(t => { if (quadrantTasks[t.quadrant]) { quadrantTasks[t.quadrant].push(t); } }); return (

{/* Title & desc */}

Daily Priorities Matrix

Sort your daily to-dos by urgency & importance — drag tasks into quadrants below. Crush procrastination and focus on what matters!

{!!tasks.length && ( )}

{/* Matrix */}

{/* Render quadrants */} {QUADRANT_GRID.flatMap((row, ridx) => row.map((qkey, cidx) => { const quadrant = QUADRANTS.find(q => q.key === qkey); return (

{ e.preventDefault(); setDragTarget(qkey); }} onDrop={e => { e.preventDefault(); onDropQuadrant(qkey); }} onDragLeave={e => { setDragTarget(null) }} aria-label={quadrant.label} tabIndex={-1} >

{quadrant.label}

{quadrant.desc}

{quadrantTasks[qkey].length ? ( quadrantTasks[qkey].map(task => ( handleTaskDelete(task.id)} onEdit={val => handleTaskEdit(task.id, val)} /> )) ) : (

{qkey === "do_first" ? "Drop urgent & important tasks here" : qkey === "schedule" ? "Plan important but not urgent tasks" : qkey === "delegate" ? "Who can help with these?" : "These may not need your focus now"}

)}

{quadrant.help}

); }))} {/* Quadrant axes labels */}

IMPORTANT

NOT IMPORTANT

URGENT

NOT URGENT

{/* Hint & how to use */}

Drag & drop tasks into quadrants to quickly sort them by priority. Tap a task to edit, or click ✕ to delete.

); }