# 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.
Source: https://docs.nasaqui.com/components/status-label-manager
## Install
```bash
npx shadcn@latest add https://docs.nasaqui.com/r/status-label-manager.json
```
Where 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
```tsx
import { StatusLabelManager } from "@fadymondy/nasaq/web";
```
## Quick start
```tsx
```
## 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 Select
```
## API
| 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
- [ColorPicker](https://docs.nasaqui.com/components/color-picker)
- [Badge](https://docs.nasaqui.com/components/badge)
## Lab
https://docs.nasaqui.com/?path=/docs/components-projects-work-status-label-manager--docs
## Code
### React
```tsx
```
### shadcn
```tsx
```
### Vue
```vue
```
### Blade
```blade
{{-- Your handlers save, then you re-render with the updated lists. Resolve { error: "…" } to show why it failed. --}}
```
### HTML + Alpine
```html
The steps work moves through. Each status belongs to a stage, so reports know what is open and what is done.