Model.Zone.tsx File Guide

Model.Zone.tsx files are client-side container components in Akan.js that serve as the bridge between data fetching and UI presentation. They provide a consistent interface for displaying model data across your application.

Component Structure

Zone components are positioned between page components and individual UI components:

// Basic Zone component structure

"use client";

import { Load, Data } from "@akanjs/ui";

import { ModelsProps } from "@akanjs/client";

import { ClientInit, ClientView } from "@akanjs/signal";

import { Model } from "./index";

export const Admin = ({ sliceName = "model", init, query }: ModelsProps<cnst.Model>) => {

  return (

    <Data.ListContainer

      init={init}

      query={query}

      sliceName={sliceName}

      renderItem={Model.Unit.Card}

      renderTemplate={Model.Template.General}

      renderView={(model) => <Model.View.General model={model} />}

      columns={["id", "status", "createdAt"]}

      actions={(model) => ["remove", "edit", "view"]}

/>

);

};

export const Zone = {

  Admin,

  // Additional components...

};

Zone Component Types

zoneType	Description	Example
Admin	Administrative interface with CRUD operations	`Model.Zone.Admin`
View	Detailed view of a single model instance	`Model.Zone.View`
Card	List display of model items as cards	`Model.Zone.Card`
Dashboard	Custom layout for model-specific dashboards	`Model.Zone.Dashboard`

Admin

Administrative interface with CRUD operations

Model.Zone.Admin

View

Detailed view of a single model instance

Model.Zone.View

Card

List display of model items as cards

Model.Zone.Card

Dashboard

Custom layout for model-specific dashboards

Model.Zone.Dashboard

Admin Zone

export const Admin = ({ sliceName = "model", init, query }: ModelsProps<cnst.Model>) => (

  <Data.ListContainer

    init={init}

    query={query}

    sliceName={sliceName}

    renderItem={Model.Unit.Card}

    renderTemplate={Model.Template.General}

    renderView={(model) => <Model.View.General model={model} />}

    columns={["id", "name", "status"]}

    actions={(model) => ["remove", "edit", "view"]}

/>

);

View Zone

export const View = ({ view }: { view: ClientView<"model", cnst.Model> }) => (

  <Load.View

    view={view}

    renderView={(model) => <Model.View.General model={model} />}

/>

);

Props Configuration

Option	Type	Default	Description	Example
sliceName	string	model	Name for data slice in global state	`"product"`
init	ClientInit<model>	undefined	Initialization data for the component	`modelInit`
query	QueryProps	{}	Query parameters for data fetching	`{ status: 'active' }`
className	string	undefined	Custom styling classes	`"p-4 bg-base-200"`

sliceName:string:model

Name for data slice in global state

"product"

init:ClientInit<model>:undefined

Initialization data for the component

modelInit

query:QueryProps:{}

Query parameters for data fetching

{ status: 'active' }

className:string:undefined

Custom styling classes

"p-4 bg-base-200"

Integration Patterns

Zone components integrate with page components using the Load.Page pattern:

// Page component integration

export default function ModelPage() {

  return (

    <Load.Page

      loader={async () => {

        const { modelInit } = await fetch.initModel();

        return { modelInit };

}}

      render={({ modelInit }) => (

        <div className="container mx-auto p-4">

          <Model.Zone.Card init={modelInit} />

        </div>

)}

/>

);

Best Practices

Follow these guidelines when working with Zone components:

Keep Zone components focused on presentation and composition
Delegate business logic to services and signals
Use consistent naming patterns (Admin, View, Card)
Provide className props for styling flexibility
Create specialized Zone components for unique UI patterns

Advanced Patterns

// Real-time data integration

export const LiveFeed = ({ init }: { init: ClientInit<"model"> }) => {

  useEffect(() => {

    const unsubscribe = subscriptions.subscribeToModelUpdates();

    return () => unsubscribe();

  }, []);

  return (

    <Load.Units

      init={init}

      renderItem={(model) => <Model.Unit.Card model={model} />}

/>

);

};

// Conditional rendering

export const Card = ({ init, variant }) => (

  <Load.Units

    init={init}

    renderItem={(model) => {

      switch (variant) {

        case "compact":

          return <Model.Unit.CompactCard model={model} />;

        default:

          return <Model.Unit.Card model={model} />;

}}

/>

);

Troubleshooting

Issue	Solution
Client component rendering error	Add 'use client' directive at top of file
Props validation failed	Check ClientInit/ClientView types
Data not loading	Verify page component data fetching

Zone components create consistent UI patterns by composing smaller components into reusable layout containers

Quick Start

Released under the MIT License

Official Akan.js Consulting onAkansoft

System managed bybassman

Docs

Model.Zone.tsx File Guide