Tasks widget
StableYour open tasks for a dashboard, soonest due first: tick one to finish it, or change its status from its icon.
TasksTodayWidget lists up to five open tasks assigned to you (the sample’s Alex Rivera), by due date, then priority. Ticking one marks it Done through the shared store, with Undo; it stays on screen struck through, and unticking puts back the status it had. “Open Tasks” goes wherever href says. It brings no card of its own, so the dashboard decides the frame.
Updated View source
My tasks on a dashboard
import { useRouter } from '@rchursin/product/lib/router'import { TasksTodayWidget } from '@rchursin/product/tasks'
/** * The widget brings no card of its own: the dashboard around it does. It reads the shared * task store, so ticking a task here marks it done in the Tasks app too (with Undo). * href sends “Open Tasks” to your own page; here, the tool’s page in this Library. */export default function TasksWidgetExample() { const { href } = useRouter() return ( <div className="lux-card w-full max-w-sm rounded-2xl bg-raised p-5"> <TasksTodayWidget href={href('/library/tools/tasks-app')} /> </div> )}Usage
import { TasksTodayWidget } from '@rchursin/product/tasks'<TasksTodayWidget href="/tasks" className="w-full" />API
TasksTodayWidget props
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | null | '#tasks' | Where the “Open Tasks” link goes: your Tasks page. The default is the product kit’s own anchor; null hides the link. |
className | string | – | Classes on the root. |
Accessibility
Keyboard
| Key | What it does |
|---|---|
| Tab | Moves through each task’s checkbox and status button, then the Open Tasks link. |
| Space | On a checkbox: mark the task done, or not done. |
| EnterSpace | On a status icon: open the status picker. |
- A list named “My open tasks, soonest due first”, under an <h3> “My tasks” and a count like “3 open · 1 overdue”.
- Each checkbox is named “Done: <title>”. The status button names the current status.
- Overdue swaps the calendar for an alert sign, adds an outline, and says “overdue” to screen readers.
Guidelines
Do
- Wrap it in your dashboard’s card; it has no frame of its own.
- Keep the link to the full tool next to it.
Don’t
- Don’t drop ticked tasks from the list straight away; the widget keeps them so the tick can be taken back.
In use
Used on this site
Related
- TasksThe whole task tracker: a keyboard-first list and board, a detail view, bulk edits, and undo for every change.
- Agenda widgetA mini month with event markers and the chosen day’s agenda, for a dashboard.
- Status & priorityTask glyphs told apart by shape: a square that fills as work moves on, priority bars, assignee, labels and estimate.
- Due dateRelative due dates for task rows (“Today”, “Fri”, “Oct 30”) with overdue shown by shape, and a picker with quick choices.
- Product kit overviewThe product kit’s front page: a Today screen built from every tool’s widget, a map of the kits and the shared parts.
Source
The component’s own files, exactly as they run on this site.
/** * Today widget for the Overview: your open tasks, soonest due first. Tick one to mark it done * (it stays in the list, struck through, so you can untick it or press Undo), or change its * status from the icon. Shares the task store with the Tasks page, so both stay in step. * "Open Tasks" goes to `href` (the kit's #tasks page by default; null hides the link). */import { useMemo, useState } from "react"import { cx } from "../../components/cx"import { ME, type StatusId } from "../data/sample"import { Icon } from "../icons/Icon"import { useTaskActions } from "./actions"import { dueInfo, isClosed, priorityRank } from "./model"import { DueChip, PriorityIcon } from "./parts"import { StatusPicker } from "./pickers"import { useTaskState } from "./store"
const MAX = 5
export function TasksTodayWidget({ href = "#tasks",