FPSMS-frontend/src/components/PoWorkbench/README.md

# PO Workbench module

Purchase order receiving workbench at `/po/workbench`.

## Public API

Only **`PoWorkbenchShell`** is imported from outside this folder (via `PoWorkbenchPageClient`). Do not import subfolders from other routes.

## Layout (desktop)

```
searchCriteria  |  detailsHeader
searchResults   |  details (form + line grid)
```

- **layout/** — `PoWorkbenchShell` 2×2 grid tokens and `PoWorkbenchRegion` pane chrome.
- **search/** — Criteria bar, advanced filters, PO list, `/po/list` hook and mappers.
- **details/** — Selected PO summary header.
- **detailsGrid/** — Receipt form and four-column line grid (mock lines until detail API).
- **shared/** — Result summary, receive status chip, shared icon/typography tokens.
- **mock/** — Optional local list fixtures (`PO_WORKBENCH_LIST_MOCK_ROWS`); not used by production shell.

## Naming

| Kind | Pattern | Example |
|------|---------|---------|
| Component | `PoWorkbench` + PascalCase | `PoWorkbenchDetailsGrid.tsx` |
| Hook | `usePoWorkbench` + camelCase | `usePoWorkbenchListSearch.ts` |
| Helper / layout | `poWorkbench` + camelCase file | `poWorkbenchDetailsGridLayout.ts` |
| Type | `PoWorkbench` + domain | `PoWorkbenchListRow` |
| Constant | `PO_WORKBENCH_*` / `DETAILS_GRID_*` | `PO_WORKBENCH_GRID_TEMPLATE_COLUMNS` |

## Data flow

1. User filters → `usePoWorkbenchListSearch` → `GET /po/list` → `PoWorkbenchListRow[]`.
2. Selection → `PoWorkbenchDetailsHeader` + `PoWorkbenchDetailsGrid`.
3. Detail lines: `PO_WORKBENCH_DETAILS_GRID_MOCK_ROWS` (replace with API later).

## Comments

Source comments are in **English**. UI strings use i18n (`poWorkbench`, `purchaseOrder` for status labels).