# Vocational Opportunities Frontend Slice

## Purpose

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

```text
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/public/content-catalog/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.