Akan.js
Introduction
• Quick Start
• How it works
• Practice a Workflow
Tutorials
• Show Details
• Modifying Status
• Interact in Service
• Displaying with Slice
• UX with Pages
• Using Scalar
• Using Insight
• Relate Data
System Architecture
• Overview
• Backend System
• Frontend System
• Environment Variables
• Primitive Scalar Types
• Domain Based Modules
• CSS
Module Convention
• Overview
• model.constant.ts
• model.dictionary.ts
• model.document.ts
• model.service.ts
• model.signal.ts
• model.store.ts
• Model.Template.tsx
• Model.Unit.tsx
• Model.Util.tsx
• Model.View.tsx
• Model.Zone.tsx
Scalar Convention
• Overview
• scalar.constant.ts
• scalar.dictionary.ts
• scalar.document.ts

model.util.ts / [Model].Util.tsx

The Util module is a designated space for UI helpers, sub-components, and specific logic that supports your main application features. It is especially useful for packaging complex interactions, wrappers, and reusable logic to keep your 'Page' and 'Zone' files clean.
[Module].Util.tsx

Standard naming convention for module utilities.

Complex Logic

Encapsulate complex state management and store interactions.

Wrappers

Wrappers for server-side actions or navigation.

Packaging Complex Logic

When a feature requires local state (like Modals), form handling, and store interactions, encapsulate it in a Util component.
RefundModal Component

Wrapper for Server Actions

Use wrappers to handle client-side events that trigger server actions (via fetch) and navigation, while keeping children simpler.
CreateOrderWrapper

Endpoint Trigger Components

Simple button components that trigger specific business logic or endpoints.
ApproveButton

Context-Aware UI

Components that adapt their rendering based on the global store state (e.g. current path, user role).
ContextBackButton
Next
Quick Start
Released under the MIT License
Official Akan.js Consulting onAkansoft
Copyright © 2025 Akan.js. All rights reserved.
System managed bybassman