Vendor Page and Standard Layout

Status: In Progress — Planning Repositories: ux-prototype, arda-frontend-app GitHub issue: Arda-cards/arda-frontend-app#771

Goal

Deliver a production-ready Vendor management page by first establishing two foundational design system components: a standard page layout with resizable detail panel, and a standardized AG Grid. The vendor page is the first consumer of both foundations and validates them end-to-end.

Phases

Phase 1: Standard Page Layout

Create a composable AppLayout component that handles the standard Arda page structure (left sidebar + header + content area) with an optional resizable right-side detail panel. Built on shadcn’s Resizable primitive (react-resizable-panels).

Desktop: content area + resizable detail panel (push layout with min-width on content)
Mobile: detail panel renders as a full-screen Drawer (existing component)
Replaces the per-page boilerplate (SidebarProvider/AppSidebar/SidebarInset)
Replaces the custom ResizableSidebar component

Phase 1 Plan (forthcoming)

Phase 2: Standardized AG Grid

Bridge the gap between the prototype’s createEntityDataGrid factory and production needs. The prototype already has a clean factory pattern with standardized cell editors, row auto-publish, column persistence, and pagination. The production app has a custom ArdaGrid with enterprise features but hand-rolled, inconsistent cell editors.

Standardize cell editors with consistent and thoughtful edit states
Configurable props for filtering, row height, density
Standardize column persistence and sort behavior
Make the factory pattern production-ready

Phase 2 Plan

Dependency: API endpoints documented in the API endpoint catalog.

Phase 3: Vendor Page MVP

Compose Phase 1 and Phase 2 into a vendor management page. The domain model, API proxy, types, and use cases are already well-documented. Storybook has 33+ stories exploring the use cases, but implementation will be built fresh on the new foundations — the Storybook explorations are requirements validation, not implementation blueprints.

MVP scope (11 use cases):

ID	Use Case
REF::BA::0001::0001	View Suppliers List
REF::BA::0001::0002	Search Suppliers by Name
REF::BA::0001::0003	Toggle Column Visibility
REF::BA::0001::0005	Select Multiple Affiliates
REF::BA::0001::0006	Navigate Supplier Grid Pages
REF::BA::0001::0007	Supplier Deep Link with Auto-Open Detail Panel
REF::BA::0002::0001	View Supplier Details Panel
REF::BA::0003::0001	Create New Supplier
REF::BA::0004::0001	Edit Supplier from Detail Panel
REF::BA::0005::0001	Delete Supplier
REF::BA::0005::0002	Delete Supplier from Detail Panel

Phase 3 Plan (forthcoming)

Existing Assets

Already built (reuse or adapt)

Domain model: BusinessAffiliate with roles, contacts, addresses — fully documented in business-affiliates
API proxy: Complete CRUD + roles + lookups in @arda-cards/api-proxy (/v1/business-affiliate)
Types: Full TypeScript types in ux-prototype (BusinessAffiliate, BusinessRole, Contact, Address, CompanyInfo)
Use cases: 11 MVP2 scenarios documented in suppliers use cases
Cell editors: Factory-pattern editors in ux-prototype (text, select, number, date, boolean, color, image, memo, typeahead)
Grid factory: createEntityDataGrid with row auto-publish, column persistence, pagination, search
Drawer component: Radix Sheet-based with Header/Body/Footer composition
Storybook stories: 33+ stories across browse, search, create, edit, delete (treat as requirements exploration, not implementation guide)
Mock data: 9+ suppliers with full details + MSW handlers

Needs to be built

AppLayout with resizable detail panel and mobile Drawer fallback
shadcn Resizable primitive installation
Production-ready grid component bridging prototype factory with production needs
Standardized cell edit states across all cell types
Vendor page in arda-frontend-app
API routes for vendor CRUD in arda-frontend-app

Dependencies

Phase 1 and Phase 2 are independent and can be worked in parallel
Phase 2 is recommended to start first (larger scope, longer lead time)
Phase 3 depends on both Phase 1 and Phase 2

Open Questions

#	Question	Options	Recommendation	Decision
1	Should AppLayout provide optional compound sub-components for detail panel header/body/footer?	A) Provide helpers; B) Consumers compose freely	A — optional helpers for consistency	Pending
2	Should panel size persist across sessions?	A) Built-in; B) Consumer handles; C) Opt-in prop	B — keep layout stateless, consumers persist	Pending
3	Should the standardized grid extend createEntityDataGrid or wrap ArdaGrid?	A) Extend prototype factory; B) Wrap production ArdaGrid; C) New component merging both	Needs analysis in Phase 2	Pending