Show Details

Imagine walking into an ice cream shop and placing an order. You'd want to see exactly what you ordered, right? Maybe check if you remembered to add those strawberries, or confirm the size you picked. That's exactly what detailed views do in our application - they give customers a complete, beautiful summary of their order that they can access anytime with just a click.

Here's a simpler way to think about it. The summary card is like seeing "Vanilla Cone" in your order list — just enough to know which order is yours. The detailed view is what you see when you tap on it: the exact size you picked, every topping you added, when you placed the order, and whether it's ready. It's the difference between a one-line note and the full story of your ice cream order!

In Akan.js, showing detailed views follows a clean architecture pattern. We use three main components that work together:

🎯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 that displays all the order information in a beautiful, 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/Edit Modal

Now let's add a View/Edit 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 creates a modal system that handles the display and editing of orders. Let's examine what each part does:

👆

Load.Units Component: Renders all order cards in a list format, with each card displaying basic order information

📱

Model.ViewEditModal: Creates the modal popup that appears when customers click to view details. It automatically loads order data and displays it in a structured format

The ViewEditModal component handles opening, closing, data loading, and content display automatically. You specify what content to show, and it manages the technical implementation. This approach allows you to add detailed views throughout your application with minimal code.

Add View Button to Cards

Now let's add a "View" button to each order 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 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 btn-primary and btn-xl classes 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 order card to verify that the system works correctly.

Testing Steps:

Navigate to http://localhost:4201/icecreamOrder
Create a new ice cream order if you don't have any
Click the 'View' button on any order 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.

Best Practices for Detail Views

Here are some important best practices to follow when creating detail views in Akan.js:

✅Use Dictionary Translations

Always use l() for displaying field names and values. This ensures consistency and proper multilingual support.

🎨Consistent Visual Hierarchy

Use grid layouts, consistent spacing, and clear visual separation between different pieces of information.

🔧Reusable Components

Separate the ViewWrapper logic from the actual view content. This allows the wrapper to be reused across different display contexts.

⚡Handle Empty States

Always provide fallback displays for empty or null values, like showing "No toppings" when the toppings array is empty.

What's Next?

You have successfully implemented detailed views for your ice cream orders. Customers can now click on any order to see all the specifics in an organized format. The modal system provides a clean interface for viewing order information.

🎉 What You've Accomplished:

✓ Created reusable ViewWrapper components
✓ Added view buttons to order cards
✓ Designed comprehensive detail views
✓ Implemented modal popup functionality
✓ Used proper translations and styling

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.