e.stopPropagation()}>
{t.id}
{t.title}
{t.priority} priority
{t.blockedBy && t.blockedBy.length > 0 && (
⊘ Blocked by {t.blockedBy.join(', ')}
)}
{t.blocks && t.blocks.length > 0 && (
→ Blocks {t.blocks.join(', ')}
)}
Matter
{ onClose(); onNavigate && onNavigate('matter', t.matterId); }}>
{t.matter} →
Assignee
{t.assignee}
Due Date
{dueDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
{urgency === 'overdue' ? ' (overdue)' : daysLeft <= 3 && t.status !== 'Done' ? ` (${daysLeft}d left)` : ''}
{/* Time tracking */}
Time Tracked
{t.loggedHours}h / {t.estimatedHours}h
75 ? T.color.status.warning : T.color.accent.blue }} />
Description
{t.description}
{hasLinks && (
Linked Items
{linkedDeadlines.map(dl => (
{ onClose(); onNavigate && onNavigate('calendar'); }} />
))}
{linkedDocs.map(doc => (
{ onClose(); onNavigate && onNavigate('documents'); }} />
))}
{linkedEvidence.map(ev => (
{ onClose(); onNavigate && onNavigate('evidence', t.matterId); }} />
))}
)}
{total > 0 && (
Subtasks
{done}/{total}
{t.subtasks.map((s, i) => (
toggleSub(i)}>
{s.done ? 'ok' : ''}
{s.t}
))}
)}
{/* Comments */}
Comments · @mentions
{(t.comments || []).length === 0 &&
No comments yet.
}
{(t.comments || []).map(c => (
{c.actor}
{c.ts}
{c.body}
))}
setCommentDraft(e.target.value)}
placeholder="Add a comment (use @M. Kirkland to mention)..."
onKeyDown={e => { if (e.key === 'Enter') submitComment(); }}
style={{ flex: 1, padding: '6px 10px', border: `1px solid ${T.color.border.light}`, borderRadius: '4px', fontSize: '11px', fontFamily: T.font.family }} />
{/* Activity */}
{t.activity && t.activity.length > 0 && (
Activity
{t.activity.slice(0, 6).map((a, i) => (
{a.user} {a.action}
{a.time}
))}
)}
{logOpen &&
setLogOpen(false)} taskId={t.id} />}
);
}
function TasksPlatform({ onNavigate: onNav }) {
const tk = window.__tk;
const data = window.useTaskStore
? window.useTaskStore(['created','updated','deleted','completed','subtask.toggled','time.logged','comment.added','bulk.updated','view.saved','view.deleted','timer.started','timer.stopped'])
: { tasks: window.TASKS, savedViews: [], templates: [], auditLog: [], mentions: [] };
const [activeTab, setActiveTab] = useTkState('tasks');
const [search, setSearch] = useTkState('');
const [catFilter, setCatFilter] = useTkState('All');
const [assigneeFilter, setAssigneeFilter] = useTkState('All');
const [priorityFilter, setPriorityFilter] = useTkState('All');
const [view, setView] = useTkState('list');
const [selectedTask, setSelectedTask] = useTkState(null);
const [hoveredRow, setHoveredRow] = useTkState(null);
const [hoveredCard, setHoveredCard] = useTkState(null);
const [myTasksOnly, setMyTasksOnly] = useTkState(false);
const [hideCompleted, setHideCompleted] = useTkState(false);
const [sortBy, setSortBy] = useTkState('due');
const [sortAsc, setSortAsc] = useTkState(true);
const [newTaskOpen, setNewTaskOpen] = useTkState(false);
const [templateSeed, setTemplateSeed] = useTkState('');
const [selectedIds, setSelectedIds] = useTkState([]);
const [bulkOpen, setBulkOpen] = useTkState(false);
const tasks = data.tasks;
const ME = 'M. Kirkland';
const applyFilter = (f) => {
if (!f) return;
if (f.assignee) setAssigneeFilter(f.assignee);
if (f.status) { /* no direct status filter, leave to user */ }
if (f.priority) setPriorityFilter(f.priority);
if (f.overdue || f.thisWeek || f.blocked) setHideCompleted(true);
setActiveTab('tasks');
};
const filtered = useTkMemo(() => {
let t = tasks;
if (hideCompleted) t = t.filter(x => x.status !== 'Done');
if (myTasksOnly) t = t.filter(x => x.assignee === ME);
if (catFilter !== 'All') t = t.filter(x => x.category === catFilter);
if (assigneeFilter !== 'All') t = t.filter(x => x.assignee === assigneeFilter);
if (priorityFilter !== 'All') t = t.filter(x => x.priority === priorityFilter);
if (search) {
const q = search.toLowerCase();
t = t.filter(x => x.title.toLowerCase().includes(q) || x.matter.toLowerCase().includes(q) || x.assignee.toLowerCase().includes(q) || x.id.toLowerCase().includes(q));
}
return t;
}, [tasks, search, catFilter, assigneeFilter, priorityFilter, myTasksOnly, hideCompleted]);
const sorted = useTkMemo(() => {
const arr = [...filtered];
const dir = sortAsc ? 1 : -1;
arr.sort((a, b) => {
switch (sortBy) {
case 'priority': return dir * (priorityOrder[a.priority] - priorityOrder[b.priority]);
case 'due': return dir * (new Date(a.dueDate) - new Date(b.dueDate));
case 'hours': return dir * (a.loggedHours - b.loggedHours);
case 'status': return dir * (window.TASK_STATUSES.indexOf(a.status) - window.TASK_STATUSES.indexOf(b.status));
case 'assignee': return dir * a.assignee.localeCompare(b.assignee);
default: return 0;
}
});
return arr;
}, [filtered, sortBy, sortAsc]);
const grouped = useTkMemo(() => {
const groups = { overdue: [], today: [], thisWeek: [], later: [] };
const now = new Date();
const todayEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1);
const weekEnd = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 7);
sorted.forEach(t => {
const d = new Date(t.dueDate);
if (t.status === 'Done') groups.later.push(t);
else if (d < now) groups.overdue.push(t);
else if (d < todayEnd) groups.today.push(t);
else if (d < weekEnd) groups.thisWeek.push(t);
else groups.later.push(t);
});
return groups;
}, [sorted]);
const activeTasks = filtered.filter(t => t.status !== 'Done');
const overdue = activeTasks.filter(t => new Date(t.dueDate) < new Date());
const totalEstimated = activeTasks.reduce((s, t) => s + t.estimatedHours, 0);
const totalLogged = filtered.reduce((s, t) => s + t.loggedHours, 0);
// Global KPIs (not filtered — for header)
const kpi = {
total: tasks.length,
active: tasks.filter(t => t.status !== 'Done').length,
overdue:tasks.filter(t => t.status !== 'Done' && new Date(t.dueDate) < new Date()).length,
review: tasks.filter(t => t.status === 'In Review').length,
mentions: (data.mentions || []).filter(m => !m.read).length,
};
const handleSort = (col) => {
if (sortBy === col) setSortAsc(!sortAsc);
else { setSortBy(col); setSortAsc(true); }
};
const sortArrow = (col) => sortBy === col ? (sortAsc ? ' ↑' : ' ↓') : '';
const toggleSelect = (id, e) => {
e && e.stopPropagation();
setSelectedIds(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
};
const clearSelection = () => setSelectedIds([]);
const useTemplate = (id) => { setTemplateSeed(id); setNewTaskOpen(true); setActiveTab('tasks'); };
const renderTaskRow = (t) => {
const due = new Date(t.dueDate);
const subtaskDone = t.subtasks.filter(s => s.done).length;
const subtaskTotal = t.subtasks.length;
const sel = selectedIds.includes(t.id);
return (
setHoveredRow(t.id)} onMouseLeave={() => setHoveredRow(null)}
onClick={() => setSelectedTask(t)}>
toggleSelect(t.id, e)} onClick={e => e.stopPropagation()}
style={{ accentColor: tk.cobalt, cursor: 'pointer' }} />
{t.title}
{t.blockedBy && t.blockedBy.length > 0 && (
⊘ {t.blockedBy.join(',')}
)}
{subtaskTotal > 0 &&
{subtaskDone}/{subtaskTotal} subtasks}
{t.matter}
{t.assignee}
{t.priority}
{due.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
{t.loggedHours}h
);
};
const renderListView = () => (
0 && selectedIds.length === filtered.length}
onChange={e => setSelectedIds(e.target.checked ? filtered.map(t => t.id) : [])}
style={{ accentColor: tk.cobalt, cursor: 'pointer' }} />
handleSort('due')}>Task
Matter
handleSort('assignee')}>Assignee{sortArrow('assignee')}
handleSort('priority')}>Priority{sortArrow('priority')}
handleSort('status')}>Status{sortArrow('status')}
handleSort('due')}>Due{sortArrow('due')}
handleSort('hours')}>Hours{sortArrow('hours')}
{[
{ key: 'overdue', label: 'Overdue', color: T.color.status.critical, tasks: grouped.overdue },
{ key: 'today', label: 'Today', color: T.color.status.warning, tasks: grouped.today },
{ key: 'thisWeek', label: 'This Week', color: T.color.accent.blue, tasks: grouped.thisWeek },
{ key: 'later', label: 'Later', color: T.color.text.tertiary, tasks: grouped.later },
].filter(g => g.tasks.length > 0).map(g => (
{g.label}
{g.tasks.length}
{g.tasks.map(renderTaskRow)}
))}
{filtered.length === 0 && (
window.Arbiter?.EmptyState
? React.createElement(window.Arbiter.EmptyState, {
title: 'No tasks match',
description: 'Adjust filters or clear the search to see more results.',
})
:
No tasks match filters
)}
);
const renderKanbanView = () => (
{window.TASK_STATUSES.map(status => {
const col = filtered.filter(t => t.status === status);
return (
{col.map(t => {
const subtaskDone = t.subtasks.filter(s => s.done).length;
const subtaskTotal = t.subtasks.length;
const due = new Date(t.dueDate);
const isHovered = hoveredCard === t.id;
return (
setHoveredCard(t.id)} onMouseLeave={() => setHoveredCard(null)}
onClick={() => setSelectedTask(t)}>
{t.id}
{t.title}
{t.blockedBy && t.blockedBy.length > 0 && ⊘}
{t.matter}
{due.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
{subtaskTotal > 0 && (
)}
);
})}
);
})}
);
const renderTasksTab = () => (
<>
0 ? 'down' : ''} />
t.status === 'Done').length} delta="This month" deltaType="" />
t.status === 'In Review').length} delta="Awaiting approval" deltaType="" />
setSearch(e.target.value)} />
{window.TASK_CATEGORIES.map(c => (
))}
{['list', 'board'].map(v => (
))}
{/* Bulk-action bar */}
{selectedIds.length > 0 && (
{selectedIds.length} selected
)}
{view === 'list' ? renderListView() : renderKanbanView()}
);
const renderTab = () => {
switch (activeTab) {
case 'tasks': return renderTasksTab();
case 'myday': return
;
case 'deps': return
;
case 'analytics': return
;
case 'templates': return
;
case 'views': return
;
case 'activity': return
;
default: return null;
}
};
const tabs = [
{ id: 'tasks', label: 'Tasks' },
{ id: 'myday', label: 'My Day' },
{ id: 'deps', label: 'Dependencies' },
{ id: 'analytics', label: 'Analytics' },
{ id: 'templates', label: 'Templates' },
{ id: 'views', label: 'Saved Views' },
{ id: 'activity', label: 'Activity', badge: kpi.mentions },
];
return (
{/* Header */}
Tasks
Matter-Linked Workload · Dependencies · Time Tracking · Analytics
{[
{ l: 'Active', v: kpi.active, bg: tk.cobaltBg, c: tk.cobalt },
{ l: 'Overdue', v: kpi.overdue, bg: kpi.overdue ? tk.crimsonBg : tk.emeraldBg, c: kpi.overdue ? tk.crimson : tk.emerald },
{ l: 'Review', v: kpi.review, bg: tk.amberBg, c: tk.amber },
{ l: 'Mentions', v: kpi.mentions, bg: kpi.mentions ? tk.violetBg : T.color.bg.secondary, c: kpi.mentions ? tk.violet : T.color.text.tertiary },
].map(s => (
{s.l}
{s.v}
))}
{/* Tabs */}
{tabs.map(t => (
))}
{/* Body */}
{renderTab()}
{selectedTask &&
setSelectedTask(null)} onNavigate={(view, id) => onNav && onNav(view, id)} />}
{newTaskOpen && { setNewTaskOpen(false); setTemplateSeed(''); }} onCreated={t => setSelectedTask(t)} templateId={templateSeed} />}
{bulkOpen && { setBulkOpen(false); clearSelection(); }} ids={selectedIds} />}
);
}
window.TasksPlatform = TasksPlatform;