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. 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:

📦Load.Page

The Load.Page component handles data loading before rendering. It fetches both waiting and pickup orders simultaneously using Promise.all for optimal performance.

🎯IcecreamOrder.Zone.Card

Zone components connect slice data to UI rendering. By passing the init data and slice, the Zone automatically subscribes to real-time updates for that specific slice.

🚫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 automatically. The Zone component combined with useInterval creates this "live" experience - just like how airport departure boards constantly refresh to show the latest flight information.

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 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:

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.

1️⃣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.

2️⃣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.

3️⃣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.

4️⃣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.

🎉 What You've Accomplished:

✓ Created multiple slices for different data views
✓ Built a real-time customer dashboard
✓ Connected slices to Zone components
✓ Implemented automatic data refresh
✓ Learned slice component best practices

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.

Displaying with Slice

Dashboard Slice

Connect to Zone

Zone with Slice

Slice Component Rules

Quick Start