Skip to main content

Component Map

Document Status: Placeholder - To be completed in Phase 4

Overview​

LC DocCheck UI is built with React 18.2.0 and Fluent UI v9, using a template-driven architecture for rendering entity data.

Component Hierarchy​

App
├── Layout
│   ├── Header
│   │   ├── Logo
│   │   └── UserMenu
│   ├── Navigation
│   │   └── NavLinks
│   └── MainContent
│       └── Routes
│
├── Pages
│   ├── SalesordersPage
│   │   └── DataTable
│   ├── SalesorderDetailPage
│   │   ├── SchemaDetail
│   │   ├── DocumentUploadSection
│   │   ├── DocumentRecreationView
│   │   ├── ComparisonReport
│   │   └── SchemaList (Shipments)
│   ├── ShipmentsPage
│   │   └── DataTable
│   └── ShipmentDetailPage
│       ├── SchemaDetail
│       └── DocumentCards
│
└── Templates (Reusable)
    ├── SchemaDetail
    │   ├── SectionRenderer
    │   └── FieldRenderer
    ├── SchemaList
    │   └── ColumnRenderer
    ├── DocumentRecreationView
    │   ├── SwiftFieldSection
    │   ├── PartiesSection
    │   └── DerivedDataSection
    └── ComparisonReport
        ├── SummaryPanel
        └── RuleResultsList

Key Components​

SchemaDetail​

Renders entity detail views based on UI schema configuration.

  • Supports sections layout with configurable columns
  • Field rendering based on format (text, date, currency, badge, etc.)

SchemaList​

Renders data tables with schema-driven columns.

  • Sortable columns
  • Pagination
  • Row actions

DocumentRecreationView​

Renders extracted document data in SWIFT MT700 format.

  • Template-driven (mt700.template.ts)
  • Source sections for SWIFT fields
  • Derived data sections for parsed information

ComparisonReport​

Displays LC vs PI/Shipment comparison results.

  • Overall status badge
  • Rule results grouped by category
  • Field-level discrepancy highlighting

State Management​

  • TanStack Query v5 for server state
  • React Query hooks per entity type
  • Optimistic updates for mutations

Styling​

  • Griffel (CSS-in-JS)
  • Fluent UI design tokens
  • Component-specific style files (*.styles.ts)

See Also​