Phase 3: Vendor Page — Field Inventory

Phase 3: Vendor Page — Field Inventory

Purpose: Define which vendor fields appear in the grid list vs the detail panel, based on the BusinessAffiliate domain model and API schema.

Source: Backend API Schema

The BusinessAffiliate entity (/v1/business-affiliate) contains:

BusinessAffiliate
├── eId (uuid)
├── name (string, required, unique per tenant)
├── legal: CompanyInformation
│   ├── name
│   ├── legalName
│   ├── country (CountrySymbol)
│   ├── taxId
│   ├── registrationId
│   └── naicsCode
├── contact: Contact (main contact)
│   ├── salutation, firstName, middleName, lastName
│   ├── jobTitle
│   ├── email, phone
│   ├── postalAddress: PostalAddress
│   ├── emails (map), phones (map), addresses (map), sites (map)
│   └── notes
├── mainAddress: PostalAddress
│   ├── addressLine1, addressLine2
│   ├── city, state, postalCode
│   ├── country (CountrySymbol)
│   └── geoLocation
├── contacts (map of tagged Contacts)
├── addresses (map of tagged Addresses)
└── roles[] (via BusinessRole sub-entity)
    ├── eId, name, role (VENDOR|CUSTOMER|CARRIER|OPERATOR|OTHER)
    └── notes

Field Placement

Grid Columns (vendor list — scannable, sortable, filterable)

These are fields users need to see at a glance when browsing vendors. All are inline-editable where it makes sense.

Column	Source Field	Cell Type	Editable	Sortable	Notes
Select	—	Checkbox	No	No	Row selection checkbox. Enables bulk actions (delete, export, etc.) when one or more rows selected. Pinned left.
Name	name	Text	Yes	Yes	Primary identifier, required
Role	roles[].role	Tag/Badge	No (panel)	Yes	Display as badges (Vendor, Customer, etc.). Multiple roles possible.
Main Contact	contact.firstName + contact.lastName	Text (composite)	No (panel)	Yes	Grouped display: “Jane Smith”
Email	contact.email	Text (link)	Yes	Yes	Clickable mailto:
Phone	contact.phone	Text	Yes	No
Address	mainAddress (composite)	Address (grouped)	Yes	No	Full address in one cell: “123 Main St, Austin, TX 78701”. Easy to copy. Grouped column — splits into component fields on edit.
City	mainAddress.city	Text	Yes	Yes	Also available as standalone column if user prefers
State	mainAddress.state	Text	Yes	Yes	Also available as standalone column
Country	mainAddress.country	Select	Yes	Yes	Country code dropdown
Postal Code	mainAddress.postalCode	Text	Yes	No
Items	(computed)	Number	No	Yes	Count of items sourced from this vendor
Status	(derived)	Badge	No	Yes	Active/Inactive — may not exist yet in API
Job Title	contact.jobTitle	Text	Yes	Yes	Main contact’s role
Tax ID	legal.taxId	Text	Yes	No
Legal Name	legal.legalName	Text	Yes	Yes	If different from display name
Actions	—	Action buttons	No	No	Row-level actions: open detail panel, overflow menu (edit, delete, etc.). Pinned right.

Default visible: Name, Role, Main Contact, Email, Phone, Address Hidden by default (user can toggle via filterable column dropdown): City, State, Country, Postal Code, Items, Status, Job Title, Tax ID, Legal Name

Fixed columns:

• Select — pinned left, always visible, not toggleable
• Actions — pinned right, always visible, not toggleable

Bulk actions (enabled when rows are selected via Select column):

• Delete selected vendors (confirmation dialog)
• Export selected (future)

Column visibility dropdown: Like the items grid “View” menu, but with a search/filter field at the top so users can quickly find columns by name in long lists. This is an improvement over the current items grid which has no filter on the column list.

Detail Panel (side panel — form view, not a grid)

The detail panel is a form layout, not another grid. It shows all vendor fields organized into collapsible sections with standard form inputs. Opens when user clicks a row or deep-links to a vendor.

Header Section:

• Vendor name (large, editable)
• Role badges (editable — add/remove roles)
• Status indicator

Company Information Section:

Field	Source	Input Type	Notes
Legal Name	legal.legalName	Text	Falls back to name
Country of Registration	legal.country	Country select
Tax ID	legal.taxId	Text
Registration ID	legal.registrationId	Text
NAICS Code	legal.naicsCode	Text (future: typeahead)	Industry classification

Main Address Section (composite input):

Field	Source	Input Type	Notes
Address Line 1	mainAddress.addressLine1	Text
Address Line 2	mainAddress.addressLine2	Text
City	mainAddress.city	Text
State	mainAddress.state	Text (future: state select)
Postal Code	mainAddress.postalCode	Text
Country	mainAddress.country	Country select

Main Contact Section:

Field	Source	Input Type	Notes
Salutation	contact.salutation	Select (Mr., Ms., Dr., etc.)
First Name	contact.firstName	Text
Middle Name	contact.middleName	Text
Last Name	contact.lastName	Text
Job Title	contact.jobTitle	Text
Email	contact.email	Email input
Phone	contact.phone	Phone input
Address	contact.postalAddress	Address composite	If different from main

Additional Contacts Section (expandable list):

• Each tagged contact from contacts map
• Add/remove contacts
• Same fields as main contact

Additional Addresses Section (expandable list):

• Each tagged address from addresses map
• Add/remove addresses
• Tag name editable (e.g. “Warehouse”, “Billing”, “Returns”)

Related Items Section (read-only list):

• Items that reference this vendor in their primarySupply or secondarySupply
• Links to item detail page
• Shows item name, SKU, order method, unit cost

Notes/Activity Section:

• Role-level notes (roles[].notes)
• Future: activity log, order history

Grid → Panel Interaction

Action	Behavior
Click row	Open detail panel for that vendor (push layout)
Double-click cell	Inline edit (if editable column)
Deep link (/vendors?id=xxx)	Open page with panel pre-opened
Click “Add Vendor”	Open panel in create mode (empty form)
Delete from grid	Confirmation dialog, then DELETE API call
Delete from panel	Same, via panel action button

Cell Types Exercised

This page exercises the following cell editor types from the Phase 2 grid, making it a good proving ground:

Cell Type	Used For
Text	Name, email, phone
Text (composite display)	Contact name (first + last)
Select	Country
Tag/Badge (read-only)	Roles
Number (read-only, computed)	Item count
Badge (read-only)	Status
Link (clickable)	Email (mailto:)

Not exercised by vendor page (will need item grid migration to test): Image, Color, Boolean/Checkbox, Date, Money, Quantity, Duration, Memo, Typeahead, Grouped/Composite edit

---

Copyright: (c) Arda Systems 2025-2026, All rights reserved