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▾
Show Details
A Unit card renders the light model: just enough to tell orders apart. A detailed view is what opens when a customer taps one — the exact size, every topping, the order time, and whether it is ready.
In Akan.js, three components work together to build a detailed view:
ViewWrapper (Util.tsx)
A clickable wrapper that triggers the view modal when clicked. Think of it as the "View Details" button functionality.
ViewModal (Model component)
A modal popup that displays when customers want to see details. It handles opening, closing, and data loading automatically.
Detail View (View.tsx)
The actual content inside the modal, showing all the order information in an organized layout.
This separation allows each component to have a single responsibility: the wrapper handles clicking, the modal handles the popup behavior, and the view handles the display formatting.
Add View Modal
Now let's add a view modal to our ice cream order page. This creates a popup window where customers can see all their order details in an organized format. The modal functions like a detailed receipt that appears when customers want to review their order information.
apps/koyo/lib/icecreamOrder/IcecreamOrder.Zone.tsx
This code renders each order as a card with its own view modal. Let's examine what each part does:
- Load.Units Component: Renders every order as a Unit card in a list, each showing basic order information
- Model.ViewModal: The modal popup for one order, opened when its View button is clicked. The id prop tells it which order it belongs to, and it loads that order's data automatically
The ViewModal component handles opening, closing, data loading, and content display automatically. Model.ViewEditModal adds Edit and Remove for the verbs a signal opens; ours opens only creation, so ViewModal is all we need.
Add View Button to Unit Cards
Now let's add a "View" button to each order's Unit card. This button provides a clear interface element that customers can click to access detailed order information. The button will be positioned and styled to integrate with the existing Unit card design.
apps/koyo/lib/icecreamOrder/IcecreamOrder.Unit.tsx
The key addition here is the ViewWrapper around the button:
- Model.ViewWrapper: This wraps our button and handles the click functionality to show the detailed view
- slice and modelId props: We pass the slice and modelId so the modal knows which order to display details for
- Button styling: The button uses the buttonRecipe primary variant for consistent styling across the app
Design Detail View
Now let's create the detailed view component in View.tsx that displays all the ice cream order information in a structured layout. This component will organize and present the order data in a readable format when the modal opens.
apps/koyo/lib/icecreamOrder/IcecreamOrder.View.tsx
This detailed view component creates a comprehensive display of the ice cream order:
Header Section
Shows an ice cream emoji, the order title from dictionary, and the order ID number for reference
Grid Layout
Uses a 2-column grid to organize field labels and values in a clean, scannable format
Visual Elements
Toppings display as colored badges, status shows with conditional styling, and timestamps are formatted for readability
Test Your Implementation
Let's test the detailed view implementation. Navigate to your ice cream order page and click the "View" button on any Unit card to verify that the system works correctly.
Testing Steps:
- Navigate to http://localhost:8282
- Create a new ice cream order if you don't have any
- Click the 'View' button on any Unit card
- Verify the modal opens with detailed order information
- Check that all fields display correctly with proper translations
A modal popup should appear displaying all order details: size, toppings (as colored badges), status (with conditional colors), and timestamps. The modal closes when you click outside it or press the X button.
What's Next?
In the next tutorial, we'll add status management functionality that allows shop staff to update orders from "active" to "processing" to "served". This will complete the order workflow system and provide full lifecycle management for ice cream orders.