40227-vm/frontend/docs/vocational-opportunities.md

Vocational Opportunities Frontend Slice

Purpose

Vocational Opportunities follows the frontend three-layer architecture and loads opportunity records from the backend content catalog.

View -> Business Logic -> API/Data Access -> Backend

The frontend keeps only presentation configuration in shared constants. Vocational opportunity records are backend-owned runtime content.

Files

View layer:

• frontend/src/components/frameworks/VocationalOpportunities.tsx
• frontend/src/components/vocational-opportunities/

Business logic layer:

• frontend/src/business/vocational/hooks.ts
• frontend/src/business/vocational/selectors.ts

Shared constants and types:

• frontend/src/shared/constants/contentCatalog.ts
• frontend/src/shared/constants/vocational.ts
• frontend/src/shared/types/vocational.ts

API/data access layer:

• frontend/src/shared/api/contentCatalog.ts
• frontend/src/shared/types/contentCatalog.ts

Behavior

• The framework component is a thin wrapper around useVocationalOpportunities.
• Opportunity records load from GET /api/content-catalog/read/vocational-opportunities.
• Shared constants own zip search configuration, category previews, category icon keys, and style tokens.
• Business selectors own zip normalization, local search result derivation, filtering, category lists, and stats.
• Business hook owns content loading, zip input, search state, search text, category filter, expanded card state, and saved opportunity state.
• View components render header, zip search, pre-search state, loading state, filters, stats, result cards, and empty results.
• Views render explicit loading and error states from the content catalog query.

Management Contract

If vocational opportunities become tenant-owned or admin-editable beyond content catalog management, add a typed backend management contract and keep the frontend integration on the same path: shared/api + business/vocational + thin views.