Activity Composer

Log a note, call, meeting or task, then read the history with open tasks first. Tasks tick off in place.

Code

<ActivityComposer onSubmit={async ({ kind, body, at, durationMinutes }) => save(...)} /><ActivityTimeline activities={items} onToggleTask={toggle} onDelete={remove} />

CRM · beta

Live examples and controls: Activity Composer in the lab.

Install

npx shadcn@latest add https://docs.nasaqui.com/r/activity-composer.json

The place to write down what happened with a contact, a deal or an issue, and to see what is still to do.

When to use

Logging calls, meetings and notes on a record.
Follow-up tasks with a due time that sit above the history until done.

When not to use

System events only: use Timeline.
A long checklist inside one task: use Checklist.

Import

import { ActivityComposer, ActivityTimeline } from "@fadymondy/nasaq/web";

Quick start

<ActivityComposer onSubmit={async ({ kind, body, at, durationMinutes }) => save(...)} />
<ActivityTimeline activities={items} onToggleTask={toggle} onDelete={remove} />

Anatomy

ActivityComposer       data-slot="activity-composer"
├─ kind tabs           note, call, meeting, task
├─ body                text
├─ when                date and time (due for a task)
├─ duration            calls and meetings
└─ submit
ActivityTimeline       data-slot="activity-timeline"
├─ open tasks          soonest due first, overdue flagged
└─ history             newest first

API

Prop	Type	Default	Description
`onSubmit`	`(input) => Promise<...>`	required	`{ kind, body, at, durationMinutes? }`. Return `{ error }` to keep the text.
`kinds`	`ComposableKind[]`	all four	Which kinds can be logged.
`defaultKind`	`ComposableKind`	`note`	The kind shown first.
`activities`	`ActivityRecord[]`	required (timeline)	`{ id, kind, body, at, actor?, durationMinutes?, done? }`.
`onToggleTask`	`(id, done) => Promise<...>`	none	Omit for read-only tasks.
`onDelete`	`(id) => Promise<...>`	none	Omit to hide delete.
`now`	`number`	`Date.now()`	For overdue.
`loading` / `empty`	`boolean` / `ReactNode`	none	Skeleton and custom empty state.
`labels`	`ActivityLabels`	en / ar	Every string.