StatusLabelManager
An admin screen to manage workflow statuses grouped by stage and flat labels, with colour, reorder, edit and delete that warns when in use.
PreviewOpen ↗
Code
<StatusLabelManager statuses={statuses} labels={labels} onSaveStatus={save} onDeleteStatus={del} onReorderStatuses={reorder} onSaveLabel={saveLabel} onDeleteLabel={delLabel} />Projects & Work · beta
Live examples and controls: StatusLabelManager in the lab.
Install
npx shadcn@latest add https://docs.nasaqui.com/r/status-label-manager.jsonWhere a workspace shapes its vocabulary: the statuses work moves through and the labels it can carry.
When to use
- Settings screens for statuses (with stages) and labels.
When not to use
- Picking a status on a task: use a
Select.
Import
import { StatusLabelManager } from "@fadymondy/nasaq/web";Quick start
<StatusLabelManager statuses={statuses} labels={labels} onSaveStatus={save} onDeleteStatus={del} onReorderStatuses={reorder} onSaveLabel={saveLabel} onDeleteLabel={delLabel} />Anatomy
StatusLabelManager data-slot="status-label-manager"
├─ Tabs Statuses / Labels
├─ stage groups backlog, todo, active, review, done, canceled, each a Card of rows
│ └─ row colour Badge, name, usage count, move up / down, edit, delete
└─ EditDialog name, ColorPicker (--nq-tag-* swatches), stage SelectAPI
| Prop | Type | Default | Description |
|---|---|---|---|
statuses | WorkStatus[] | required | { id, name, hue, stage, usage? }. |
labels | WorkLabel[] | required | { id, name, hue, usage? }. |
onSaveStatus | (draft) => Promise<...> | required | No id means create. |
onDeleteStatus | (id) => Promise<...> | required | Deleting an in-use item asks first. |
onReorderStatuses | (ids) => Promise<...> | required | Full new order after a move inside a stage. |
onSaveLabel | (draft) => Promise<...> | required | Create or update a label. |
onDeleteLabel | (id) => Promise<...> | required | Delete a label. |
defaultTab | "statuses" | "labels" | "statuses" | First tab. |
copy | StatusLabelManagerLabels | en / ar | Every string. The labels prop is the label list. |
Examples
- Validation: names must be non empty, at most 32 characters and unique within their list.
Accessibility
Reordering is by buttons, not drag alone. Colour is always paired with the name. Dialogs trap focus and the row menu opens with right-click, Shift+F10 or the Menu key.
RTL & i18n
English and Arabic built in; move icons mirror in RTL.
Styling & tokens
Hues map to --nq-tag-*. Cards fill their cell.
Do / Don't
- Do keep at least one status in the done stage.
- Do not reuse names across statuses.
Related
Lab
https://docs.nasaqui.com/?path=/docs/components-projects-work-status-label-manager--docs