# List Management Screen

A complete, ready-to-adapt management/list page that wires the house pieces together in the fixed
stack every RVN list page uses:

```
AppBreadcrumb → AppActionBar → AppSearchBar → Table
```

The table ships with row selection, a status-badge column, a right-fixed row-action dropdown, and
pagination with `showTotal` — all following the house conventions.

## Install

This starter depends on the other kit skills. Add them first:

```
src/components/AppBreadcrumb.tsx          (skill: app-breadcrumb)
src/components/common/AppActionBar.tsx     (skill: app-action-bar)
src/components/common/AppSearchBar.tsx     (skill: app-search-bar)
src/components/common/app-search-bar.css
```

Then drop the screen in and rename it for your entity:

```
src/pages/<Entity>/index.tsx
```

You also need the badge classes in your `assets/scss/layout.scss` (skill: **badge**).

## Adapt it

1. Replace `Row`, `DATA` and the columns with your entity type and real service data.
2. Wire `onCreate` / `onEdit` / `onDelete` / `onRefresh` to your router + API services.
3. Swap the demo status filter for your real filter popovers.
4. Gate the buttons on permissions (`disabled={!canCreate}` etc.).

## Conventions baked in

- Stack order is fixed: breadcrumb → action bar → search bar → table.
- Status column renders `<span className={\`${statusClass(s)} badge-rvn\`}>` — never inline colours.
- The action column is a single `Dropdown` + `MoreOutlined`, `width: 44`, `fixed: 'right'`.
- Rows open the edit view on double-click (after a permission check).

Part of the **RVN Design Kit** — design-kit.raffles.com.vn