YouBothAgent▾
You — Business rules and flows you own. Read these yourself.
Both — Know the idea; your agent follows the details.
Agent — Conventions and references your agent follows. Look up as needed.
Introduction▾
Tutorials▾
Displaying with Slice
We want to show customers a real-time dashboard of ice cream order processing. Completed orders should be displayed prominently, and the list of ongoing orders should also be visible. By using Slice, you can present the same ice cream order data in real time from different perspectives for customers, staff, and administrators.
Dashboard Slice
First, let's declare a slice for the real-time dashboard to show to customers. You can display the waiting orders and the orders being picked up by querying them separately.
apps/koyo/lib/icecreamOrder/icecreamOrder.signal.ts
inWaiting slice is a slice that queries the waiting orders and inPickup slice is a slice that queries the orders being picked up. Each init() names its own guards, and the dashboard is public. When the slice is declared, the state and actions of the store are automatically created.
apps/koyo/lib/icecreamOrder/icecreamOrder.dictionary.ts
Just like labeling different shelves in an ice cream shop - "Ready for pickup", "Being made" - we need to give proper names to our slices in the dictionary. This ensures the UI displays meaningful labels and the slice functions are properly documented.
Connect to Zone
Now let's build the actual dashboard page that customers will see. Think of this like the large display screens in a cafe that show "Now Serving: Order #42" - it needs to show different views of the same order data simultaneously. We'll use Zone components to connect our slices to the UI and display them in real-time.
apps/koyo/page/dashboard.tsx
Don't forget to add the translation labels for the dashboard sections:
apps/koyo/lib/icecreamOrder/icecreamOrder.dictionary.ts
Let's break down how this dashboard page works:
fetch.initIcecreamOrderIn*()
Notice there is no await. Both slice queries leave the moment they are called, and destructuring the result gives one promise per field instead of a resolved object. Each promise goes straight to the Zone that renders it, so the pickup board and the waiting board arrive independently — a slow query on one never delays the other, and the page heading is on the wire before either lands.
IcecreamOrder.Zone.Card
Zone components connect slice data to UI rendering. init is the window the route already resolved, and slice names the store slice the Zone hydrates and that its controls write back to.
showControls={false}
For the customer-facing dashboard, we hide the action controls. Customers should only see the status, not modify orders. This is a common pattern for read-only displays.
Zone with Slice
For a real-time dashboard, the data needs to stay fresh. When a staff member changes an order status, customers watching the display should see it update on their own. The Zone component combined with useInterval refreshes the board on a timer - just like how airport departure boards re-read the schedule every few seconds.
Let's look at how to control the display with props and automatic refresh:
apps/koyo/lib/icecreamOrder/IcecreamOrder.Unit.tsx
The Unit component now accepts a showControls prop that determines whether to display action buttons. This simple flag allows the same Unit card component to be used in both staff management views (with controls) and customer dashboard views (without controls).
Now let's see how the Zone component manages automatic data refresh:
apps/koyo/lib/icecreamOrder/IcecreamOrder.Zone.tsx
Let's understand the key features of this Zone component:
useInterval
This is a plain 3-second poll: every mounted Zone re-runs the slice query whether anything changed or not, which is enough for one shop's board. Live sync is the real answer - a slice that declares .live() pushes each change to its subscribers, and Load.Units subscribes on its own with no interval at all.
refreshIcecreamOrder
The refresh function is automatically generated for each slice. It re-queries the data using the same conditions defined in the slice, ensuring consistent data fetching.
Load.Units
Load.Units handles rendering a list of items with proper loading states. It automatically manages the mapping from slice data to individual Unit cards.
Slice Component Rules
When working with slices and zones in Akan.js, following consistent patterns ensures your code remains maintainable and predictable. Think of these rules as the "house rules" of your ice cream shop - they keep everything running smoothly even as the shop grows.
One Slice, One Purpose
Each slice should have a clear, single purpose. inWaiting shows waiting orders, inPickup shows ready orders. Don't try to make a slice that does everything - create multiple focused slices instead.
Zone Matches Slice
Always pass the correct slice to Zone components. The slice connects the Zone to its data source and ensures refresh actions target the right slice.
Props Control Behavior
Use props like showControls to adapt component behavior for different contexts. This allows reusing the same component across staff views and customer displays.
Dictionary for All Labels
Always define slice names and related translations in the dictionary. This ensures consistent labeling across the application and enables proper internationalization.
In the next tutorial, we'll explore how to create dynamic page navigation and user experiences using Pages in Akan.js. This will allow customers to navigate through multi-step ordering flows and interactive interfaces.