model.Zone.tsx

Zone components are 'Business Components' that bridge the gap between Pages and UI Units. They handle data fetching, state management, and business logic for a specific section of the UI.

🏗️Page Composition

A Page should ideally be composed of just Layout and Zone components. Detailed UI rendering is delegated to Units or Views.

File Convention

Zone files are located in the library directory of their respective Model. The filename must follow the PascalCase convention.

lib/[model]/[Model].Zone.tsx

Standard Structure

Zone components typically use `Load.View` or `Load.Units` to handle asynchronous data loading. They interact with the Store for global state and Service for actions.

Props

field	Description
className?: string	Allows parent components to style the zone.
init?: ClientInit<Model, M>	Initial data for List/Units loading.
view?: ClientView<Model, M>	Initial data for View/Single loading.

className?: string

Allows parent components to style the zone.

init?: ClientInit<Model, M>

Initial data for List/Units loading.

view?: ClientView<Model, M>

Initial data for View/Single loading.

Example Code: List Zone

Product.Zone.tsx (List)

Example Code: View Zone

Product.Zone.tsx (View)