// Tasks Tab — List + Kanban views // Tasks are tied to scopes of work (SOW-XX), have assignees, due dates, // priority, status, optional CO link, dependencies, and progress. const TASK_STATUS = { "Backlog": { tone: "neutral", order: 0 }, "To Do": { tone: "info", order: 1 }, "In Progress": { tone: "purple", order: 2 }, "Blocked": { tone: "danger", order: 3 }, "Review": { tone: "warning", order: 4 }, "Done": { tone: "success", order: 5 }, }; const TASK_PRIORITY = { "Urgent": { tone: "danger", icon: "alert", label: "P1" }, "High": { tone: "warning", icon: "flag", label: "P2" }, "Med": { tone: "info", icon: "flag", label: "P3" }, "Low": { tone: "neutral", icon: "flag", label: "P4" }, }; const TASKS = [ { id: "T-2041", title: "Verify pile coordinates against revised civil drawings", scope: "SOW-02 Pile Driving", scopeId: "SOW-02", status: "In Progress", priority: "Urgent", progress: 65, due: "05/06/2026", dueDays: 2, est: 8, logged: 5.5, assignee: { initials: "RF", name: "Robert Fox", color: "#76ADFF" }, watchers: [{ initials: "EC", color: "#22863A" }, { initials: "NM", color: "#B279FF" }], tags: ["survey", "qa"], coLink: null, subtasks: 4, subtasksDone: 2, comments: 3, attachments: 2, blockedBy: null, dependsOn: ["T-2034"], }, { id: "T-2042", title: "Predrill 480 piles — north section refusal zone", scope: "SOW-02 Pile Driving", scopeId: "SOW-02", status: "In Progress", priority: "High", progress: 42, due: "05/14/2026", dueDays: 10, est: 64, logged: 28, assignee: { initials: "JL", name: "Jordan Lin", color: "#FF9143" }, watchers: [{ initials: "RF", color: "#76ADFF" }], tags: ["field-work"], coLink: "CO-013", subtasks: 6, subtasksDone: 2, comments: 8, attachments: 5, }, { id: "T-2043", title: "Submit lien waivers — Apex MEP, Cornerstone Glazing", scope: "SOW-05 Electrical", scopeId: "SOW-05", status: "Blocked", priority: "Urgent", progress: 30, due: "05/05/2026", dueDays: 1, est: 4, logged: 2, assignee: { initials: "EC", name: "Emma Connor", color: "#22863A" }, watchers: [], tags: ["compliance", "billing-blocker"], coLink: null, subtasks: 2, subtasksDone: 0, comments: 5, attachments: 1, blockedBy: "Awaiting signed waiver from Apex MEP", }, { id: "T-2044", title: "Receive & inspect 240-module shipment from Solis Energy", scope: "SOW-04 Module Installation", scopeId: "SOW-04", status: "To Do", priority: "High", progress: 0, due: "05/12/2026", dueDays: 8, est: 12, logged: 0, assignee: { initials: "RF", name: "Robert Fox", color: "#76ADFF" }, watchers: [{ initials: "EC", color: "#22863A" }], tags: ["receiving", "qa"], coLink: "CO-014", subtasks: 3, subtasksDone: 0, comments: 1, attachments: 0, }, { id: "T-2045", title: "Install torque tubes — rows A1–A12 east tracker", scope: "SOW-03 Racking", scopeId: "SOW-03", status: "In Progress", priority: "High", progress: 78, due: "05/08/2026", dueDays: 4, est: 80, logged: 62, assignee: { initials: "JL", name: "Jordan Lin", color: "#FF9143" }, watchers: [{ initials: "RF", color: "#76ADFF" }, { initials: "EC", color: "#22863A" }], tags: ["field-work"], coLink: null, subtasks: 12, subtasksDone: 9, comments: 4, attachments: 3, }, { id: "T-2046", title: "Schedule SCADA commissioning walk-through with owner", scope: "SOW-06 Commissioning", scopeId: "SOW-06", status: "To Do", priority: "Med", progress: 0, due: "05/22/2026", dueDays: 18, est: 6, logged: 0, assignee: { initials: "NM", name: "Nick Merley", color: "#B279FF" }, watchers: [], tags: ["commissioning"], coLink: "CO-010", subtasks: 2, subtasksDone: 0, comments: 0, attachments: 0, }, { id: "T-2047", title: "Update SWPPP for 60-day extension — submit to county", scope: "SOW-01 Site Prep", scopeId: "SOW-01", status: "Review", priority: "Med", progress: 90, due: "05/07/2026", dueDays: 3, est: 6, logged: 5, assignee: { initials: "EC", name: "Emma Connor", color: "#22863A" }, watchers: [{ initials: "RF", color: "#76ADFF" }], tags: ["compliance", "permit"], coLink: "CO-009", subtasks: 1, subtasksDone: 1, comments: 2, attachments: 4, }, { id: "T-2048", title: "Review CO-014 expansion impact on SOW-04 schedule", scope: "SOW-04 Module Installation", scopeId: "SOW-04", status: "Review", priority: "High", progress: 60, due: "05/06/2026", dueDays: 2, est: 4, logged: 2.5, assignee: { initials: "EC", name: "Emma Connor", color: "#22863A" }, watchers: [{ initials: "NM", color: "#B279FF" }], tags: ["change-order", "scheduling"], coLink: "CO-014", subtasks: 2, subtasksDone: 1, comments: 6, attachments: 1, }, { id: "T-2049", title: "Photograph & log east tracker row foundations", scope: "SOW-02 Pile Driving", scopeId: "SOW-02", status: "Done", priority: "Low", progress: 100, due: "05/01/2026", dueDays: -3, est: 3, logged: 3, assignee: { initials: "RF", name: "Robert Fox", color: "#76ADFF" }, watchers: [], tags: ["documentation"], coLink: null, subtasks: 1, subtasksDone: 1, comments: 1, attachments: 8, completedDate: "05/01/2026", }, { id: "T-2050", title: "Issue RFP for galvanized racking substitute (Unirac)", scope: "SOW-03 Racking", scopeId: "SOW-03", status: "Done", priority: "High", progress: 100, due: "04/24/2026", dueDays: -10, est: 8, logged: 7, assignee: { initials: "JL", name: "Jordan Lin", color: "#FF9143" }, watchers: [{ initials: "EC", color: "#22863A" }], tags: ["procurement"], coLink: "CO-012", subtasks: 3, subtasksDone: 3, comments: 4, attachments: 2, completedDate: "04/22/2026", }, { id: "T-2051", title: "Reconcile certified payroll — week ending 04/26", scope: "SOW-05 Electrical", scopeId: "SOW-05", status: "Backlog", priority: "Med", progress: 0, due: "05/15/2026", dueDays: 11, est: 4, logged: 0, assignee: { initials: "EC", name: "Emma Connor", color: "#22863A" }, watchers: [], tags: ["compliance", "payroll"], coLink: null, subtasks: 0, subtasksDone: 0, comments: 0, attachments: 0, }, { id: "T-2052", title: "Coordinate transformer pad delivery with utility", scope: "SOW-05 Electrical", scopeId: "SOW-05", status: "Backlog", priority: "Low", progress: 0, due: "05/28/2026", dueDays: 24, est: 10, logged: 0, assignee: { initials: "NM", name: "Nick Merley", color: "#B279FF" }, watchers: [], tags: ["coordination"], coLink: null, subtasks: 0, subtasksDone: 0, comments: 0, attachments: 0, }, { id: "T-2053", title: "Walk down DC combiner reconfiguration plan with electricians", scope: "SOW-05 Electrical", scopeId: "SOW-05", status: "To Do", priority: "Med", progress: 0, due: "05/11/2026", dueDays: 7, est: 4, logged: 0, assignee: { initials: "NM", name: "Nick Merley", color: "#B279FF" }, watchers: [{ initials: "JL", color: "#FF9143" }], tags: ["coordination", "field-work"], coLink: "CO-014", subtasks: 1, subtasksDone: 0, comments: 2, attachments: 0, }, { id: "T-2054", title: "Tracker controller Modbus integration test", scope: "SOW-06 Commissioning", scopeId: "SOW-06", status: "Backlog", priority: "High", progress: 0, due: "06/04/2026", dueDays: 31, est: 16, logged: 0, assignee: { initials: "NM", name: "Nick Merley", color: "#B279FF" }, watchers: [], tags: ["commissioning", "testing"], coLink: "CO-010", subtasks: 4, subtasksDone: 0, comments: 0, attachments: 1, }, { id: "T-2055", title: "Daily progress report — site walk 05/04", scope: "SOW-01 Site Prep", scopeId: "SOW-01", status: "Done", priority: "Low", progress: 100, due: "05/04/2026", dueDays: 0, est: 1, logged: 1, assignee: { initials: "RF", name: "Robert Fox", color: "#76ADFF" }, watchers: [], tags: ["documentation", "daily-log"], coLink: null, subtasks: 0, subtasksDone: 0, comments: 0, attachments: 6, completedDate: "05/04/2026", }, ]; const TASK_KANBAN_COLS = ["Backlog", "To Do", "In Progress", "Blocked", "Review", "Done"]; const TasksTab = ({ p }) => { const [view, setView] = React.useState("list"); // "list" | "kanban" const [tasks, setTasks] = React.useState(TASKS); const [search, setSearch] = React.useState(""); const [statusFilter, setStatusFilter] = React.useState("All"); const [scopeFilter, setScopeFilter] = React.useState("All"); const [assigneeFilter, setAssigneeFilter] = React.useState("All"); const [priorityFilter, setPriorityFilter] = React.useState("All"); const [dueSoonOnly, setDueSoonOnly] = React.useState(false); const [groupBy, setGroupBy] = React.useState("Status"); // List grouping const [selectedId, setSelectedId] = React.useState(null); // Move a task to a new status (used by Kanban drag-and-drop) const moveTask = React.useCallback((taskId, newStatus) => { setTasks(prev => prev.map(t => { if (t.id !== taskId || t.status === newStatus) return t; const next = { ...t, status: newStatus }; // Sensible derived updates when moving to Done if (newStatus === "Done") { next.progress = 100; next.completedDate = next.completedDate || "Today"; } else if (t.status === "Done" && newStatus !== "Done") { // Coming out of Done — reset to in-progress-ish if we were 100% if (next.progress === 100) next.progress = 90; next.completedDate = undefined; } return next; })); }, []); const filtered = tasks.filter(t => { if (statusFilter !== "All" && t.status !== statusFilter) return false; if (scopeFilter !== "All" && t.scopeId !== scopeFilter) return false; if (assigneeFilter !== "All" && t.assignee.name !== assigneeFilter) return false; if (priorityFilter !== "All" && t.priority !== priorityFilter) return false; if (dueSoonOnly && !(t.dueDays >= 0 && t.dueDays <= 3 && t.status !== "Done")) return false; if (search && !(`${t.id} ${t.title} ${t.tags.join(" ")}`.toLowerCase()).includes(search.toLowerCase())) return false; return true; }); // KPIs const open = tasks.filter(t => t.status !== "Done"); const overdue = tasks.filter(t => t.dueDays < 0 && t.status !== "Done"); const dueThisWeek = tasks.filter(t => t.dueDays >= 0 && t.dueDays <= 7 && t.status !== "Done"); const blocked = tasks.filter(t => t.status === "Blocked"); const inReview = tasks.filter(t => t.status === "Review"); const doneCount = tasks.filter(t => t.status === "Done").length; const completionPct = Math.round((doneCount / tasks.length) * 100); const assignees = ["All", ...Array.from(new Set(tasks.map(t => t.assignee.name)))]; const scopes = ["All", ...Array.from(new Set(tasks.map(t => t.scopeId)))]; return (
{/* KPI strip */}
0 ? "Need immediate attention" : "All on schedule"} accent={overdue.length > 0 ? "rgb(192,47,50)" : "rgb(34,134,58)"} accentBg={overdue.length > 0 ? "rgba(252,226,226,.5)" : undefined} urgent={overdue.length > 0} /> t.priority === "Urgent" || t.priority === "High").length} high priority`} accent="rgb(178,121,26)" />
{/* Toolbar */}
setSearch(e.target.value)} placeholder="Search tasks, tags, ID…" style={{ width: "100%", boxSizing: "border-box", paddingLeft: 30, paddingRight: 10, height: 30, borderRadius: 9999, border: "1px solid rgb(213,219,225)", fontSize: 13, fontFamily: "inherit", outline: "none", background: "#fff" }} />
{view === "list" && }
{/* View switcher */}
{/* Body */} {view === "list" ? ( ) : ( )}
); }; // --- View Toggle (List | Kanban) --- const ViewToggle = ({ view, onChange }) => (
{[ { id: "list", icon: "list", label: "List" }, { id: "kanban", icon: "layers", label: "Kanban" }, ].map(opt => { const active = view === opt.id; return ( ); })}
); // ================================================================= // LIST VIEW — grouped table with assignee, due, priority, progress, etc. // ================================================================= const TaskListView = ({ tasks, groupBy, setGroupBy, selectedId, setSelectedId }) => { const groups = React.useMemo(() => { if (groupBy === "None") return [{ key: "All", label: `All Tasks (${tasks.length})`, items: tasks }]; if (groupBy === "Status") { return Object.keys(TASK_STATUS) .map(s => ({ key: s, label: s, items: tasks.filter(t => t.status === s), tone: TASK_STATUS[s].tone })) .filter(g => g.items.length > 0); } if (groupBy === "Scope") { const scopes = Array.from(new Set(tasks.map(t => t.scope))); return scopes.map(s => ({ key: s, label: s, items: tasks.filter(t => t.scope === s) })); } if (groupBy === "Assignee") { const people = Array.from(new Set(tasks.map(t => t.assignee.name))); return people.map(p => ({ key: p, label: p, items: tasks.filter(t => t.assignee.name === p), avatar: tasks.find(t => t.assignee.name === p)?.assignee })); } if (groupBy === "Priority") { return Object.keys(TASK_PRIORITY) .map(p => ({ key: p, label: p, items: tasks.filter(t => t.priority === p), tone: TASK_PRIORITY[p].tone })) .filter(g => g.items.length > 0); } return [{ key: "All", label: "All", items: tasks }]; }, [tasks, groupBy]); const [collapsed, setCollapsed] = React.useState({}); const toggleGroup = (k) => setCollapsed(c => ({ ...c, [k]: !c[k] })); return (
{/* Sub-toolbar with group-by */}
{tasks.length} task{tasks.length === 1 ? "" : "s"}
Group by
{["None", "Status", "Scope", "Assignee", "Priority"].map(g => ( ))}
{/* Column header */} {/* Groups */} {groups.map(g => { const isCollapsed = collapsed[g.key]; return (
toggleGroup(g.key)} style={{ padding: "8px 14px", display: "flex", alignItems: "center", gap: 8, background: "rgb(252,252,253)", borderBottom: "1px solid rgb(239,240,242)", cursor: "pointer", fontSize: 12, color: "rgb(65,69,82)", fontWeight: 600, userSelect: "none" }}> {g.tone && } {g.avatar && } {g.label} {g.items.length}
{!isCollapsed && g.items.map((t, i) => ( setSelectedId(t.id === selectedId ? null : t.id)} isLast={i === g.items.length - 1} /> ))}
); })} {tasks.length === 0 && (
No tasks match these filters.
)} {selectedId && ( t.id === selectedId)} onClose={() => setSelectedId(null)} /> )}
); }; // 30 (handle) | flex (title+meta) | 90 (priority) | 130 (assignee) | 130 (due) | 130 (progress) | 110 (links) const COL_TEMPLATE = "26px minmax(0,1fr) 92px 130px 130px 130px 110px"; const TaskListHeader = () => (
Task Priority Assignee Due Progress Activity
); const TaskListRow = ({ task, isSelected, onClick, isLast }) => { const [hover, setHover] = React.useState(false); const [checked, setChecked] = React.useState(task.status === "Done"); const overdue = task.dueDays < 0 && task.status !== "Done"; const dueSoon = task.dueDays >= 0 && task.dueDays <= 2 && task.status !== "Done"; const pri = TASK_PRIORITY[task.priority]; const stat = TASK_STATUS[task.status]; return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ display: "grid", gridTemplateColumns: COL_TEMPLATE, gap: 12, padding: "12px 14px", borderBottom: isLast ? "none" : "1px solid rgb(239,240,242)", background: isSelected ? "rgba(232,233,246,.4)" : hover ? "rgb(252,252,253)" : "#fff", borderLeft: isSelected ? "3px solid rgb(83,74,255)" : "3px solid transparent", paddingLeft: isSelected ? 11 : 14, cursor: "pointer", alignItems: "center", fontSize: 13, transition: "background 100ms" }}> {/* Checkbox / status dot */}
{ e.stopPropagation(); setChecked(!checked); }} style={{ width: 18, height: 18, borderRadius: 5, border: checked ? "0" : `1.5px solid ${overdue ? "rgb(192,47,50)" : "rgb(213,219,225)"}`, background: checked ? "rgb(34,134,58)" : "#fff", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, transition: "all 120ms" }}> {checked && }
{/* Title + meta */}
{task.id} {task.status}
{task.title}
{task.scope} {task.coLink && ( {task.coLink} )} {task.tags.slice(0, 2).map(tag => ( {tag} ))}
{/* Priority */}
{/* Assignee */}
{task.assignee.name}
{/* Due */}
{task.due} {task.status === "Done" ? `Done ${task.completedDate || ""}` : overdue ? `${Math.abs(task.dueDays)}d overdue` : task.dueDays === 0 ? "Today" : task.dueDays === 1 ? "Tomorrow" : `in ${task.dueDays}d`}
{/* Progress */}
{task.progress}% {task.logged}/{task.est}h
{task.subtasks > 0 && ( {task.subtasksDone}/{task.subtasks} subtasks )}
{/* Activity meta */}
{task.comments > 0 && ( {task.comments} )} {task.attachments > 0 && ( {task.attachments} )} {task.watchers.length > 0 && ( )}
); }; const PriorityPill = ({ priority }) => { const cfg = TASK_PRIORITY[priority]; const t = TONES[cfg.tone]; return ( {priority} ); }; // ================================================================= // KANBAN VIEW — with HTML5 drag-and-drop between status columns // ================================================================= const TaskKanbanView = ({ tasks, setSelectedId, onMoveTask }) => { const [draggingId, setDraggingId] = React.useState(null); const [dragOverCol, setDragOverCol] = React.useState(null); const cols = TASK_KANBAN_COLS.map(s => ({ status: s, items: tasks.filter(t => t.status === s).sort((a, b) => { const order = { Urgent: 0, High: 1, Med: 2, Low: 3 }; return order[a.priority] - order[b.priority]; }), })); const handleDragStart = (taskId) => setDraggingId(taskId); const handleDragEnd = () => { setDraggingId(null); setDragOverCol(null); }; const handleDragOverCol = (status) => setDragOverCol(status); const handleDropOnCol = (status) => { if (draggingId) onMoveTask(draggingId, status); setDraggingId(null); setDragOverCol(null); }; return (
{cols.map(col => ( ))}
); }; const KanbanColumn = ({ status, items, setSelectedId, isDragOver, draggingId, onDragStart, onDragEnd, onDragOverCol, onDropOnCol }) => { const cfg = TASK_STATUS[status]; const t = TONES[cfg.tone]; const isDraggingActive = draggingId != null; return (
{ if (isDraggingActive) { e.preventDefault(); onDragOverCol(status); } }} onDragOver={(e) => { if (isDraggingActive) { e.preventDefault(); e.dataTransfer.dropEffect = "move"; onDragOverCol(status); } }} onDrop={(e) => { e.preventDefault(); onDropOnCol(status); }} style={{ background: isDragOver ? "rgba(232,233,246,.7)" : "rgb(248,248,251)", border: `1px ${isDragOver ? "dashed" : "solid"} ${isDragOver ? "rgb(83,74,255)" : "rgb(231,233,236)"}`, borderRadius: 12, display: "flex", flexDirection: "column", minHeight: 200, minWidth: 0, transition: "background 120ms, border-color 120ms", }}> {/* Column header */}
{status} {items.length}
{/* Cards */}
{items.map(t => ( setSelectedId(t.id)} isDragging={draggingId === t.id} onDragStart={onDragStart} onDragEnd={onDragEnd} /> ))} {items.length === 0 && (
{isDragOver ? `Drop to move to ${status}` : "No tasks"}
)}
); }; const KanbanCard = ({ task, onClick, isDragging, onDragStart, onDragEnd }) => { const [hover, setHover] = React.useState(false); const overdue = task.dueDays < 0 && task.status !== "Done"; const dueSoon = task.dueDays >= 0 && task.dueDays <= 2 && task.status !== "Done"; const stat = TASK_STATUS[task.status]; // Left accent stripe by priority const priCfg = TASK_PRIORITY[task.priority]; const priColor = TONES[priCfg.tone].fg; return (
{ e.dataTransfer.effectAllowed = "move"; try { e.dataTransfer.setData("text/plain", task.id); } catch (_) {} onDragStart && onDragStart(task.id); }} onDragEnd={() => onDragEnd && onDragEnd()} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ background: "#fff", border: "1px solid rgb(231,233,236)", borderLeft: `3px solid ${priColor}`, borderRadius: 8, padding: "10px 12px", cursor: isDragging ? "grabbing" : "grab", boxShadow: isDragging ? "0 8px 20px rgba(43,46,83,.18)" : hover ? "0 4px 12px rgba(43,46,83,.08)" : "0 1px 2px rgba(43,46,83,.04)", transform: isDragging ? "rotate(1.5deg)" : hover ? "translateY(-1px)" : "none", opacity: isDragging ? 0.6 : 1, transition: "box-shadow 140ms, transform 140ms, opacity 140ms", display: "flex", flexDirection: "column", gap: 8, userSelect: "none", }}> {/* Top row: id + priority + tags */}
{task.id}
{/* Title */}
{task.title}
{/* Scope + CO link chip row */}
{task.scopeId} {task.coLink && ( {task.coLink} )}
{/* Blocked banner */} {task.status === "Blocked" && task.blockedBy && (
{task.blockedBy}
)} {/* Progress bar (only if in-flight) */} {task.progress > 0 && task.progress < 100 && (
{task.progress}% {task.subtasks > 0 && {task.subtasksDone}/{task.subtasks} subtasks}
)} {/* Footer: due, assignee, comments */}
{task.status === "Done" ? `Done` : overdue ? `${Math.abs(task.dueDays)}d overdue` : task.dueDays === 0 ? "Today" : task.dueDays === 1 ? "Tomorrow" : `${task.due.slice(0,5)}`}
{task.comments > 0 && ( {task.comments} )} {task.attachments > 0 && ( {task.attachments} )}
); }; // ================================================================= // DETAIL PANEL — opens on row click in list view // ================================================================= const TaskDetailPanel = ({ task, onClose }) => { if (!task) return null; const overdue = task.dueDays < 0 && task.status !== "Done"; const stat = TASK_STATUS[task.status]; const subtaskList = [ { name: "Confirm survey reference points with civil", done: true }, { name: "Cross-check 480 coordinates against rev-3 PDF", done: true }, { name: "Flag 12 outliers for re-survey by JL crew", done: false }, { name: "Sign off on revised CSV for pile-driving rig", done: false }, ].slice(0, task.subtasks); return (
{/* Header */}
{task.id} {task.status}

{task.title}

{task.status === "Blocked" && } {task.status === "Review" && } {!["Done", "Blocked", "Review"].includes(task.status) && }
{/* Properties */}
{task.assignee.name}
{task.due} {task.status === "Done" ? "· Done" : overdue ? `· ${Math.abs(task.dueDays)}d overdue` : `· in ${task.dueDays}d`}
{task.scope}
{task.coLink ? {task.coLink} : —} {task.logged} / {task.est}h logged {task.watchers.length > 0 ? : —}
{/* Tags */} {task.tags.length > 0 && (
{task.tags.map(tag => ( {tag} ))}
)} {/* Blocker callout */} {task.status === "Blocked" && task.blockedBy && (
Blocked
{task.blockedBy}
 )} {/* Progress + subtasks */}
Progress
{task.progress}% complete {task.subtasksDone}/{task.subtasks} subtasks
{subtaskList.length > 0 && (
{subtaskList.map((s, i) => (
{s.done && }
{s.name}
))}
)} {/* Activity */}
Activity
{[ { who: task.assignee.name, when: "2h ago", text: "Logged 1.5h on coordinate verification.", icon: "clock", tone: "info" }, { who: "AI", when: "Yesterday", text: `Suggested splitting subtask 3 into per-row chunks.`, icon: "sparkles", tone: "purple" }, { who: "Emma Connor", when: "2d ago", text: "Moved task to In Progress.", icon: "activity", tone: "success" }, ].map((a, i) => (
{a.text}
{a.who} · {a.when}
))}
); }; const PropRow = ({ label, children }) => (
{label}
{children}
); window.TasksTab = TasksTab;