Canary Component Gap Analysis — arda-frontend-app

Analysis of arda-frontend-app UI components against the canary library (ux-prototype/src/components/canary/). Identifies replacement candidates, estimated code reduction, and data-type gaps in grid cell renderers/editors.

Current Codebase Inventory

Component Line Counts

Area	Files	Lines
Sidebar + Navigation (`app-sidebar.tsx`, `nav-*.tsx`, `team-switcher.tsx`, `ui/sidebar.tsx`)	7	1,886
App Header (`common/app-header.tsx`)	1	187
AG Grid wrapper + Column Presets (`table/ArdaGrid.tsx`, `columnPresets.tsx`)	2	3,154
Typeahead Cell Editors (9 files)	9	1,166
Standalone Typeaheads (9 files)	9	3,911
Item Details Panel	1	1,259
Item Form Panel	1	2,534
Manage Cards Panel	1	1,286
UI Primitives (`ui/*.tsx`, excluding `sidebar.tsx`)	23	1,537
Common Modals (Delete, Note, UnsavedChanges)	3	385

Canary Replacement Potential

File	Lines	Canary Replacement
`ui/sidebar.tsx`	726	Canary `primitives/sidebar`
`app-sidebar.tsx`	608	Canary `Sidebar` organism + molecules
`nav-user.tsx`	112	Canary `SidebarUserMenu`
`team-switcher.tsx`	91	Part of `SidebarHeader`
`nav-projects.tsx`	89	Canary `SidebarNavGroup`
`nav-main.tsx`	73	Canary `SidebarNavItem`

The 726-line ui/sidebar.tsx primitive is entirely superseded by the canary primitive. The composition files (app-sidebar.tsx, nav-*.tsx, team-switcher.tsx) collapse into canary molecule/organism configuration.

Estimated after: ~250 lines. Estimated reduction: ~1,450 lines (77%)

The canary AppHeader organism accepts leading, showSearch, button actions, and icon actions as props.

Estimated after: ~60 lines. Estimated reduction: ~125 lines (67%)

Area 3: ArdaGrid + Column Presets (3,154 lines)

File	Lines	Canary Replacement
`table/ArdaGrid.tsx`	1,320	`createEntityDataGrid()` factory or `DataGrid` molecule
`table/columnPresets.tsx`	1,834	Canary cell display/editor atoms + factory config

The factory absorbs selection, pagination, search, column persistence, and sorting. Column presets shrink because canary provides typed cell renderers/editors (text, number, boolean, date, color, select, memo, image). Business logic in column presets (formatters, value getters, conditional rendering) must remain.

The hand-rolled SelectAllHeaderComponent (115 lines in columnPresets.tsx) is entirely replaced by the factory’s built-in row selection.

Estimated after: ~800 lines. Estimated reduction: ~2,350 lines (75%)

Area 4: Typeahead Cell Editors (1,166 lines)

Nine nearly identical typeahead cell editors (~127 lines each), all following the same pattern with different API endpoints:

DepartmentCellEditor, FacilityCellEditor, LocationCellEditor, SublocationCellEditor, SubTypeCellEditor, TypeCellEditor, UnitCellEditor, UseCaseCellEditor (127 lines each)
SupplierCellEditor (149 lines)

The canary TypeaheadCellEditor accepts a lookup function prop. Each editor becomes a one-liner factory call with a bound lookup function.

Estimated after: ~100 lines. Estimated reduction: ~1,065 lines (91%)

Area 5: Standalone Typeaheads (3,911 lines)

Nine standalone form typeaheads (~427–461 lines each), all following the same pattern with different API endpoints. These are used in ItemFormPanel (not in grid cells).

The canary TypeaheadCellEditor is grid-only. No canary standalone form typeahead exists. This area is blocked until a form-oriented typeahead component is built as a separate project.

Estimated reduction with current canary: 0 lines. Future opportunity: ~3,800 lines (97%) once a canary form typeahead exists.

Area 6: ItemDetailsPanel (1,259 lines)

Already imports ArdaDetailField from @arda-cards/design-system/canary. The canary ItemDetails organism provides tabs, field list, card preview, and action toolbar.

Business logic (order queue, delete, print) and data fetching remain in the app.

Estimated after: ~400 lines. Estimated reduction: ~860 lines (68%)

Primitive	Lines	Canary Equivalent
`combobox.tsx`	276	Canary primitives
`dropdown-menu.tsx`	258	Canary `primitives/dropdown-menu`
`calendar.tsx`	213	No canary equivalent
`input.tsx`	190	Canary primitives
`select.tsx`	185	Canary primitives
`sheet.tsx`	139	Canary `atoms/drawer`
`input-dropdown.tsx`	132	Canary primitives
Other 16 primitives	144	Various canary primitives

Most are thin shadcn wrappers. Swapping primitives is high-touch, low-reward — every consumer must update imports for minimal line reduction (canary primitives are roughly the same size). A few like combobox.tsx and input-dropdown.tsx collapse into canary equivalents.

Estimated reduction: ~200 lines (13%)

Area 8: Common Modals (385 lines)

File	Lines	Canary Replacement
`DeleteConfirmationModal.tsx`	111	Canary `AlertDialog` primitive
`NoteModal.tsx`	137	Canary `Dialog` atom
`UnsavedChangesModal.tsx`	137	Canary `AlertDialog` primitive

AlertDialog provides focus trap, escape, backdrop. Body content remains.

Estimated after: ~120 lines. Estimated reduction: ~265 lines (69%)

