# Activity Composer > Log a note, call, meeting or task, then read the history with open tasks first. Tasks tick off in place. Source: https://docs.nasaqui.com/components/activity-composer ## Install ```bash 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 ```tsx import { ActivityComposer, ActivityTimeline } from "@fadymondy/nasaq/web"; ``` ## Quick start ```tsx save(...)} /> ``` ## 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. | ## Examples - **Task only**: `kinds={["task"]}`. ## Accessibility The kind switch is a tab list; fields are labelled; validation errors use `role="alert"`. Row actions open from a button menu or a context-click. ## RTL & i18n English and Arabic built in. Dates and durations use the locale; the datetime field stays left-to-right. ## Styling & tokens Semantic tokens only. ## Do / Don't - Do let a failed save keep the typed text. - Do not use it as a general chat. ## Related - [Timeline](https://docs.nasaqui.com/components/timeline) - [IssueView](https://docs.nasaqui.com/components/issue-view) ## Lab https://docs.nasaqui.com/?path=/docs/components-crm-activity-composer--docs ## Code ### React ```tsx save(...)} /> ``` ### shadcn ```tsx save(...)} /> ``` ### Vue ```vue ``` ### Blade ```blade @php $activities = [ ['id' => 'a1', 'kind' => 'call', 'body' => 'Walked through the proposal and pricing.', 'at' => '2026-09-28T10:00:00', 'durationMinutes' => 20, 'actor' => ['name' => 'Sara Ali']], ['id' => 'a2', 'kind' => 'task', 'body' => 'Send the revised quote', 'at' => '2026-10-02T09:00:00'], ['id' => 'a3', 'kind' => 'task', 'body' => 'Confirm the kickoff date', 'at' => '2026-09-28T09:00:00', 'actor' => ['name' => 'Omar Nasser']], ['id' => 'a4', 'kind' => 'event', 'body' => 'Stage moved to Proposal', 'at' => '2026-09-27T08:00:00', 'actor' => ['name' => 'Omar Nasser']], ['id' => 'a5', 'kind' => 'task', 'body' => 'Share the case study', 'at' => '2026-09-25T09:00:00', 'done' => true, 'doneAt' => '2026-09-26T12:00:00'], ]; @endphp
``` ### HTML + Alpine ```html

Planned 2

  1. Task Overdue

    Confirm the kickoff date

    by Omar Nasser

  2. Task

    Send the revised quote

History

  1. Call 20 min

    Walked through the proposal and pricing.

    by Sara Ali

  2. Stage moved to Proposal

    by Omar Nasser

  3. Task Done

    Share the case study

```