# 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).