Reduction Summary

Area	Current Lines	Reduction	% of Area
Sidebar + Navigation	1,886	~1,450	77%
App Header	187	~125	67%
ArdaGrid + Column Presets	3,154	~2,350	75%
Cell Editors (9)	1,166	~1,065	91%
ItemDetailsPanel	1,259	~860	68%
UI Primitives	1,537	~200	13%
Common Modals	385	~265	69%
Subtotal (actionable now)	9,574	~6,315	66%
Standalone Typeaheads (future)	3,911	~3,800	97%

The biggest wins are the grid system (3,400 lines from ArdaGrid + cell editors) and the sidebar/navigation (1,450 lines). An additional ~3,800 lines become reducible once a canary form typeahead exists.

Grid Cell Data Types — Canary Coverage

Covered by Canary (10 types)

Data Type	Canary Atom	Columns Using It
Text	`TextCellDisplay`	Item name, SKU, GL Code, Supplier, Supplier SKU, Sub-location, Sub-Type, Use Case, Department, Facility (~12 columns)
Number	`NumberCellDisplay`	Min Qty, Order Qty
Boolean	`BooleanCellDisplay`	Taxable
Date	`DateCellDisplay`	Created, Date
Color	`ColorCellDisplay` / `ColorCellEditor`	Color (swatch + hex label)
Image	`ImageCellDisplay`	Image (32x32 thumbnail with error fallback)
Select (enum)	`SelectCellDisplay` / `SelectCellEditor`	Card Size, Label Size, Breadcrumb Size, Order Method
Memo	`MemoCellDisplay` / `MemoButtonCell`	Notes, Card Notes (icon button → modal)
Action	`ActionCellRenderer`	Quick Actions (queue, print, preview, label buttons)
Row Selection	Built into `createEntityDataGrid()`	Checkbox column + select-all header (115-line hand-rolled `SelectAllHeaderComponent`)

Cell Editors — Fully Covered

All 9 typeahead cell editors are replaceable by the canary TypeaheadCellEditor with per-field lookup functions:

Cell Editor	Lines	API Endpoint
`SupplierCellEditor`	149	`/api/arda/business-affiliate/lookup`
`TypeCellEditor`	128	`/api/arda/classification/type/lookup`
`SubTypeCellEditor`	127	`/api/arda/classification/sub-type/lookup`
`UseCaseCellEditor`	127	`/api/arda/use-case/lookup`
`FacilityCellEditor`	127	`/api/arda/facility/lookup`
`DepartmentCellEditor`	127	`/api/arda/department/lookup`
`LocationCellEditor`	127	`/api/arda/location/lookup`
`SublocationCellEditor`	127	`/api/arda/sublocation/lookup`
`UnitCellEditor`	127	`/api/arda/unit/lookup`

NOT Covered by Canary (6 types)

Data Type	What It Does	Severity
Currency (Unit Price, Order Cost, Amount)	`$${value.toFixed(2)} ${currency}` display	Trivial — `valueFormatter` function, not a cell renderer. Could add a `CurrencyCellDisplay` atom or keep as formatter.
URL / Link (Supplier URL)	Truncated clickable `<a>` with external link icon	Small gap. Hand-rolled with `TruncatedLink`. A `LinkCellDisplay` atom would be useful.
Duration (Lead Time)	`"3 days"` from `{length, unit}` object	Trivial — `valueFormatter` function.
Quantity with Unit (displayed as number + unit string)	`formatQuantity` combining value + unit	Trivial — `valueFormatter`. The `NumberCellDisplay` handles raw numbers but not compound value+unit.
Card Count (# of Cards)	Badge count with icon, clickable to manage cards	Domain-specific composite cell — not a generic data type. Belongs in the app, not the component library.
Status Badge (Status)	Colored badge mapping status → color variant	Composable from canary `Badge` atom. No dedicated `StatusCellDisplay` but straightforward to compose.

Assessment: None of the 6 gaps are blockers. Currency, Duration, and Quantity+Unit are simple valueFormatter functions (not cell renderers). URL/Link and Status Badge are composable from existing canary atoms. Card Count is domain-specific logic.

Two atoms would be useful additions to the canary library but are not required for the migration:

CurrencyCellDisplay — formats Money objects with locale-aware currency display.
LinkCellDisplay — truncated clickable URL with external link icon and tooltip showing full URL.

Components Not Replaceable by Canary

The following components contain significant domain/business logic and cannot be replaced by generic canary components:

Component	Lines	Reason
`ItemFormPanel.tsx`	2,534	Complex multi-section form with 9 typeahead lookups, validation, draft management. No canary form components exist. Blocked on form typeahead.
`ManageCardsPanel.tsx`	1,286	Kanban card management — domain-specific workflow.
Standalone Typeaheads (9 files)	3,911	Form-context typeaheads. Blocked on canary form typeahead component.
Scan module (`ScanModal`, `DesktopScanView`, `MobileScanView`)	6,354	Barcode scanning — hardware integration, domain-specific.
Items import (`ImportItemsModal`, `ImportSuccessModal`)	901	CSV parsing, validation, bulk operations — domain-specific.
Settings sections (6 files)	2,402	Account/appearance/password/company management — domain-specific forms.
Auth components	~150	Cognito integration — infrastructure-specific.
Page files (`items/page.tsx`, `order-queue/page.tsx`, etc.)	~8,500	Page-level orchestration, state management, API calls. These consume components but are not themselves replaceable.