Training Manual

Training Manual

ngx-admin

Generated by DocAgent — automated codebase documentation analysis. Based on analysis of 100 screens. Subject matter expert review is recommended before distribution.

April 20, 2026

ngx-admin Application

Training Manual

Document Date: April 2026

Generated by DocAgent — automated codebase documentation analysis. Subject matter expert review is recommended before distribution.

About This Document

This Training Manual covers 100 screen(s) of the ngx-admin application.

Screens covered in this assessment:

Editors, Contacts, Electricity, Kitten, Rooms, Traffic, Country Orders, Chart (Country Orders), Back Side (Traffic Reveal Card), Map (Country Orders), Progress Section, Traffic Reveal Card, Legend Chart, Front Side (Profit Card), Traffic Cards Header, User Activity, Calendar Kit, Chat, Progress Bar, Form Inputs (Extra Components), Day Cell, Month Cell, Nebular Select, Extra Components, Alert, Visitors Analytics, Spinner In Buttons, Maps, Spinner Color, Leaflet, Pages, Tables, Dashboard, Icons, E Commerce, Footer, Chart Panel Header, Spinner, Chart Panel Summary, Player, Header, Calendar, Form Layouts, Window Form, Room Selector, Ui Features, Traffic Bar, Spinner In Tabs, Interactive Progress Bar, Datepicker, Form Inputs (Forms), Charts (E-Commerce), Bubble, Profit Card, Slide Out, Back Side (Profit Card), Smart Table, Typography, Modal Overlays, Visitors Statistics, Ckeditor, Grid, Echarts, Not Found, Visitors Analytics Chart, Tiny Mce (Editors), Front Side (Earning Card), Electricity Chart, Search Fields, Dialog Name Prompt, Tooltip, Search Map, Map (Search Map), Window, Dialog, Miscellaneous, Gmaps, Popovers, Search (Maps), Tree Grid, Showcase Dialog, Toastr, Search Input, Tiny Mce (Theme Component), Status Card, Front Side (Traffic Reveal Card), Earning Card, Solar, Security Cameras, Temperature Dragger, Charts (Shell), Chartjs, Temperature, D3, Back Side (Earning Card), Charts Panel, Forms, Weather, Buttons, Spinner Sizes

Screens and features not included in the assessed documentation are outside the scope of this document.

How to Use This Manual {#how-to-use-this-manual}

This manual is organized as a guided learning journey through the ngx-admin application. You will move from foundational orientation skills through increasingly specific feature areas.

Structure

Each section follows this pattern:

Estimated Total Time

Tracking Your Progress

Use the Skills Checklist at the end of this document to mark off each skill as you complete it. You can work through the manual in order or jump to specific modules relevant to your role.

Prerequisites {#prerequisites}

Before starting this training, ensure you have:

• An active account with login credentials for the ngx-admin application

• A modern web browser (Chrome, Firefox, Edge, or Safari — current version recommended)

• Internet access for map tile loading and any CDN-hosted resources (CKEditor, TinyMCE)

• Screen resolution of at least 1024×768 (some features are optimized for wider screens)

• No special permissions required for the demonstration and showcase features covered in this manual

Note: This application is a demonstration and component showcase platform. Most data displayed is sample data. No real transactions, orders, or user records are affected by your actions during training.

Foundation Skills {#foundation-skills}

Complete these foundation skills before starting the training modules. They teach controls and patterns that appear throughout the application.

FS-1: Navigating the Application Shell {#fs-1-navigating-the-application-shell}

What it is and where you'll encounter it: The application shell is the persistent frame around every screen — the header bar at the top and the sidebar navigation menu on the left. You will use these on every screen in the application.

Complete Walkthrough:

The application shell has two main regions:

The Header Bar (top of every page):

• Hamburger/Toggle button (left side): Collapses or expands the sidebar menu. Click it to gain more screen space when working with charts or tables.

• Home link: Navigates to the E-Commerce dashboard (the application's home page).

• Theme selector (right side): A dropdown to switch between four visual themes — Light, Dark, Cosmic, and Corporate. Changing the theme affects colors across the entire application.

• User avatar/name (right side): Displays your profile picture and name. On smaller screens, only the picture is shown.

• User context menu: Click your avatar to reveal a menu with Profile and Log out options.

The Sidebar Menu (left side):

• The sidebar contains all navigation links organized into groups.

• Top-level items with a link (e.g., "E-commerce", "IoT Dashboard") navigate directly when clicked.

• Top-level items with an arrow (e.g., "Forms", "Charts") expand to reveal child links when clicked.

• The currently active page is highlighted in the menu.

Practice Exercise:

1. Click the hamburger button in the header to collapse the sidebar. Notice how the content area expands.

2. Click the hamburger button again to restore the sidebar.

3. Click the Theme selector and choose Dark. Observe how the colors change across the entire application.

4. Switch the theme back to Light (labeled "Default").

5. Expand the Forms menu group by clicking it. Confirm that child items appear (Form Inputs, Form Layouts, Buttons, Datepicker).

6. Click Form Inputs to navigate to that page.

Knowledge Check:

• What happens when you click a top-level menu item that has child items?

• How do you return to the application's home page from any screen?

Tips:

• Tip: Collapsing the sidebar is useful when viewing wide charts or tables that need more horizontal space.

• Tip: The theme you select persists while you are on the page. Refreshing the browser resets to the default theme.

FS-2: Working with Data Tables {#fs-2-working-with-data-tables}

What it is and where you'll encounter it: The application uses two types of data tables: the Smart Table (at /tables/smart-table) and the Tree Grid (at /tables/tree-grid). Both display structured data in rows and columns with interactive features.

Complete Walkthrough:

Smart Table features:

• Column headers: Click any column header to sort the table by that column. Click again to reverse the sort direction. An arrow indicator shows the active sort column and direction.

• Filter row: Below each column header is a text input. Type in any filter box to narrow the displayed rows in real time. The table updates as you type.

• Add New button (toolbar, top-left): Opens an inline editable row at the top of the table for entering a new record.

• Edit button (pencil icon on each row): Converts that row into an editable form in place.

• Delete button (trash icon on each row): Triggers a confirmation dialog before removing the row.

• Save/Cancel buttons: Appear when a row is in edit or add mode.

Tree Grid features:

• Expand/Collapse toggle: Directory rows have a toggle arrow. Click it to expand or collapse child rows.

• Column headers: Click to sort. An arrow shows the active sort direction.

• Responsive columns: On narrower screens, some columns (Size, Kind, Items) are automatically hidden to keep the table readable.

Practice Exercise:

1. Navigate to Tables → Smart Table using the sidebar.

2. Click the Last Name column header to sort by last name. Click it again to reverse the sort.

3. Type "Sven" in the filter box under the First Name column. Observe the table filter in real time.

4. Clear the filter by deleting your text.

5. Navigate to Tables → Tree Grid.

6. Click the expand arrow next to Projects to reveal its child files.

7. Click the Name column header to sort alphabetically.

Knowledge Check:

• How do you filter a Smart Table to show only rows matching a specific value?

• What visual indicator tells you which column the Smart Table is currently sorted by?

Tips:

• Tip: You can filter multiple columns simultaneously — each filter box works independently.

• Gotcha: In the Tree Grid, the Items column shows a count of child entries. This count is informational and may not always match the number of visible child rows.

FS-3: Understanding Status Indicators and Theme Colors {#fs-3-understanding-status-indicators-and-theme-colors}

What it is and where you'll encounter it: Throughout the application, UI elements use a consistent set of five color-coded status values to communicate meaning. You will see these on buttons, cards, progress bars, alerts, and chart legends.

The Five Status Values:

These colors shift slightly depending on the active theme (Light, Dark, Cosmic, Corporate).

Practice Exercise:

1. Navigate to Forms → Buttons using the sidebar.

2. Identify buttons in each of the five status colors.

3. Navigate to Dashboard (the IoT Dashboard).

4. Look at the four device status cards (Light, Roller Shades, Wireless Audio, Coffee Maker). Note which status color each card uses.

5. Switch the theme to Corporate using the theme selector in the header. Observe how the card colors change.

6. Switch back to Light (Default).

Knowledge Check:

• Which status color typically indicates a warning or cautionary state?

• Why might the same card appear in a different color when you switch themes?

Tips:

• Tip: When reading charts and legends, the status color system helps you quickly identify which data series represents positive vs. negative trends.

FS-4: Using Date and Period Selectors {#fs-4-using-date-and-period-selectors}

What it is and where you'll encounter it: Many screens allow you to filter data by time period. You will encounter period selectors (Week / Month / Year toggle buttons) on the Traffic, Electricity, User Activity, Traffic Reveal Card, and Charts Panel screens. You will encounter a date picker on the Forms → Datepicker screen.

Period Selector (toggle buttons):

• A row of buttons labeled Week, Month, and Year (or similar).

• Click a button to switch the displayed data to that time period.

• The active period button is visually highlighted.

• Changing the period updates the chart or list data immediately.

Date Picker (calendar popup):

• Click a date input field to open a calendar popup.

• Navigate months using the left/right arrows in the calendar header.

• Click a date to select it. The input field updates with your selection.

• Dates outside the allowed range (if configured) appear dimmed and cannot be selected.

Practice Exercise:

1. Navigate to Dashboard → Traffic (if available in the sidebar, or navigate directly).

2. Click the Month button in the period selector. Observe the chart update.

3. Click Year. Observe the change.

4. Click Week to return to the default view.

5. Navigate to Forms → Datepicker.

6. Click the first date input field to open the calendar popup.

7. Click a date within the highlighted (selectable) range to select it.

8. Observe the input field update with your chosen date.

Knowledge Check:

• What happens to the chart data when you click a different period button?

• How do you identify which dates are selectable in the date picker?

Tips:

• Tip: Period selectors do not change the URL — if you refresh the page, the view resets to the default period.

• Gotcha: On some screens, changing the period selector does not reload data from the server — it filters already-loaded data on the client side.

FS-5: Working with Interactive Charts {#fs-5-working-with-interactive-charts}

What it is and where you'll encounter it: The application uses Apache ECharts and Chart.js to render interactive charts across the E-Commerce dashboard, Charts section, and individual dashboard widgets. All charts share common interaction patterns.

Common Chart Interactions:

Reading Chart Legends:

• Legends appear alongside charts and identify each data series by color and label.

• The legend colors match the corresponding chart elements.

Practice Exercise:

1. Navigate to E-Commerce (the home page) using the sidebar or home link.

2. Find a chart on the page (e.g., the Orders or Profit chart).

3. Hover your mouse slowly over the chart bars or lines. Observe the tooltip that appears.

4. Navigate to Charts → Echarts.

5. Hover over data points on any chart to read tooltip values.

Knowledge Check:

• How do you read the exact value of a data point on a chart?

• What does a chart legend tell you?

Tips:

• Tip: If a chart appears blank or very small, try resizing your browser window slightly — charts resize automatically to fit their container.

• Tip: Tooltips disappear when you move your mouse away from the data point.

FS-6: Using Modal Overlays (Dialogs, Windows, Toasts) {#fs-6-using-modal-overlays-dialogs-windows-toasts}

What it is and where you'll encounter it: The application uses several types of overlay UI patterns. You will encounter these in the Modal Overlays section and throughout the application when actions require confirmation or additional input.

Types of Overlays:

Practice Exercise:

1. Navigate to Modal Overlays → Dialog using the sidebar.

2. Click the button to open the basic dialog. Read the content.

3. Click the Dismiss button to close it.

4. Click the button to open the name prompt dialog. Type your name and click Submit.

5. Observe that your name appears in the list below the button.

6. Navigate to Modal Overlays → Toastr.

7. Click the Make Toast button. Observe the notification that appears at the edge of the screen.

Knowledge Check:

• What is the difference between a Dialog and a Window overlay?

• How does a Toast notification differ from a Dialog?

Tips:

• Tip: Some dialogs can be closed by clicking the dark backdrop behind them. Others require you to use the explicit close button.

• Gotcha: A window opened with "no backdrop" and "no ESC close" can only be dismissed using the close button in the window's title bar.

FS-7: Using Progress Bars {#fs-7-using-progress-bars}

What it is and where you'll encounter it: Progress bars appear on the E-Commerce Progress Section screen and in the Extra Components → Progress Bar showcase. They visually represent a percentage value (0–100) using a filled bar with a status color.

Reading a Progress Bar:

• The filled portion of the bar represents the current value as a percentage of the total.

• The color of the bar indicates its status (see FS-3: Understanding Status Indicators).

• Some progress bars display the percentage value as text inside or beside the bar.

Interactive Progress Bar:

• The Interactive Progress Bar (at Extra Components → Progress Bar) has + and − buttons.

• Each click changes the value by 25 percentage points.

• The bar color changes automatically based on the value: red (0–25%), orange (26–50%), blue (51–75%), green (76–100%).

Practice Exercise:

1. Navigate to Extra Components → Progress Bar using the sidebar.

2. Find the interactive progress bar section.

3. Click the + (increase) button twice. Observe the bar fill and color change.

4. Click the − (decrease) button once. Observe the change.

5. Continue clicking until the bar reaches 100%. Note the color.

6. Click − until the bar reaches 0%. Note the color.

Knowledge Check:

• At what value does the progress bar color change from orange to blue?

• What happens when you try to click the − button when the value is already 0?

Tips:

• Tip: The progress bar color changes are automatic — you do not need to configure them manually.

FS-8: Working with Spinners {#fs-8-working-with-spinners}

What it is and where you'll encounter it: Spinners are animated loading indicators that appear when the application is processing or loading data. The Extra Components → Spinner section showcases spinner variants. You may also see spinners embedded inside buttons.

What spinners indicate:

• A spinner means the application is busy — either loading data, processing a request, or simulating a delay.

• Spinners automatically disappear when the operation completes.

Spinner variants in the showcase:

• Spinner Colors: Shows the spinner in each of the five status colors.

• Spinner Sizes: Shows the spinner at different size scales (tiny through giant).

• Spinner In Buttons: Shows a spinner embedded inside a button during a loading state.

• Spinner In Tabs: Shows a spinner inside a tabbed interface.

Practice Exercise:

1. Navigate to Extra Components → Spinner using the sidebar.

2. Click the trigger button to start the loading animation. Observe the spinner appear.

3. Wait 3 seconds for it to automatically stop.

4. Navigate to Extra Components → Spinner → Spinner In Buttons (if available as a sub-item).

5. Click the trigger button for the large button group. Observe the spinners inside the buttons.

6. Wait 3 seconds for the animation to stop automatically.

Knowledge Check:

• How long does the demo spinner animation last before stopping automatically?

• What does a spinner inside a button indicate?

Tips:

• Tip: In production use, spinners indicate real loading activity. In this showcase application, they are triggered manually for demonstration purposes.

Module 1: Getting Oriented — Your First Session {#module-1-getting-oriented}

Learning Objectives

After completing this module, you will be able to:

• Identify the major regions of the application layout

• Navigate to any section using the sidebar menu

• Switch between visual themes

• Use the header controls including the user menu and search input

Estimated Time: 30–40 minutes

Lesson 1.1: Understanding the Application Layout {#lesson-1-1-understanding-the-application-layout}

What You'll Learn: When you first open ngx-admin, you need to understand what you're looking at before you can use it effectively. This lesson maps out every region of the screen so you always know where to look.

Before You Begin: No prerequisites — you can start this lesson at any time.

Walkthrough:

1. Open the application in your browser. You should see the main dashboard page.

2. Look at the top of the screen. This horizontal bar is the Header. It spans the full width of the page and is always visible.

3. Within the Header, locate the hamburger icon (three horizontal lines) on the far left. This is the sidebar toggle.

4. Look at the left side of the screen. This vertical panel is the Sidebar Menu. It contains all navigation links.

5. Look at the large area to the right of the sidebar. This is the Main Content Area. Every page you navigate to renders here.

6. Look at the bottom of the page. This is the Footer, which shows attribution information and social media links.

7. Within the Header, look at the right side. You should see a theme selector dropdown, and your user avatar or name.

You should now see a clear mental map of the four regions: Header (top), Sidebar (left), Content Area (center-right), Footer (bottom).

[Screenshot: Full application layout with Header, Sidebar, Content Area, and Footer labeled]

Try It Yourself:

Navigate to three different pages using the sidebar and observe that the Header, Sidebar, and Footer remain constant while only the Content Area changes:

1. Click E-Commerce in the sidebar. Note what appears in the Content Area.

2. Click Tables → Smart Table in the sidebar. Note what changes.

3. Click Maps → Leaflet Maps in the sidebar. Note what changes.

Confirm that the Header and Footer look identical on all three pages.

Knowledge Check:

• Which region of the application changes when you navigate to a new page?

• Which regions remain constant regardless of which page you are on?

Tips & Gotchas:

• Tip: The Footer contains a copyright notice and social media links. The social media links are placeholder links in this version of the application.

• Tip: On smaller screens (tablets, narrow windows), the sidebar may be hidden by default. Use the hamburger button to show it.

Lesson 1.2: Navigating with the Sidebar Menu {#lesson-1-2-navigating-with-the-sidebar-menu}

What You'll Learn: The sidebar menu is your primary navigation tool. This lesson teaches you how to use it efficiently, including expanding groups and identifying the active page.

Before You Begin: Complete Lesson 1.1: Understanding the Application Layout first.

Walkthrough:

1. Look at the sidebar. You will see a list of navigation items, some with icons.

2. Find the item labeled E-commerce near the top. It has a home icon and is marked as the application's home page.

3. Click E-commerce. The Content Area updates to show the E-Commerce dashboard. In the sidebar, the E-commerce item is now highlighted to show it is the active page.

4. Find the item labeled Forms in the sidebar. It has a right-pointing arrow indicating it has child items.

5. Click Forms. The item expands to reveal child links: Form Inputs, Form Layouts, Buttons, and Datepicker.

6. Click Form Inputs. The Content Area navigates to the Form Inputs page. The sidebar now shows Form Inputs as the active item, nested under Forms.

7. Click Forms again to collapse the group.

8. Find the FEATURES label in the sidebar. This is a non-clickable section divider — it groups related items visually but does not navigate anywhere.

[Screenshot: Sidebar with an expanded group showing child items and an active item highlighted]

Try It Yourself:

1. Expand the Charts group in the sidebar.

2. Click Echarts to navigate to that page.

3. Now expand the Modal Overlays group.

4. Click Dialog to navigate there.

5. Confirm that the sidebar correctly highlights Dialog as the active item under Modal Overlays.

Knowledge Check:

• How can you tell which page you are currently on by looking at the sidebar?

• What does the arrow icon next to a sidebar item indicate?

Tips & Gotchas:

• Tip: You can have multiple groups expanded at the same time. Expanding one group does not collapse others.

• Gotcha: The FEATURES section header in the sidebar is a visual divider, not a clickable link. Clicking it does nothing.

Lesson 1.3: Switching Themes {#lesson-1-3-switching-themes}

What You'll Learn: ngx-admin supports four visual themes. Switching themes changes the color palette of the entire application. This lesson teaches you how to switch themes and what to expect.

Before You Begin: Complete Lesson 1.1: Understanding the Application Layout first.

Walkthrough:

1. Look at the Header bar. On the right side, find the theme selector — it is a dropdown control showing the current theme name.

2. Click the theme selector to open the dropdown. You will see four options:

   • Light (also called "Default") — a light background with blue accents

   • Dark — a dark background with lighter text

   • Cosmic — a deep purple/dark theme

   • Corporate — a professional light theme with different accent colors

3. Click Dark. The entire application immediately switches to a dark color scheme. The sidebar, header, cards, and charts all update.

4. Navigate to Dashboard using the sidebar. Observe how the status cards appear in the Dark theme.

5. Click the theme selector again and choose Cosmic. Observe the purple color scheme.

6. Click the theme selector and choose Corporate. Notice that the Dashboard status cards now use different colors than in the other themes.

7. Click the theme selector and choose Light to return to the default.

[Screenshot: Theme selector dropdown open showing four theme options]

Try It Yourself:

1. Switch to the Cosmic theme.

2. Navigate to E-Commerce (the home page).

3. Observe how the charts and cards look in the Cosmic theme.

4. Switch to Corporate and observe the same page.

5. Note at least two visual differences between the Cosmic and Corporate themes.

6. Switch back to Light (Default) when done.

Knowledge Check:

• How many themes are available in the application?

• Does switching themes affect only the current page, or the entire application?

Tips & Gotchas:

• Tip: Theme changes take effect immediately — you do not need to save or confirm.

• Gotcha: The theme selection is not saved between browser sessions. Each time you reload the application, it starts in the default Light theme.

Lesson 1.4: Using the Header Controls {#lesson-1-4-using-the-header-controls}

What You'll Learn: The Header contains several controls beyond the sidebar toggle and theme selector. This lesson covers the user menu and the search input.

Before You Begin: Complete Lesson 1.1: Understanding the Application Layout first.

Walkthrough:

Using the User Menu:

1. Look at the right side of the Header. Find your user avatar (a profile picture or initials) and/or your name.

2. Click the avatar or name. A small context menu appears with two options: Profile and Log out.

3. The Profile option would navigate to your profile page (behavior depends on application configuration).

4. The Log out option would end your session and return you to the login screen.

5. Click elsewhere on the page to dismiss the menu without selecting anything.

Using the Search Input:

1. Look at the Header. Find the magnifying glass icon (search icon).

2. Click the magnifying glass icon. A text input field appears next to the icon.

3. Type a few characters. The search input emits your query to the application for processing.

4. Click elsewhere on the page (outside the input). The input field collapses back to just the icon.

Navigating Home:

1. Click the home link in the Header (typically the application logo or a home icon near the left side of the Header).

2. You should be taken to the E-Commerce dashboard, which is the application's designated home page.

[Screenshot: Header with user menu open showing Profile and Log out options]

Try It Yourself:

1. Click the magnifying glass icon in the Header.

2. Type the word "dashboard" into the search field.

3. Click elsewhere to collapse the search field.

4. Click the user avatar to open the user menu.

5. Observe the two menu options without clicking either.

6. Press Escape or click elsewhere to close the menu.

Knowledge Check:

• What two options appear in the user context menu?

• How do you collapse the search input field after opening it?

Tips & Gotchas:

• Tip: On screens narrower than a certain width, the Header shows only your profile picture, not your name. This is normal responsive behavior.

• Gotcha: The search input in the Header emits your query to the application but the actual search results behavior depends on how the application is configured. In this demonstration version, search may not return results.

Module 2: Exploring the Dashboard {#module-2-exploring-the-dashboard}

Learning Objectives

After completing this module, you will be able to:

• Read and interpret the IoT Dashboard status cards

• Switch between time periods on the Electricity and Traffic widgets

• Select rooms and control media playback

• Interpret solar energy and temperature data

• Navigate between single-camera and multi-camera views in Security Cameras

Estimated Time: 45–60 minutes

Lesson 2.1: Reading the IoT Dashboard Overview {#lesson-2-1-reading-the-iot-dashboard-overview}

What You'll Learn: The IoT Dashboard is the application's secondary dashboard (the E-Commerce dashboard is the home page). It displays smart-home device status cards and a solar energy widget. This lesson teaches you how to read and interpret this overview.

Before You Begin: Complete Module 1 first. This screen uses status indicators — review FS-3: Understanding Status Indicators if needed.

Walkthrough:

1. In the sidebar, click IoT Dashboard. The Content Area loads the IoT Dashboard.

2. Look at the status cards section. You should see four cards, each representing a smart-home device:

   • Light — with a lightbulb icon

   • Roller Shades — with a roller shades icon

   • Wireless Audio — with an audio icon

   • Coffee Maker — with a coffee maker icon

3. Each card displays the device name and its current status. The card's color (primary, success, info, warning) indicates the device category.

4. Look for the Solar Energy Consumption widget. It displays a numeric value representing current solar output.

5. Note that the status card colors may differ depending on the active theme. Switch to Corporate theme and observe how the card colors change. Switch back to Light when done.

[Screenshot: IoT Dashboard showing four status cards and the solar widget]

Try It Yourself:

1. Navigate to the IoT Dashboard.

2. Identify which device is represented by the Warning status color in the default Light theme.

3. Switch to the Corporate theme.

4. Identify which device now uses the Warning status color.

5. Note the difference — the same device may use a different color in different themes.

6. Switch back to Light (Default).

Knowledge Check:

• How many device status cards are shown on the IoT Dashboard?

• Why might the same device card appear in a different color when you switch themes?

Tips & Gotchas:

• Tip: The status card colors are theme-specific design decisions, not indicators of device health. A "warning" color does not mean the device has a problem.

• Gotcha: The solar value displayed is sample data and does not represent real energy readings.

Lesson 2.2: Monitoring Electricity Consumption {#lesson-2-2-monitoring-electricity-consumption}

What You'll Learn: The Electricity screen shows electricity usage data broken down by category and time period. You will learn to switch between weekly, monthly, and yearly views and interpret the consumption metrics.

Before You Begin: Complete Lesson 2.1. Review FS-4: Using Date and Period Selectors and FS-5: Working with Interactive Charts.

Walkthrough:

1. In the sidebar, navigate to the Electricity screen. (It is located under the Dashboard section.)

2. The screen loads showing electricity data in the default Week view.

3. Look at the time period selector at the top of the screen — three buttons labeled Week, Month, and Year.

4. Click Month. The displayed data updates to show monthly electricity metrics.

5. Click Year to see the yearly view.

6. Click Week to return to the default.

7. Look at the electricity list panel. Each row represents a category (e.g., Heating, Lighting). For each category, you can see:

   • The month label

   • The delta — a percentage showing how consumption changed (e.g., "-8%")

   • A directional indicator (up or down arrow) showing whether consumption increased or decreased

   • The kWh value — kilowatt-hours consumed

   • The cost — the monetary cost for that period

8. Look at the electricity chart panel. It visualizes the same data as a bar or line chart.

[Screenshot: Electricity screen showing the list panel and chart with the Month period selected]

Try It Yourself:

1. Navigate to the Electricity screen.

2. Switch to the Year view using the period selector.

3. Find the category with the highest kWh value in the yearly view.

4. Switch to the Month view.

5. Find a category where the delta indicator shows a decrease (down arrow). Note the delta percentage.

6. Switch back to Week.

Knowledge Check:

• What does the delta value on an electricity category row represent?

• What does a down arrow next to the delta value indicate?

Tips & Gotchas:

• Tip: The kWh column shows kilowatt-hours — the standard unit for measuring electricity consumption. Higher values mean more energy used.

• Tip: A down arrow with a negative delta (e.g., "-12%") is a favorable indicator — it means consumption decreased.

Lesson 2.3: Controlling Rooms and Media Playback {#lesson-2-3-controlling-rooms-and-media-playback}

What You'll Learn: The Rooms screen lets you select a room from an interactive floor plan and control media playback for that room. This lesson teaches you how to select rooms and use the player controls.

Before You Begin: Complete Lesson 2.1.

Walkthrough:

1. Navigate to the Rooms screen (under the Dashboard section in the sidebar).

2. The screen shows a floor plan with four clickable rooms: Kitchen, Bedroom, Living Room, and Hallway. The Living Room is pre-selected by default.

3. Look at the media player below the floor plan. It shows the currently playing track with album art, track name, artist name, and playback controls.

4. Click the Bedroom room on the floor plan. The player collapses (on smaller screens) and the selected room changes.

5. Click the Bedroom room again (the same room you just selected). The player expands to show the full player view.

6. In the player, locate the following controls:

   • Previous track button (left arrow)

   • Play/Pause button (center)

   • Next track button (right arrow)

   • Shuffle toggle button

   • Loop toggle button

   • Volume slider

   • Progress bar (shows current position in the track)

7. Click the Play/Pause button to start playback. Click it again to pause.

8. Click the Next track button to advance to the next song.

9. Drag the Volume slider to adjust the volume.

10. Look for the collapse arrow icon at the top of the card. Click it to collapse the player view.

[Screenshot: Rooms screen showing the floor plan with Living Room selected and the media player expanded]

Try It Yourself:

1. Navigate to the Rooms screen.

2. Click the Kitchen room on the floor plan.

3. Click the Kitchen room again to expand the player.

4. Click the Shuffle button to enable shuffle mode.

5. Click the Next track button three times. Observe that tracks are selected randomly (not sequentially) when shuffle is on.

6. Click the Shuffle button again to disable shuffle.

7. Click the Loop button to enable loop mode.

8. Observe that the track repeats when it ends (or click Next — the same track should reload).

9. Disable Loop mode.

Knowledge Check:

• What happens when you click a room that is already selected?

• What is the difference between Shuffle mode and Loop mode?

Tips & Gotchas:

• Tip: Selecting a different room collapses the player first. Selecting the same room expands it. This is the intended toggle behavior.

• Gotcha: When Loop mode is on, clicking Previous or Next does not change the track — it reloads the same track. Disable Loop to navigate between tracks.

Lesson 2.4: Monitoring Traffic Consumption {#lesson-2-4-monitoring-traffic-consumption}

What You'll Learn: The Traffic widget displays network or application traffic data as a chart. You will learn to read the chart and use the period selector.

Before You Begin: Complete Lesson 2.1. Review FS-4: Using Date and Period Selectors and FS-5: Working with Interactive Charts.

Walkthrough:

1. Navigate to the Traffic screen (under the Dashboard section).

2. The screen shows a compact card titled "Traffic Consumption" with a chart and a period selector dropdown.

3. Look at the period selector — a dropdown (labeled with the current period, defaulting to Month). Click it to see the options: Week, Month, Year.

4. Select Week from the dropdown. The label updates to show "Week".

5. Select Year. The label updates to show "Year".

6. Hover over the chart to see tooltip values for individual data points.

Note: In this version of the application, changing the period selector updates the label but the chart data displayed reflects the data loaded when the page first opened. The chart does not reload with new data when you change the period.

[Screenshot: Traffic Consumption card showing the chart and period selector dropdown]

Try It Yourself:

1. Navigate to the Traffic screen.

2. Use the period selector to switch to Year.

3. Hover over several data points on the chart to read their values.

4. Switch back to Month.

5. Identify the highest and lowest data points visible on the chart.

Knowledge Check:

• What does the Traffic Consumption chart visualize?

• What is the default period shown when you first open the Traffic screen?

Tips & Gotchas:

• Tip: The Traffic chart is a compact "tiny" card — it is designed to give a quick at-a-glance view, not detailed analysis.

• Gotcha: Changing the period selector on this screen does not reload the chart data. The chart always shows the data that was loaded when the page opened.

Lesson 2.5: Viewing Security Cameras {#lesson-2-5-viewing-security-cameras}

What You'll Learn: The Security Cameras screen displays video feeds from multiple cameras. You will learn to switch between the grid view (all cameras) and the single-camera view.

Before You Begin: Complete Lesson 2.1.

Walkthrough:

1. Navigate to the Security Cameras screen (under the Dashboard section).

2. The screen opens in grid view, showing all available camera feeds simultaneously.

3. Click on any camera feed in the grid. The view switches to single-camera view, showing that camera's feed in a larger, focused display.

4. Look for a back or return control (typically an arrow or button) to return to the grid view. Click it to go back.

5. Notice that the first camera in the list is pre-selected when the page loads.

6. On smaller screens, the action buttons (controls) appear smaller. On wider screens, they appear at medium size.

[Screenshot: Security Cameras screen in grid view showing multiple camera feeds]

Try It Yourself:

1. Navigate to the Security Cameras screen.

2. Click the second camera feed in the grid.

3. Observe the single-camera view.

4. Return to the grid view.

5. Click the last camera feed in the grid.

6. Observe the single-camera view for that camera.

7. Return to the grid view.

Knowledge Check:

• How do you switch from grid view to single-camera view?

• Which camera is pre-selected when the Security Cameras page first loads?

Tips & Gotchas:

• Tip: The camera feeds shown are sample/demo data. In a production deployment, these would show live or recorded video streams.

• Gotcha: Refreshing the page always returns you to the grid view — the selected camera is not preserved in the URL.

Lesson 2.6: Reading Solar and Temperature Data {#lesson-2-6-reading-solar-and-temperature-data}

What You'll Learn: The Dashboard includes widgets for solar energy and temperature/humidity monitoring. This lesson teaches you to read these widgets and interact with the temperature controls.

Before You Begin: Complete Lesson 2.1.

Walkthrough:

Solar Widget:

1. Navigate to the IoT Dashboard (or the Solar screen if available separately).

2. Find the Solar Energy Consumption card. It shows a donut chart with a percentage fill.

3. The filled arc represents the percentage of solar energy consumed. The text below shows the consumed kWh value and the total capacity (e.g., "6.421 kWh out of 8.421 kWh").

Temperature Widget:

1. Navigate to the Temperature screen (under the Dashboard section).

2. The screen shows two panels: Temperature and Humidity.

3. Each panel displays the current value on a circular arc gauge (the Temperature Dragger).

4. Look for the ON/OFF toggle on each panel. The default state is ON for both.

5. Look for the mode selector on each panel:

   • Temperature defaults to Cool mode

   • Humidity defaults to Heat mode

6. Click the ON/OFF toggle on the Temperature panel to turn it off. Observe the gauge collapse to the minimum value.

7. Click the toggle again to turn it back on. The gauge returns to the previous value.

8. Try dragging the arc thumb (the circular handle on the gauge) clockwise or counterclockwise to adjust the temperature setpoint.

[Screenshot: Temperature screen showing the circular arc gauges for temperature and humidity]

Try It Yourself:

1. Navigate to the Temperature screen.

2. Drag the Temperature gauge thumb clockwise to increase the value. Note the new value.

3. Drag it counterclockwise to decrease the value.

4. Toggle the Humidity panel OFF. Observe the gauge.

5. Toggle it back ON.

6. Switch the Temperature mode from Cool to Heat (if a mode selector is visible).

Knowledge Check:

• What does the filled arc on the Solar Energy donut chart represent?

• What happens to the temperature gauge when you toggle the panel OFF?

Tips & Gotchas:

• Tip: The temperature gauge uses a drag interaction — click and hold the thumb, then drag around the arc. Do not just click without dragging.

• Gotcha: The solar widget shows hardcoded sample values ("6.421 kWh out of 8.421 kWh"). These numbers do not update dynamically in this demonstration version.

Module 3: Exploring the E-Commerce Analytics Dashboard {#module-3-exploring-the-e-commerce-analytics-dashboard}

Learning Objectives

After completing this module, you will be able to:

• Navigate the E-Commerce dashboard and identify its key sections

• Select countries on the interactive map and read order statistics

• Flip traffic and earning cards to reveal chart details

• Read visitor analytics charts and pie charts

• Switch between chart types and time periods in the Charts Panel

• Interpret progress metrics and user activity data

Estimated Time: 50–65 minutes

Lesson 3.1: Reading the E-Commerce Overview {#lesson-3-1-reading-the-e-commerce-overview}

What You'll Learn: The E-Commerce dashboard is the application's home page. It aggregates multiple analytics widgets into a single view. This lesson orients you to its layout.

Before You Begin: Complete Module 1. Review FS-5: Working with Interactive Charts.

Walkthrough:

1. Click the E-commerce item in the sidebar (or click the home link in the Header). The E-Commerce dashboard loads.

2. Scan the page. You will see multiple card-based widgets arranged in a grid. These include:

   • A Profit Card (front and back sides)

   • A Earning Card (front and back sides)

   • A Traffic Reveal Card (front and back sides)

   • A Country Orders map and chart

   • A Visitors Analytics section

   • A Charts Panel with Orders and Profit charts

   • A Progress Section with KPI metrics

   • A User Activity table

3. Hover over any chart to see tooltip values.

4. The page is designed to be scrolled — scroll down to see all widgets.

[Screenshot: E-Commerce dashboard showing the full layout of widgets]

Try It Yourself:

1. Navigate to the E-Commerce dashboard.

2. Scroll to the bottom of the page to see all available widgets.

3. Hover over the Profit chart to read a tooltip value.

4. Count how many distinct card widgets you can identify on the page.

Knowledge Check:

• Is the E-Commerce dashboard the application's home page?

• What type of data does the E-Commerce dashboard primarily display?

Tips & Gotchas:

• Tip: The E-Commerce dashboard is a read-only analytics view. You cannot edit data directly from this page.

Lesson 3.2: Analyzing Country Orders on the Map {#lesson-3-2-analyzing-country-orders-on-the-map}

What You'll Learn: The Country Orders section shows a world map where you can click countries to see their order statistics in a bar chart. This lesson teaches you to interact with the map and read the chart.

Before You Begin: Complete Lesson 3.1. Review FS-5: Working with Interactive Charts.

Walkthrough:

1. On the E-Commerce dashboard, find the Country Orders Statistics card. It contains a world map and a bar chart below it.

2. The map initializes with USA as the default country (the map highlights the USA region).

3. The bar chart below the map is initially empty — it populates when you select a country.

4. Click on any country on the map (e.g., click on Germany in Europe). The country polygon highlights with a distinct color.

5. The bar chart below the map updates to show order data for the selected country across multiple categories.

6. The chart header shows the name of the selected country.

7. Click a different country (e.g., click on Brazil in South America). The previous country's highlight resets, the new country highlights, and the chart updates.

8. Hover over a bar in the chart to see the exact order value for that category.

9. You can also hover over countries on the map without clicking — they will show a hover highlight different from the selection highlight.

[Screenshot: Country Orders card with a country selected on the map and the bar chart showing data]

Try It Yourself:

1. Navigate to the Country Orders Statistics card on the E-Commerce dashboard.

2. Click on France on the map. Read the bar chart values.

3. Click on China on the map. Compare the bar chart values to France's.

4. Hover over (without clicking) a country adjacent to China. Observe the hover highlight.

5. Click on Australia on the map. Read the chart.

Knowledge Check:

• What happens to the bar chart when you click a country on the map?

• What is the default country shown when the Country Orders card first loads?

Tips & Gotchas:

• Tip: The map supports zoom (scroll wheel) and pan (click and drag) to navigate to smaller countries.

• Gotcha: The bar chart is empty until you click a country. Clicking the map is required to populate the chart.

Lesson 3.3: Reading Traffic and Earning Cards {#lesson-3-3-reading-traffic-and-earning-cards}

What You'll Learn: The Traffic Reveal Card and Earning Card are "flip cards" — each has a front side showing a summary and a back side showing a detailed chart. This lesson teaches you to flip the cards and read both sides.

Before You Begin: Complete Lesson 3.1. Review FS-4: Using Date and Period Selectors.

Walkthrough:

Traffic Reveal Card:

1. On the E-Commerce dashboard, find the Traffic Reveal Card.

2. The front side shows:

   • The current date

   • A traffic value (number of visits/sessions)

   • A delta indicator (up or down arrow with a value) showing the change from the previous period

   • Comparison data showing the previous and next period dates and values

3. Look for a flip/toggle button in the card header (often an icon or button). Click it to flip the card to the back side.

4. The back side shows a bar chart of traffic data over time.

5. Click the flip button again to return to the front side.

6. Look for the period selector in the card header (Week / Month / Year). Click Month to switch the data to monthly view. Click Week to return.

Earning Card:

1. Find the Earning Card on the E-Commerce dashboard.

2. The front side shows an animated line chart of earnings over time.

3. Click the flip button to see the back side — a pie chart showing earnings broken down by category (e.g., different currencies or revenue streams).

4. Click a pie segment on the back side. The segment highlights and the parent card may update to show details for that category.

5. Click the flip button to return to the front side.

[Screenshot: Traffic Reveal Card showing the front side with delta indicator and comparison data]

Try It Yourself:

1. Find the Traffic Reveal Card on the E-Commerce dashboard.

2. Read the current traffic value and delta on the front side.

3. Flip to the back side and hover over bars in the chart to read values.

4. Switch the period to Month using the period selector.

5. Flip back to the front side and observe the updated data.

6. Find the Earning Card and flip it to the back side.

7. Click the second pie segment. Observe any visual change.

8. Flip back to the front side.

Knowledge Check:

• What does the delta indicator on the Traffic Reveal Card front side represent?

• How do you reveal the back side of a flip card?

Tips & Gotchas:

• Tip: The flip button is typically located in the card's header area. Look for a small icon or button near the card title.

• Gotcha: Refreshing the page resets all flip cards to their front side. The flipped state is not saved.

Lesson 3.4: Analyzing Visitor Analytics {#lesson-3-4-analyzing-visitor-analytics}

What You'll Learn: The Visitors Analytics section shows website traffic broken down into Unique Visitors and Page Views, displayed as line charts and a pie chart. This lesson teaches you to read these visualizations.

Before You Begin: Complete Lesson 3.1. Review FS-5: Working with Interactive Charts.

Walkthrough:

1. On the E-Commerce dashboard, find the Visitors Analytics section.

2. The section contains:

   • A dual-line chart showing two data series: Unique Visitors (inner line) and Page Views (outer line)

   • A pie/donut chart showing a percentage value (the ratio of new to returning visitors)

   • A legend with two colored icons: one for Unique Visitors and one for Page Views

3. Hover over the line chart to see tooltip values for individual data points. The tooltip shows a rounded numeric value.

4. Look at the Visitors Statistics pie chart (the donut chart). The filled arc represents the percentage of New Visitors. The remaining arc represents Return Visitors.

5. The legend below the pie chart labels the two segments: New Visitors and Return Visitors.

6. Note that the legend colors adapt to the active theme — switch themes to observe the color change.

[Screenshot: Visitors Analytics section showing the line chart and pie chart with legend]

Try It Yourself:

1. Navigate to the Visitors Analytics section on the E-Commerce dashboard.

2. Hover over the line chart at several points to read the tooltip values.

3. Identify which line represents Unique Visitors and which represents Page Views using the legend.

4. Look at the pie chart. Read the percentage value shown.

5. Switch to the Dark theme and observe how the legend colors change.

6. Switch back to Light.

Knowledge Check:

• What two data series are shown in the Visitors Analytics line chart?

• What does the filled arc in the Visitors Statistics pie chart represent?

Tips & Gotchas:

• Tip: The pie chart tooltip is suppressed by design — hovering over the pie segments does not show a tooltip. Read the percentage value from the chart center or label instead.

Lesson 3.5: Reading the Charts Panel {#lesson-3-5-reading-the-charts-panel}

What You'll Learn: The Charts Panel shows order and profit data in two chart types — a multi-line area chart (Orders) and a grouped bar chart (Profit). You can switch between them using tabs and filter by time period.

Before You Begin: Complete Lesson 3.1. Review FS-4: Using Date and Period Selectors and FS-5: Working with Interactive Charts.

Walkthrough:

1. On the E-Commerce dashboard, find the Charts Panel section.

2. At the top of the panel, find the period selector (Week / Month / Year buttons) and the chart legend showing three colored items: Payment, Canceled, and All orders.

3. Below the period selector, find two tabs: Orders and Profit.

4. The Orders tab is active by default. It shows a multi-line area chart with three overlapping lines.

5. Hover over the chart to see tooltip values.

6. Click the Profit tab. The chart switches to a grouped bar chart showing three bar groups side by side for each time period.

7. Hover over bars to see tooltip values.

8. Click the Week period button. The chart data updates to show weekly data.

9. Click Month and then Year to see different time ranges.

10. Look at the summary panel (usually above or beside the chart). It shows key metrics like total order counts or revenue figures with labels.

[Screenshot: Charts Panel showing the Profit tab with grouped bars and the period selector]

Try It Yourself:

1. Navigate to the Charts Panel on the E-Commerce dashboard.

2. Switch to the Profit tab.

3. Select the Month period.

4. Hover over the Canceled bars (first bar group) to read their values.

5. Switch to the Orders tab.

6. Select the Year period.

7. Hover over the highest point on the chart to read its value.

8. Read the summary metrics shown in the summary panel.

Knowledge Check:

• What three data series are shown in the Charts Panel?

• How do you switch between the Orders chart and the Profit chart?

Tips & Gotchas:

• Tip: After switching tabs, the chart may briefly appear blank or misaligned. This is normal — the chart resizes itself to fit the newly visible tab panel.

• Tip: The legend colors (Payment, Canceled, All orders) are consistent between the Orders and Profit charts.

Lesson 3.6: Reading Progress and User Activity Metrics {#lesson-3-6-reading-progress-and-user-activity-metrics}

What You'll Learn: The E-Commerce dashboard includes a Progress Section showing KPI metrics as progress bars, and a User Activity section showing page visit data. This lesson teaches you to read both.

Before You Begin: Complete Lesson 3.1. Review FS-7: Using Progress Bars and FS-4: Using Date and Period Selectors.

Walkthrough:

Progress Section:

1. On the E-Commerce dashboard, find the Progress Section.

2. It displays a list of metrics, each showing:

   • A title (e.g., "Revenue", "Orders")

   • A numeric value (the current measurement)

   • A progress bar filled to the activeProgress percentage

   • A description providing context

3. The progress bar fill percentage represents how close the metric is to its target or maximum.

User Activity:

1. Find the User Activity section on the E-Commerce dashboard.

2. It shows a table or list of activity entries, each with:

   • A date label

   • A pages visited count (number of pages viewed)

   • A trend indicator (up or down arrow) showing whether activity increased or decreased

   • A new visits count (first-time visitors)

3. Look for the period selector (Week / Month / Year). Click Week to see weekly data.

4. Click Year to see yearly data.

[Screenshot: User Activity section showing the data table with trend indicators and period selector]

Try It Yourself:

1. Navigate to the Progress Section on the E-Commerce dashboard.

2. Identify the metric with the highest activeProgress percentage (the most-filled progress bar).

3. Identify the metric with the lowest progress bar fill.

4. Navigate to the User Activity section.

5. Switch to the Year period.

6. Find the entry with the highest pages visited count.

7. Identify whether that entry's trend indicator shows an increase or decrease.

Knowledge Check:

• What does the progress bar fill percentage represent in the Progress Section?

• What does the trend indicator (up/down arrow) in User Activity represent?

Tips & Gotchas:

• Tip: The User Activity period selector changes the data displayed. Unlike the Traffic widget, this one does reload data when you switch periods.

Module 4: Working with Tables {#module-4-working-with-tables}

Learning Objectives

After completing this module, you will be able to:

• Sort and filter data in the Smart Table

• Add, edit, and delete records using inline editing

• Confirm or cancel a delete action

• Expand and collapse rows in the Tree Grid

• Sort the Tree Grid by column

Estimated Time: 40–50 minutes

Lesson 4.1: Using the Smart Table — Viewing and Filtering Data {#lesson-4-1-using-the-smart-table}

What You'll Learn: The Smart Table is a full-featured data grid. Before you can manage records, you need to know how to navigate and filter the data. This lesson covers reading and filtering.

Before You Begin: Complete Module 1. Review FS-2: Working with Data Tables.

Walkthrough:

1. In the sidebar, navigate to Tables → Smart Table.

2. The table loads with sample user data. You will see six columns: ID, First Name, Last Name, Username, E-mail, and Age.

3. Look at the column headers. Each header is clickable for sorting.

4. Click the Age column header. The table sorts by age in ascending order. An arrow indicator appears on the Age header.

5. Click Age again. The sort reverses to descending order.

6. Click First Name to sort alphabetically by first name.

7. Look at the filter row — the row of input boxes directly below the column headers.

8. Click the filter box under Last Name and type "Smi". The table immediately filters to show only rows where the last name contains "Smi".

9. Clear the filter by deleting your text. All rows reappear.

10. Type "30" in the filter box under Age. Observe the filtered results.

11. Clear the Age filter.

[Screenshot: Smart Table with the Last Name filter active showing filtered results]

Try It Yourself:

1. Navigate to Tables → Smart Table.

2. Sort the table by Username in ascending order.

3. Type "@" in the filter box under E-mail to show all rows (since all emails contain "@").

4. Clear that filter.

5. Type "25" in the Age filter. Note how many rows match.

6. Clear the filter.

7. Sort by ID in descending order.

Knowledge Check:

• How do you reverse the sort direction on a column?

• Does the filter box require you to press Enter, or does it filter as you type?

Tips & Gotchas:

• Tip: You can filter multiple columns at the same time. Each filter box works independently and the results are combined.

• Gotcha: Filters are case-insensitive — typing "smith" will match "Smith".

Lesson 4.2: Adding, Editing, and Deleting Records in the Smart Table {#lesson-4-2-adding-editing-deleting-smart-table}

What You'll Learn: The Smart Table supports full inline CRUD operations. This lesson teaches you to add new records, edit existing ones, and safely delete records.

Before You Begin: Complete Lesson 4.1: Using the Smart Table — Viewing and Filtering Data.

Walkthrough:

Adding a New Record:

1. Navigate to Tables → Smart Table.

2. Look at the toolbar above the table. Find the + (Add New) button and click it.

3. A new editable row appears at the top of the table with empty input fields for each column.

4. Click the First Name field in the new row and type "Alice".

5. Click the Last Name field and type "Johnson".

6. Fill in Username ("alicej"), E-mail ("alice@example.com"), and Age ("28").

7. Click the checkmark (Save) button on the new row. The row is saved and appears in the table.

Editing an Existing Record:

1. Find any row in the table. Look at the action icons on the right side of the row.

2. Click the pencil (Edit) icon on that row. The row becomes editable with input fields.

3. Change the Age value to a different number.

4. Click the checkmark (Save) button to save your changes. The row updates with the new value.

Deleting a Record:

1. Find a row you want to delete. Click the trash (Delete) icon on that row.

2. A browser confirmation dialog appears: "Are you sure you want to delete?"

3. Click OK to confirm the deletion. The row is removed from the table.

4. To practice canceling: click the trash icon on another row, then click Cancel in the confirmation dialog. The row is preserved.

[Screenshot: Smart Table with a row in edit mode showing the Save and Cancel buttons]

Try It Yourself:

1. Navigate to Tables → Smart Table.

2. Click the + button to add a new row.

3. Enter: First Name = "Carlos", Last Name = "Rivera", Username = "crivera", E-mail = "carlos@test.com", Age = "35".

4. Save the new row.

5. Find the row you just added and click the Edit icon.

6. Change the Age to "36" and save.

7. Click the Delete icon on the same row.

8. When the confirmation dialog appears, click Cancel (do not delete).

9. Confirm the row is still present.

Knowledge Check:

• What happens if you click Cancel in the delete confirmation dialog?

• Can you edit a row while another row is already in edit mode?

Tips & Gotchas:

• Tip: If you click Cancel while adding a new row, the empty row disappears without saving.

• Gotcha: There is no validation on the E-mail field — the table will accept any text, including non-email formats. Always enter valid data in production use.

Lesson 4.3: Navigating the Tree Grid {#lesson-4-3-navigating-the-tree-grid}

What You'll Learn: The Tree Grid displays hierarchical file-system data with expandable rows. This lesson teaches you to navigate the hierarchy and sort the data.

Before You Begin: Complete Lesson 4.1. Review FS-2: Working with Data Tables.

Walkthrough:

1. Navigate to Tables → Tree Grid using the sidebar.

2. The table shows three top-level directory rows: Projects, Reports, and Other. Each has an expand arrow on the left.

3. Click the expand arrow next to Projects. The row expands to reveal child file entries beneath it.

4. Look at the child rows. Each shows a file name, size, file type (Kind), and item count.

5. Click the expand arrow next to Reports to expand it as well. Both directories are now expanded simultaneously.

6. Click the expand arrow next to Projects again to collapse it.

7. Look at the column headers: Name, Size, Kind, Items. Click the Kind column header to sort by file type.

8. Click Kind again to reverse the sort.

9. Click Name to sort alphabetically by name.

10. On a narrower browser window, some columns (Size, Kind, Items) may be hidden automatically. Widen the window to see all columns.

[Screenshot: Tree Grid with Projects expanded showing child file rows]

Try It Yourself:

1. Navigate to Tables → Tree Grid.

2. Expand the Other directory.

3. Sort the table by Size in descending order.

4. Collapse the Other directory.

5. Expand all three directories simultaneously.

6. Sort by Name in ascending order.

7. Identify which directory contains the most child files.

Knowledge Check:

• Can you have multiple directories expanded at the same time in the Tree Grid?

• What does the Items column show for a directory row?

Tips & Gotchas:

• Tip: The Tree Grid automatically hides columns on narrow screens. If you cannot see the Size or Kind columns, try widening your browser window.

• Gotcha: The Items count shown for a directory may not always match the exact number of visible child rows — this is a known data inconsistency in the sample data.

Module 5: Working with Forms {#module-5-working-with-forms}

Learning Objectives

After completing this module, you will be able to:

• Identify the available form layout patterns

• Interact with form input components including rating widgets and radio buttons

• Use the date picker with min/max date constraints

• Identify button status, shape, and size variants

Estimated Time: 35–45 minutes

Lesson 5.1: Exploring Form Layouts {#lesson-5-1-exploring-form-layouts}

What You'll Learn: The Form Layouts screen demonstrates different ways form fields can be arranged. Understanding these patterns helps you recognize and use forms throughout the application.

Before You Begin: Complete Module 1.

Walkthrough:

1. Navigate to Forms → Form Layouts using the sidebar.

2. The screen displays multiple form layout examples. Scroll through the page to see all of them.

3. Look for the following layout patterns:

   • Inline forms — fields arranged side by side in a single row

   • Stacked forms — fields stacked vertically with labels above inputs

   • Side-label forms — labels aligned to the left of their input fields

   • Form groups — related fields grouped within a bordered section

4. These are visual demonstrations only — the form fields are not wired to any submission logic in this showcase.

[Screenshot: Form Layouts page showing multiple layout pattern examples]

Try It Yourself:

1. Navigate to Forms → Form Layouts.

2. Scroll through the entire page.

3. Identify at least three distinct layout patterns.

4. Try clicking into a text input field and typing some text. Observe the focus state styling.

5. Try clicking a checkbox or radio button if visible. Observe the selected state.

Knowledge Check:

• Are the form fields on the Form Layouts page connected to any data submission?

• What is the difference between an inline form and a stacked form layout?

Tips & Gotchas:

• Tip: The Form Layouts page is a reference guide. Use it to understand which layout pattern to request when working with developers on new form screens.

Lesson 5.2: Using Form Input Components {#lesson-5-2-using-form-input-components}

What You'll Learn: The Form Inputs screen showcases interactive input components including star ratings, heart ratings, and radio button groups. This lesson teaches you to interact with each.

Before You Begin: Complete Lesson 5.1.

Walkthrough:

1. Navigate to Forms → Form Inputs using the sidebar.

2. Find the Star Rating widget. It shows a row of star icons. The default value is 2 stars selected.

3. Click the 4th star to change the rating to 4. The first four stars fill in.

4. Click the 1st star to change the rating to 1.

5. Find the Heart Rating widget. It shows a row of heart icons. The default value is 4 hearts selected.

6. Click the 2nd heart to change the rating to 2.

7. Find the Radio Button Group. It shows several radio options. The default selected option is the second one ("This is value 2").

8. Click the first radio option to select it. The selection moves to the first option.

9. Click the third radio option to select it.

[Screenshot: Form Inputs page showing the star rating, heart rating, and radio button group]

Try It Yourself:

1. Navigate to Forms → Form Inputs.

2. Set the Star Rating to 5 stars.

3. Set the Heart Rating to 1 heart.

4. Select the last radio option in the radio group.

5. Now set the Star Rating back to 3 stars.

6. Confirm that changing the star rating does not affect the heart rating or radio selection.

Knowledge Check:

• What is the default star rating value when the Form Inputs page first loads?

• Can you select multiple radio options simultaneously?

Tips & Gotchas:

• Tip: Rating widgets and radio buttons update immediately on click — there is no Save button needed.

• Gotcha: These input values are not persisted. Refreshing the page resets all inputs to their defaults.

Lesson 5.3: Using the Datepicker {#lesson-5-3-using-the-datepicker}

What You'll Learn: The Datepicker screen demonstrates date selection with configurable minimum and maximum date constraints. This lesson teaches you to open the calendar, navigate months, and select dates within the allowed range.

Before You Begin: Complete Lesson 5.1. Review FS-4: Using Date and Period Selectors.

Walkthrough:

1. Navigate to Forms → Datepicker using the sidebar.

2. The screen shows one or more date input fields.

3. Click the first date input field. A calendar popup appears.

4. Look at the calendar. Some dates appear dimmed (grayed out) — these are outside the allowed range and cannot be selected.

5. The allowed range is centered on today's date: 5 days before today through 5 days after today.

6. Click a date within the highlighted (selectable) range. The calendar closes and the input field shows your selected date.

7. Click the input field again to reopen the calendar.

8. Try clicking a dimmed date. It should not respond to your click.

9. Look for navigation arrows in the calendar header. Click the left arrow to go to the previous month. Click the right arrow to return to the current month.

[Screenshot: Datepicker with the calendar popup open showing selectable and dimmed dates]

Try It Yourself:

1. Navigate to Forms → Datepicker.

2. Click the date input to open the calendar.

3. Select a date that is 3 days from today (in the future).

4. Confirm the input field shows the selected date.

5. Click the input again to reopen the calendar.

6. Try to click a date that is 10 days from today (outside the allowed range). Confirm it cannot be selected.

7. Select a date that is 2 days before today.

Knowledge Check:

• What is the allowed date range on the Datepicker screen?

• How do you identify which dates are outside the allowed range?

Tips & Gotchas:

• Tip: The allowed date range is calculated relative to today's date each time the page loads. The range shifts every day.

• Gotcha: Dimmed dates look slightly grayed out compared to selectable dates. The visual difference may be subtle depending on the active theme.

Lesson 5.4: Using Buttons {#lesson-5-4-using-buttons}

What You'll Learn: The Buttons screen is a reference for all button variants available in the design system. This lesson teaches you to identify button statuses, shapes, and sizes.

Before You Begin: Complete Lesson 5.1. Review FS-3: Understanding Status Indicators.

Walkthrough:

1. Navigate to Forms → Buttons using the sidebar.

2. The screen displays button examples organized by property. Scroll through to see all sections.

3. Find the Status section. It shows buttons in five colors: Primary (blue), Success (green), Info (teal), Warning (orange), and Danger (red).

4. Find the Shape section. It shows buttons in three shapes:

   • Rectangle — sharp corners

   • Semi-round — slightly rounded corners

   • Round — fully pill-shaped

5. Find the Size section. It shows buttons in five sizes from smallest to largest: Tiny, Small, Medium, Large, Giant.

6. These buttons are display examples only — clicking them does not trigger any application action.

[Screenshot: Buttons page showing status, shape, and size variants]

Try It Yourself:

1. Navigate to Forms → Buttons.

2. Identify the Danger status button. Note its color.

3. Identify the Round shape button. Note its appearance.

4. Identify the Giant size button. Compare it to the Tiny size button.

5. Switch to the Dark theme and observe how the button colors change.

6. Switch back to Light.

Knowledge Check:

• What are the five button status values?

• What are the three button shape options?

Tips & Gotchas:

• Tip: Use this page as a reference when you need to describe a button style to a developer or designer. The status, shape, and size names are the exact values used in the application's code.

Module 6: Working with Maps {#module-6-working-with-maps}

Learning Objectives

After completing this module, you will be able to:

• Pan and zoom the Leaflet map

• Read bubble map data by hovering over country bubbles

• Search for a location using the Search Map

• Navigate the Google Maps embed

Estimated Time: 35–45 minutes

Lesson 6.1: Exploring the Leaflet Map {#lesson-6-1-exploring-the-leaflet-map}

What You'll Learn: The Leaflet Maps screen shows an interactive tile-based world map. This lesson teaches you to navigate it using pan and zoom.

Before You Begin: Complete Module 1.

Walkthrough:

1. Navigate to Maps → Leaflet Maps using the sidebar.

2. The screen shows a card titled "Leaflet Maps" containing an interactive map.

3. The map opens centered on the Maryland/Washington D.C. area of the United States at zoom level 5 (regional view).

4. To zoom in: Scroll your mouse wheel upward while hovering over the map. The map zooms in toward your cursor position. Alternatively, click the + button in the top-left corner of the map.

5. To zoom out: Scroll your mouse wheel downward, or click the − button.

6. To pan: Click and hold anywhere on the map, then drag in any direction. Release to stop panning.

7. To zoom to a specific area: Double-click on any location on the map to zoom in one level centered on that point.

8. The maximum zoom level is 18 (street-level detail). The minimum zoom level shows the full world.

[Screenshot: Leaflet map showing the Maryland/D.C. area with zoom controls visible]

Try It Yourself:

1. Navigate to Maps → Leaflet Maps.

2. Zoom in 3 levels using the scroll wheel.

3. Pan the map to the right until you can see the Atlantic Ocean.

4. Zoom out until you can see the entire North American continent.

5. Double-click on Europe to zoom in on that region.

6. Use the − button to zoom back out to a world view.

Knowledge Check:

• What is the default geographic center of the Leaflet map when it first loads?

• What are two ways to zoom in on the Leaflet map?

Tips & Gotchas:

• Tip: If the map tiles appear gray or blank, your internet connection may be slow. The map loads tiles from OpenStreetMap's servers.

• Gotcha: The map attribution shows "..." instead of proper OpenStreetMap attribution. This is a placeholder in the demonstration version.

Lesson 6.2: Exploring the Bubble Map {#lesson-6-2-exploring-the-bubble-map}

What You'll Learn: The Bubble Map visualizes world population data as sized circles on a world map. Larger bubbles represent larger populations. This lesson teaches you to read and navigate the map.

Before You Begin: Complete Lesson 6.1. Review FS-5: Working with Interactive Charts.

Walkthrough:

1. Navigate to Maps → Bubble Maps using the sidebar.

2. The screen shows a card titled "Bubble Maps" with a world map covered in colored circles.

3. Each circle represents a country. The size of the circle is proportional to the country's population (2011 data).

4. Hover over any circle to see a tooltip showing the country name and its population value.

5. The circles are colored randomly from the application's color palette — color does not carry specific meaning.

6. To pan the map: Click and drag.

7. To zoom: Use the scroll wheel.

8. Find the largest bubble (China, with the largest population) and hover over it to confirm.

9. Find a small bubble (a country with a small population) and hover to read its value.

[Screenshot: Bubble Map showing colored circles of varying sizes over a world map]

Try It Yourself:

1. Navigate to Maps → Bubble Maps.

2. Hover over the largest bubble on the map. Read the country name and population.

3. Hover over the second-largest bubble. Read its values.

4. Pan to Africa and hover over several bubbles to read population values.

5. Zoom in on Europe to see smaller country bubbles more clearly.

6. Hover over a small European country bubble to read its population.

Knowledge Check:

• What does the size of a bubble on the Bubble Map represent?

• What year does the population data on the Bubble Map represent?

Tips & Gotchas:

• Tip: Very small countries may have tiny bubbles that are hard to hover over. Zoom in to make them easier to interact with.

• Gotcha: The bubble colors are assigned randomly each time the page loads — they do not represent any data category.

Lesson 6.3: Using the Search Map {#lesson-6-3-using-the-search-map}

What You'll Learn: The Search Map allows you to search for a geographic location by address and have the map navigate to that location. This lesson teaches you to use the address search feature.

Before You Begin: Complete Lesson 6.1.

Walkthrough:

1. Navigate to Maps → Search Maps using the sidebar.

2. The screen shows a map (defaulting to Minsk, Belarus) and a search input field.

3. Click the search input field at the top of the screen.

4. Begin typing an address, such as "New York". As you type, a dropdown of address suggestions appears (powered by Google Places).

5. Click one of the suggestions in the dropdown (e.g., "New York, NY, USA").

6. The map re-centers on the selected location at zoom level 12 (neighborhood/street level).

7. Try another search: type "London, UK" and select a suggestion. The map navigates to London.

8. If you allow the browser to access your location (when prompted), the map may also show your current geographic position.

Note: The address search requires an active internet connection and a valid Google Maps API key configured in the application. If suggestions do not appear, consult your system administrator.

[Screenshot: Search Map with the search input showing address suggestions dropdown]

Try It Yourself:

1. Navigate to Maps → Search Maps.

2. Search for "Paris, France" and select the suggestion.

3. Observe the map navigate to Paris.

4. Search for "Sydney, Australia" and select the suggestion.

5. Observe the map navigate to Sydney.

6. Search for a specific street address in your city (if you know one).

Knowledge Check:

• What is the default location shown when the Search Map first loads?

• What zoom level does the map use after you select a search result?

Tips & Gotchas:

• Tip: The search is restricted to address-type results. Searching for a business name or point of interest may not return results.

• Gotcha: If no suggestions appear when you type, the Google Maps API may not be configured. Contact your system administrator.

Lesson 6.4: Exploring Google Maps {#lesson-6-4-exploring-google-maps}

What You'll Learn: The Google Maps screen embeds a standard Google Maps view centered on a fixed location. This lesson teaches you to navigate it.

Before You Begin: Complete Lesson 6.1.

Walkthrough:

1. Navigate to Maps → Google Maps using the sidebar.

2. The screen shows a Google Maps embed centered on a location in Hamm, North Rhine-Westphalia, Germany (coordinates: 51.678418°N, 7.809007°E).

3. Use the standard Google Maps controls to navigate:

   • Scroll wheel to zoom in and out

   • Click and drag to pan

   • Double-click to zoom in on a specific point

4. The map position is fixed — there is no search input on this screen. The map always opens at the same location.

[Screenshot: Google Maps embed showing the Hamm, Germany area]

Try It Yourself:

1. Navigate to Maps → Google Maps.

2. Zoom in until you can see street-level detail.

3. Pan to a neighboring city.

4. Zoom back out to see the regional view.

Knowledge Check:

• What city is the Google Maps screen centered on by default?

• Is there a search feature on the Google Maps screen?

Tips & Gotchas:

• Tip: If the Google Maps embed shows a blank area or an error, the Google Maps API key may not be configured. Contact your system administrator.

Module 7: Working with Charts {#module-7-working-with-charts}

Learning Objectives

After completing this module, you will be able to:

• Navigate to the ECharts, Chart.js, and D3 chart sections

• Hover over chart elements to read tooltip values

• Identify the chart types available in each section

Estimated Time: 25–35 minutes

Lesson 7.1: Exploring ECharts Visualizations {#lesson-7-1-exploring-echarts-visualizations}

What You'll Learn: The ECharts section showcases data visualizations built with Apache ECharts. This lesson teaches you to navigate the section and interact with the charts.

Before You Begin: Complete Module 1. Review FS-5: Working with Interactive Charts.

Walkthrough:

1. Navigate to Charts → Echarts using the sidebar.

2. The screen loads a page with one or more ECharts-based visualizations.

3. Scroll through the page to see all available charts.

4. Hover over data points, bars, or line segments to see tooltip values.

5. If a chart has a legend, try clicking legend items to toggle data series on or off (where supported).

6. Observe how the charts adapt to the active theme — switch to Dark theme and observe the color changes, then switch back to Light.

[Screenshot: ECharts page showing a sample chart with a tooltip visible]

Try It Yourself:

1. Navigate to Charts → Echarts.

2. Hover over at least five different data points across the charts on the page.

3. Read and note the tooltip values.

4. Switch to the Cosmic theme and observe how the chart colors change.

5. Switch back to Light.

Knowledge Check:

• How do you read the exact value of a data point on an ECharts visualization?

• Do ECharts visualizations adapt to theme changes?

Tips & Gotchas:

• Tip: ECharts tooltips appear near the cursor. Move slowly over data points to trigger them reliably.

Lesson 7.2: Exploring Chart.js Visualizations {#lesson-7-2-exploring-chartjs-visualizations}

What You'll Learn: The Chart.js section showcases visualizations built with the Chart.js library. This lesson teaches you to navigate and interact with them.

Before You Begin: Complete Lesson 7.1.

Walkthrough:

1. Navigate to Charts → Charts.js using the sidebar.

2. The screen loads Chart.js-based visualizations.

3. Scroll through the page to see all available charts.

4. Hover over data points to see tooltip values.

5. If a chart has a legend, try clicking legend items to toggle series visibility.

[Screenshot: Chart.js page showing a sample chart]

Try It Yourself:

1. Navigate to Charts → Charts.js.

2. Hover over data points on at least two different charts.

3. If a legend is visible, click a legend item to hide that data series. Click it again to show it.

Knowledge Check:

• What library powers the charts on the Charts.js page?

• How do you hide a data series on a Chart.js chart?

Tips & Gotchas:

• Tip: Chart.js and ECharts are different charting libraries with slightly different interaction behaviors. Chart.js legends are typically clickable to toggle series.

Lesson 7.3: Exploring D3 Visualizations {#lesson-7-3-exploring-d3-visualizations}

What You'll Learn: The D3 section showcases visualizations built with the D3.js library. D3 charts are often more custom and complex than ECharts or Chart.js charts.

Before You Begin: Complete Lesson 7.1.

Walkthrough:

1. Navigate to Charts → D3 using the sidebar.

2. The screen loads D3-based visualizations.

3. Scroll through the page to see all available charts.

4. Hover over chart elements to see any available tooltips or highlights.

5. Some D3 charts may support click interactions — try clicking on chart elements to see if they respond.

[Screenshot: D3 page showing a sample visualization]

Try It Yourself:

1. Navigate to Charts → D3.

2. Hover over chart elements to explore any interactive behavior.

3. Compare the visual style of D3 charts to the ECharts and Chart.js charts you explored earlier.

Knowledge Check:

• What library powers the charts on the D3 page?

Tips & Gotchas:

• Tip: D3 charts are rendered as SVG elements. They may have different interaction behaviors than canvas-based charts (ECharts, Chart.js).

Module 8: Using Editors {#module-8-using-editors}

Learning Objectives

After completing this module, you will be able to:

• Open and use the CKEditor rich text editor

• Open and use the TinyMCE rich text editor

• Apply basic text formatting using editor toolbars

Estimated Time: 20–25 minutes

Lesson 8.1: Using the CKEditor Rich Text Editor {#lesson-8-1-using-the-ckeditor}

What You'll Learn: CKEditor is a WYSIWYG (What You See Is What You Get) rich text editor. This lesson teaches you to compose and format text using its toolbar.

Before You Begin: Complete Module 1. An active internet connection is required (CKEditor loads from a CDN).

Walkthrough:

1. Navigate to Editors → CKEditor using the sidebar.

2. The screen shows a card titled "CKEditor" containing the editor interface.

3. The editor has a toolbar at the top with formatting buttons (Bold, Italic, Underline, lists, links, tables, etc.) and an editing area below it.

4. Click inside the editing area and type: "This is my first CKEditor entry.".

5. Select the word "first" by double-clicking it.

6. Click the Bold button (B) in the toolbar. The selected word becomes bold.

7. Click at the end of your text and press Enter to start a new line.

8. Type a second line: "CKEditor supports rich text formatting.".

9. Select the entire second line and click the Italic button (I). The text becomes italic.

10. Try inserting a bulleted list: click the Unordered List button in the toolbar, then type a few list items.

[Screenshot: CKEditor with formatted text showing bold and italic examples]

Try It Yourself:

1. Navigate to Editors → CKEditor.

2. Type the following text: "ngx-admin Training Exercise".

3. Select the entire text and make it Bold.

4. Press Enter and type a new line: "Completed on [today's date]".

5. Make the date portion Italic.

6. Add a numbered list below with three items: "Module 1", "Module 2", "Module 3".

Knowledge Check:

• What does WYSIWYG mean in the context of a rich text editor?

• How do you apply bold formatting to selected text in CKEditor?

Tips & Gotchas:

• Tip: Use standard keyboard shortcuts in CKEditor: Ctrl+B for bold, Ctrl+I for italic, Ctrl+Z to undo.

• Gotcha: CKEditor content is not saved when you navigate away from the page. This is a demonstration editor — no data is persisted.

Lesson 8.2: Using the TinyMCE Rich Text Editor {#lesson-8-2-using-the-tinymce}

What You'll Learn: TinyMCE is another popular WYSIWYG rich text editor. This lesson teaches you to use it alongside CKEditor so you can compare the two.

Before You Begin: Complete Lesson 8.1: Using the CKEditor Rich Text Editor. An active internet connection is required.

Walkthrough:

1. Navigate to Editors → TinyMCE using the sidebar.

2. The screen shows a card titled "Tiny MCE" containing the TinyMCE editor.

3. The editor has a toolbar at the top and an editing area below.

4. Click inside the editing area and type: "TinyMCE is a powerful rich text editor.".

5. Select the word "powerful" by double-clicking it.

6. Click the Bold button in the toolbar. The word becomes bold.

7. Press Enter and type a second paragraph.

8. Try inserting a table: look for the Table button in the toolbar and click it to insert a simple table.

9. Type content into the table cells.

[Screenshot: TinyMCE editor with formatted text and a table]

Try It Yourself:

1. Navigate to Editors → TinyMCE.

2. Type: "TinyMCE Training Exercise".

3. Select the text and apply Italic formatting.

4. Press Enter and type: "This editor supports tables and links.".

5. Select the word "tables" and apply Bold formatting.

6. Insert a hyperlink: select the word "links", click the Insert Link button in the toolbar, and enter a URL (e.g., "https://www.example.com").

Knowledge Check:

• What are the three plugins loaded in the TinyMCE editor on this screen?

• Is content typed into TinyMCE saved when you navigate away?

Tips & Gotchas:

• Tip: TinyMCE content updates are emitted on every keystroke. In a production integration, this would allow real-time saving or preview.

• Gotcha: Like CKEditor, TinyMCE content is not persisted in this demonstration. Navigating away loses your work.

Module 9: Exploring Extra Components {#module-9-exploring-extra-components}

Learning Objectives

After completing this module, you will be able to:

• Select dates using the standard and range calendar components

• Send messages and receive bot replies in the Chat interface

• Identify alert component variants

• Trigger and observe spinner animations

• Use the interactive progress bar to change values and observe status color changes

Estimated Time: 45–55 minutes

Lesson 9.1: Using the Calendar and Calendar Kit {#lesson-9-1-using-the-calendar}

What You'll Learn: The Calendar screen demonstrates three calendar modes: single-date selection, range selection, and a custom cell calendar. The Calendar Kit shows a full-year view. This lesson teaches you to use all of them.

Before You Begin: Complete Module 1. Review FS-4: Using Date and Period Selectors.

Walkthrough:

Standard Calendar (Single Date):

1. Navigate to Extra Components → Calendar using the sidebar.

2. The screen shows multiple calendar widgets. Find the first standard calendar.

3. Click any date in the calendar grid. The date becomes highlighted as selected.

4. Click a different date. The selection moves to the new date.

5. Use the left/right arrows in the calendar header to navigate to the previous or next month.

Range Calendar:

1. Find the range calendar on the same page (it may be labeled or visually distinct).

2. The range calendar pre-selects a range: from 3 days after the first of the current month to 3 days before the last day.

3. Click a start date to begin a new range selection.

4. Click an end date. The calendar highlights all dates between the start and end.

Custom Day Cell Calendar:

1. Find the calendar that uses custom day cells. The cells may have a different visual style than the standard calendar.

2. Click a date. The custom click handler is registered but currently has no visible effect (it is a demonstration placeholder).

Calendar Kit (Full Year View):

1. Navigate to Extra Components → Calendar Kit using the sidebar.

2. The screen shows a full-year calendar where each cell contains a complete month's day grid.

3. Click any day within any month grid to select that date.

[Screenshot: Calendar screen showing the standard, range, and custom cell calendars]

Try It Yourself:

1. Navigate to Extra Components → Calendar.

2. Select today's date on the standard calendar.

3. Navigate to next month using the arrow.

4. Select the 15th of next month.

5. On the range calendar, click a new start date (e.g., the 5th of the current month).

6. Click an end date (e.g., the 20th). Observe the highlighted range.

7. Navigate to Extra Components → Calendar Kit.

8. Click a date in the March month grid.

Knowledge Check:

• How do you select a date range in the range calendar?

• What is unique about the Calendar Kit compared to the standard calendar?

Tips & Gotchas:

• Tip: The range calendar pre-populates with a default range. You can override it by clicking a new start date.

• Gotcha: The custom day cell calendar's click handler is a placeholder — clicking dates does not produce a visible result in this demonstration.

Lesson 9.2: Using the Chat Interface {#lesson-9-2-using-the-chat}

What You'll Learn: The Chat screen simulates a two-party conversation with an automated bot. You can send text messages and file attachments, and the bot responds with text, images, GIFs, maps, or quoted replies.

Before You Begin: Complete Module 1.

Walkthrough:

1. Navigate to Extra Components → Chat using the sidebar.

2. The screen shows a chat window with pre-loaded messages between "Jonh Doe" (you) and "Bot".

3. Your messages appear on the right side of the chat. Bot messages appear on the left side.

4. Look at the message input area at the bottom of the chat window.

5. Click the input field and type: "Hello".

6. Press Enter or click the Send button. Your message appears on the right side.

7. After about 500 milliseconds, the bot responds with a message on the left side.

8. Try typing "gif" and sending. The bot responds with a GIF image.

9. Try typing "pic" and sending. The bot responds with an image.

10. Try typing "file group" and sending. The bot responds with multiple file attachments.

11. Try typing "quote" and sending. The bot responds with a quoted reply.

[Screenshot: Chat interface showing a conversation with bot responses including a GIF]

Try It Yourself:

1. Navigate to Extra Components → Chat.

2. Send the message "map" and observe the bot's response (it may include a map attachment).

3. Send the message "Hello there" and observe a text response.

4. Send the message "pic" and observe the image response.

5. Try attaching a file: look for a file attachment button in the input area (a paperclip or similar icon). Click it and select any file from your computer.

6. Send the message with the attachment and observe how it appears in the chat.

Knowledge Check:

• On which side of the chat window do your sent messages appear?

• What keyword triggers the bot to respond with a GIF?

Tips & Gotchas:

• Tip: The bot uses keyword matching to determine its response type. Try different words to discover different response types.

• Gotcha: The bot's responses are randomly selected from a pool of options. Sending the same message twice may produce different responses.

Lesson 9.3: Exploring Alert Components {#lesson-9-3-exploring-alerts}

What You'll Learn: The Alert screen showcases the alert notification component in various configurations. This lesson teaches you to identify alert variants.

Before You Begin: Complete Module 1. Review FS-3: Understanding Status Indicators.

Walkthrough:

1. Navigate to Extra Components → Alert using the sidebar.

2. The screen displays multiple alert component examples.

3. Scroll through the page to see all variants.

4. Look for alerts in each of the five status colors: Primary, Success, Info, Warning, and Danger.

5. Look for dismissible alerts — alerts with a close (×) button. Click the × button on a dismissible alert to dismiss it.

6. Look for alerts with icons and alerts without icons.

[Screenshot: Alert page showing multiple alert variants in different status colors]

Try It Yourself:

1. Navigate to Extra Components → Alert.

2. Identify the Danger status alert. Note its color and any icon.

3. Identify the Success status alert.

4. If any alerts have a dismiss button (×), click it to dismiss one.

5. Switch to the Dark theme and observe how the alert colors change.

6. Switch back to Light.

Knowledge Check:

• How many status color variants are shown for the alert component?

• How do you dismiss a dismissible alert?

Tips & Gotchas:

• Tip: Alerts are used throughout the application to provide feedback to users. Understanding their color meanings (from FS-3) helps you interpret them correctly.

Lesson 9.4: Exploring Spinner Variants {#lesson-9-4-exploring-spinners}

What You'll Learn: The Spinner section showcases loading spinners in different colors, sizes, and contexts (standalone, in buttons, in tabs). This lesson teaches you to trigger and observe spinner animations.

Before You Begin: Complete Module 1. Review FS-8: Working with Spinners.

Walkthrough:

1. Navigate to Extra Components → Spinner using the sidebar.

2. The main Spinner page shows a trigger button. Click it to start the spinner animation. It runs for 3 seconds then stops automatically.

3. Navigate to Extra Components → Spinner → Spinner In Buttons (if available as a sub-item in the sidebar).

4. Click the trigger button for the Large button group. Observe spinners appearing inside the large buttons. They stop after 3 seconds.

5. Click the trigger button for the Medium button group. Observe the smaller spinners.

6. Navigate to Extra Components → Spinner → Spinner In Tabs.

7. Click the trigger button. Observe the spinner appearing within the tab interface.

8. Navigate to Extra Components → Spinner → Spinner Color to see spinners in different status colors.

9. Navigate to Extra Components → Spinner → Spinner Sizes to see spinners at different size scales.

[Screenshot: Spinner In Buttons page showing active spinners inside button elements]

Try It Yourself:

1. Navigate to Extra Components → Spinner.

2. Click the trigger button and immediately click it again. Observe that the animation continues (multiple timers stack).

3. Navigate to Extra Components → Spinner → Spinner Color.

4. Identify the spinner in the Danger status color.

5. Navigate to Extra Components → Spinner → Spinner Sizes.

6. Identify the Giant size spinner and compare it to the Tiny size spinner.

Knowledge Check:

• How long does the demo spinner animation last before stopping automatically?

• What happens if you click the spinner trigger button multiple times in quick succession?

Tips & Gotchas:

• Tip: In production use, spinners indicate real loading activity. The 3-second timer in this showcase is purely for demonstration.

• Gotcha: Clicking the trigger button multiple times stacks timers. The spinner may stop earlier than expected if multiple timers fire in sequence.

Lesson 9.5: Using the Interactive Progress Bar {#lesson-9-5-interactive-progress-bar}

What You'll Learn: The Interactive Progress Bar lets you manually increase and decrease a progress value and observe how the bar color changes based on thresholds. This lesson teaches you to use it and understand the color logic.

Before You Begin: Complete Module 1. Review FS-7: Using Progress Bars.

Walkthrough:

1. Navigate to Extra Components → Progress Bar using the sidebar.

2. Find the Interactive Progress Bar section on the page.

3. The bar starts at 25% (the default value) and shows in red (Danger status).

4. Click the + (increase) button. The value increases by 25 to 50%. The bar color changes to orange (Warning status).

5. Click + again. The value increases to 75%. The bar color changes to blue (Info status).

6. Click + again. The value increases to 100%. The bar color changes to green (Success status).

7. The + button is now disabled (grayed out) — you cannot go above 100%.

8. Click the − (decrease) button. The value decreases to 75%. The color returns to blue.

9. Click − again to reach 50% (orange).

10. Click − again to reach 25% (red).

11. Click − again to reach 0%. The bar is empty and red.

12. The − button is now disabled — you cannot go below 0%.

[Screenshot: Interactive Progress Bar at 75% showing the blue Info status color]

Try It Yourself:

1. Navigate to Extra Components → Progress Bar → Interactive Progress Bar (or find it on the Progress Bar page).

2. Click + until the bar reaches 100%. Note the color.

3. Click − once. Note the new color and value.

4. Click − until the bar reaches 0%. Note the color.

5. Try clicking − when the value is already 0. Confirm the button is disabled and the value does not go negative.

6. Click + twice to reach 50%. Confirm the color is orange (Warning).

Knowledge Check:

• At what percentage value does the progress bar color change from orange (Warning) to blue (Info)?

• What happens when you try to click the + button when the value is already at 100%?

Tips & Gotchas:

• Tip: The color thresholds are: 0–25% = Danger (red), 26–50% = Warning (orange), 51–75% = Info (blue), 76–100% = Success (green).

• Gotcha: The step size is fixed at 25. You cannot set the value to, for example, 30% — only 0, 25, 50, 75, or 100 are reachable.

Module 10: Using Modal Overlays {#module-10-using-modal-overlays}

Learning Objectives

After completing this module, you will be able to:

• Open and dismiss dialog overlays

• Submit data through a dialog name prompt and see the result

• Open and close window overlays including windows without backdrops

• Configure and trigger toast notifications

• Interact with popover and tooltip components

Estimated Time: 40–50 minutes

Lesson 10.1: Working with Dialogs {#lesson-10-1-working-with-dialogs}

What You'll Learn: Dialogs are modal overlays that require user interaction before you can return to the main page. This lesson teaches you to open, interact with, and close different dialog types.

Before You Begin: Complete Module 1. Review FS-6: Using Modal Overlays.

Walkthrough:

1. Navigate to Modal Overlays → Dialog using the sidebar.

2. The page shows several buttons, each opening a different dialog configuration.

Basic Dialog:

3. Click the button to open the basic dialog (labeled something like "Open Dialog" or "Open Component Dialog").

4. A modal dialog appears with a title and a Dismiss button.

5. Click Dismiss to close the dialog.

Template Dialog:

6. Click the button to open the template dialog.

7. A dialog appears with content from an inline template.

8. Close it using the Dismiss button or by pressing Escape.

Name Prompt Dialog:

9. Click the button to open the name prompt dialog.

10. A dialog appears with a text input field labeled for a name.

11. Type your name (e.g., "Alex") in the input field.

12. Click Submit. The dialog closes and your name appears in a list below the button.

13. Open the name prompt again. Type a different name (e.g., "Jordan"). Click Submit.

14. Confirm that both names now appear in the list.

15. Open the name prompt again. Click Cancel without entering a name. Confirm the list does not change.

No Backdrop Dialog:

16. Click the button to open the dialog without backdrop.

17. Notice that the background is not dimmed — you can see the page behind the dialog.

18. Close the dialog using its close button.

[Screenshot: Name prompt dialog with a text input field and Submit/Cancel buttons]

Try It Yourself:

1. Navigate to Modal Overlays → Dialog.

2. Open the name prompt dialog and submit the name "Taylor".

3. Open it again and submit "Morgan".

4. Confirm both names appear in the list.

5. Open the dialog without backdrop click close (if available). Try clicking outside the dialog. Confirm it does not close.

6. Close it using the dialog's own close button.

7. Open the dialog without ESC close. Press the Escape key. Confirm it does not close.

8. Close it using the dialog's close button.

Knowledge Check:

• What happens to the names list when you click Cancel in the name prompt dialog?

• How do you close a dialog that has closeOnEsc: false configured?

Tips & Gotchas:

• Tip: The names list accumulates entries as long as you are on the page. Refreshing the page clears the list.

• Gotcha: A dialog with both "no backdrop" and "no ESC close" can only be dismissed using the close button inside the dialog. If you cannot find the close button, try looking in the dialog's title bar.

Lesson 10.2: Working with Windows {#lesson-10-2-working-with-windows}

What You'll Learn: Windows are floating overlay panels that can be dragged and may or may not block the background. This lesson teaches you to open, interact with, and close window overlays.

Before You Begin: Complete Lesson 10.1. Review FS-6: Using Modal Overlays.

Walkthrough:

1. Navigate to Modal Overlays → Window using the sidebar.

2. The page shows three buttons for opening different window configurations.

Template Window:

3. Click the button to open the window from template (labeled something like "Open Window (Template)").

4. A floating window panel appears with a title bar and content.

5. Try dragging the window by clicking and holding its title bar, then moving your mouse. The window moves with your cursor.

6. Close the window by clicking the X button in the window's title bar.

Form Window:

7. Click the button to open the window with a form (labeled "Open Window (Form Component)").

8. A window appears containing a form with Subject and Text fields.

9. Click into the Subject field and type "Test Subject".

10. Click into the Text field and type "This is a test message.".

11. Close the window using the X button in the title bar.

Window Without Backdrop:

12. Click the button to open the window without backdrop.

13. Notice the background is not dimmed. You can interact with the page behind the window.

14. Try pressing Escape. The window should not close (ESC is disabled for this window type).

15. Close the window using the X button in the title bar.

[Screenshot: Window overlay showing the form with Subject and Text fields]

Try It Yourself:

1. Navigate to Modal Overlays → Window.

2. Open the template window.

3. Drag it to a different position on the screen.

4. Open the form window (without closing the template window first).

5. Observe that both windows can be open simultaneously.

6. Close both windows.

7. Open the window without backdrop.

8. Try clicking on the page content behind the window. Confirm you can interact with the background.

9. Close the window.

Knowledge Check:

• How do you move a window overlay to a different position on the screen?

• Can multiple windows be open at the same time?

Tips & Gotchas:

• Tip: Windows can be stacked — opening multiple windows creates a layered effect. Each window has its own close button.

• Gotcha: The form fields in the Window Form are not connected to any submission logic. Typing in them and closing the window discards the content.

Lesson 10.3: Using Toastr Notifications {#lesson-10-3-using-toastr}

What You'll Learn: Toastr notifications are small, auto-dismissing messages that appear at the edge of the screen. This lesson teaches you to configure and trigger them.

Before You Begin: Complete Lesson 10.1. Review FS-6: Using Modal Overlays.

Walkthrough:

1. Navigate to Modal Overlays → Toastr using the sidebar.

2. The page shows a configuration panel and two action buttons: Make Toast and Random Toast.

3. Look at the configuration options:

   • Title — the toast's title text (default: "HI there!")

   • Content — the toast's body text (default: "I'm cool toaster!")

   • Duration — how long the toast stays visible in milliseconds (default: 2000ms = 2 seconds)

   • Status — the color/type of the toast (Primary, Success, Info, Warning, Danger)

   • Position — where on the screen the toast appears (8 position options)

   • Destroy by click — whether clicking the toast dismisses it

   • Has icon — whether to show a status icon

   • Prevent duplicates — whether to suppress duplicate toasts

4. Click Make Toast. A notification appears at the configured position. It auto-dismisses after the configured duration.

5. Change the Status to Danger and click Make Toast again. The toast appears in red.

6. Change the Position to Bottom Left and click Make Toast. The toast appears in the bottom-left corner.

7. Click Random Toast. A toast appears with a randomly selected type and a random quote as the body text.

[Screenshot: Toastr page with a toast notification visible in the top-right corner]

Try It Yourself:

1. Navigate to Modal Overlays → Toastr.

2. Set the Status to Success and click Make Toast. Observe the green toast.

3. Set the Duration to 5000 (5 seconds) and click Make Toast. Observe it stays longer.

4. Set the Position to Bottom Right and click Make Toast.

5. Click Random Toast three times in quick succession. Observe multiple toasts stacking.

6. Set Destroy by click to enabled and click Make Toast. Click the toast before it auto-dismisses.

Knowledge Check:

• What is the default duration for a toast notification?

• What does the "Destroy by click" option control?

Tips & Gotchas:

• Tip: Each toast is numbered sequentially (Toast 2, Toast 3, etc.) so you can distinguish multiple toasts.

• Gotcha: Setting Duration to 0 typically makes the toast persist indefinitely until clicked (if "Destroy by click" is enabled).

Lesson 10.4: Using Popovers and Tooltips {#lesson-10-4-popovers-and-tooltips}

What You'll Learn: Popovers and tooltips are lightweight overlays anchored to trigger elements. This lesson teaches you to trigger and interact with them.

Before You Begin: Complete Lesson 10.1. Review FS-6: Using Modal Overlays.

Walkthrough:

Popovers:

1. Navigate to Modal Overlays → Popover using the sidebar.

2. The page shows trigger buttons for three popover types.

3. Click the button that opens the tabs popover. A floating panel appears with two tabs: "What's up?" and "Second Tab".

4. Click the Second Tab tab within the popover. The content changes.

5. Click elsewhere on the page to dismiss the popover.

6. Click the button that opens the form popover. A floating panel appears with a compose form (Recipients, Subject, Message fields).

7. Type in the Subject field. Note that the form is a demonstration — the Send button does not submit data.

8. Click elsewhere to dismiss.

9. Click the button that opens the card popover. A floating card with a warning-status header appears.

10. Click elsewhere to dismiss.

Tooltips:

11. Navigate to Modal Overlays → Tooltip using the sidebar.

12. The page shows elements with tooltips configured.

13. Hover over trigger elements to see tooltip text appear.

14. Move your mouse away to dismiss the tooltip.

[Screenshot: Popovers page showing the tabs popover open with two tabs]

Try It Yourself:

1. Navigate to Modal Overlays → Popover.

2. Open the tabs popover and click the Second Tab. Read the content.

3. Dismiss the popover.

4. Open the form popover and type "Training Test" in the Subject field.

5. Dismiss the popover.

6. Navigate to Modal Overlays → Tooltip.

7. Hover over at least three different trigger elements to read their tooltips.

Knowledge Check:

• How do you dismiss a popover?

• What is the difference between a popover and a tooltip?

Tips & Gotchas:

• Tip: Popovers can contain rich content (tabs, forms, cards). Tooltips are typically brief text labels.

• Gotcha: The form inside the popover is a demonstration only. Clicking Send does not submit any data.

Module 11: Exploring UI Features {#module-11-exploring-ui-features}

Learning Objectives

After completing this module, you will be able to:

• Browse the icon library and identify icons by name

• Identify typographic styles available in the design system

• Understand the grid layout system

• Identify search field component variants

Estimated Time: 25–30 minutes

Lesson 11.1: Browsing the Icon Library {#lesson-11-1-browsing-icons}

What You'll Learn: The Icons screen displays all available icons from three icon libraries: Eva Icons, Ionicons, and Font Awesome. This lesson teaches you to browse and identify icons.

Before You Begin: Complete Module 1.

Walkthrough:

1. Navigate to UI Features → Icons using the sidebar.

2. The screen displays icons organized into sections by library.

3. Find the Eva Icons section. These are SVG-based icons. The section shows only filled (non-outline) variants.

4. Find the Ionicons section. These are font-based icons with the ion- prefix.

5. Find the Font Awesome sections — one for Solid icons and one for Regular icons.

6. Scroll through each section to browse the available icons.

7. Each icon is displayed with its name label below it.

[Screenshot: Icons page showing the Eva Icons section with icon names visible]

Try It Yourself:

1. Navigate to UI Features → Icons.

2. Find the home icon in the Eva Icons section.

3. Find the email or mail icon.

4. Find the settings or gear icon.

5. Scroll to the Ionicons section and find the social-github icon.

6. Count approximately how many icons are in the Eva Icons section.

Knowledge Check:

• What are the three icon libraries available in the application?

• Why are outline variants of Eva Icons not shown on this page?

Tips & Gotchas:

• Tip: When requesting an icon from a developer, specify both the icon name and the library (e.g., "the home icon from Eva Icons").

• Tip: Eva Icons includes both filled and outline variants. This page shows only filled variants to avoid duplication.

Lesson 11.2: Exploring Typography Styles {#lesson-11-2-exploring-typography}

What You'll Learn: The Typography screen shows all text styles available in the design system, from headings to body text to captions. This lesson teaches you to identify and reference these styles.

Before You Begin: Complete Module 1.

Walkthrough:

1. Navigate to UI Features → Typography using the sidebar.

2. The screen displays text examples organized by style category.

3. Look for heading styles (H1 through H6) — each progressively smaller.

4. Look for body text styles — standard paragraph text.

5. Look for caption and label styles — smaller text used for supplementary information.

6. The typography styles adapt to the active theme. Switch to Dark theme and observe how the text colors change.

7. Switch back to Light.

8. Note that the screen also tracks the current viewport breakpoint — the layout may adjust as you resize your browser window.

[Screenshot: Typography page showing heading styles H1 through H6 and body text examples]

Try It Yourself:

1. Navigate to UI Features → Typography.

2. Identify the largest heading style (H1) and the smallest (H6).

3. Switch to the Cosmic theme and observe the text color changes.

4. Switch back to Light.

5. Resize your browser window to a narrow width and observe if any layout changes occur.

Knowledge Check:

• How many heading levels are shown in the Typography section?

• Do typography styles change when you switch themes?

Tips & Gotchas:

• Tip: Use the Typography page as a reference when describing text styles to developers. The style names shown here are the exact class names used in the application.

Lesson 11.3: Exploring the Grid System {#lesson-11-3-exploring-the-grid}

What You'll Learn: The Grid screen demonstrates the CSS grid layout system used to arrange content in columns. This lesson teaches you to identify grid patterns.

Before You Begin: Complete Module 1.

Walkthrough:

1. Navigate to UI Features → Grid using the sidebar.

2. The screen displays examples of the grid layout system.

3. Look for examples showing different column configurations (e.g., 2-column, 3-column, 4-column layouts).

4. Observe how columns stack vertically on narrower screens (responsive behavior).

5. Resize your browser window to see how the grid adapts.

[Screenshot: Grid page showing column layout examples]

Try It Yourself:

1. Navigate to UI Features → Grid.

2. Identify a 3-column grid example.

3. Resize your browser window to a narrow width. Observe how the columns stack.

4. Widen the window back to full width.

Knowledge Check:

• What is the purpose of a grid layout system?

• What happens to multi-column grid layouts on narrow screens?

Tips & Gotchas:

• Tip: The grid system is the foundation of the application's responsive layout. Understanding it helps you predict how pages will look on different screen sizes.

Lesson 11.4: Exploring Search Field Styles {#lesson-11-4-search-fields}

What You'll Learn: The Search Fields screen showcases different search input component styles. This lesson teaches you to identify the available variants.

Before You Begin: Complete Module 1.

Walkthrough:

1. Navigate to UI Features → Animated Searches using the sidebar.

2. The screen displays various search field component examples.

3. Scroll through to see all variants — different sizes, styles, and states (with/without icons, with/without buttons).

4. Try clicking into a search field and typing to observe the focus state and any animations.

[Screenshot: Search Fields page showing multiple search input variants]

Try It Yourself:

1. Navigate to UI Features → Animated Searches.

2. Click into each search field variant and type a few characters.

3. Observe any animations or visual changes on focus.

4. Identify at least two visually distinct search field styles.

Knowledge Check:

• What section of the sidebar contains the Search Fields page?

Tips & Gotchas:

• Tip: The search fields on this page are demonstration components. They do not perform actual searches.

Capstone Exercise {#capstone-exercise}

Congratulations on completing the training modules! This capstone exercise combines skills from Modules 1, 2, 3, 4, 9, and 10 into a realistic end-to-end scenario. Complete it without step-by-step instructions — use only the goal and success criteria below.

Scenario: Analytics Review and Data Management Session

You are an e-commerce analyst starting your morning review. Complete all of the following tasks in a single session without navigating away from the application:

Task 1: Theme and Navigation Setup

• Switch to the Cosmic theme.

• Collapse the sidebar to maximize screen space.

• Expand the sidebar again.

• Switch back to the Light (Default) theme.

Task 2: E-Commerce Dashboard Review

• Navigate to the E-Commerce dashboard.

• On the Country Orders map, select Japan. Read the bar chart values for Japan.

• Select a second country of your choice. Compare its chart values to Japan's.

• On the Traffic Reveal Card, switch to the Month period. Flip the card to see the bar chart. Flip it back.

• On the Charts Panel, switch to the Profit tab and select the Year period. Identify the highest bar value visible.

Task 3: IoT Dashboard Check

• Navigate to the IoT Dashboard.

• Read the current solar energy consumption value.

• Navigate to the Temperature screen.

• Toggle the Humidity panel OFF, then back ON.

• Drag the Temperature gauge to increase the value by at least one step.

Task 4: Data Management

• Navigate to Tables → Smart Table.

• Add a new record with the following data: First Name = "Sam", Last Name = "Chen", Username = "schen", E-mail = "sam.chen@company.com", Age = "29".

• Sort the table by Last Name in ascending order.

• Filter the table by typing "Chen" in the Last Name filter. Confirm your new record appears.

• Clear the filter.

• Delete the record you just added (confirm the deletion).

Task 5: Extra Components and Overlays

• Navigate to Extra Components → Progress Bar.

• Use the interactive progress bar to reach 75%. Note the color.

• Navigate to Extra Components → Chat.

• Send the message "gif" and observe the bot's response.

• Navigate to Modal Overlays → Dialog.

• Open the name prompt dialog and submit the name "Capstone".

• Confirm the name appears in the list.

• Open the Toastr page and trigger a Success status toast.

Success Criteria:

✅ You switched themes and navigated the sidebar without assistance.

✅ You selected two countries on the Country Orders map and read their chart data.

✅ You flipped the Traffic Reveal Card and changed its period.

✅ You identified the highest bar in the Profit/Year chart.

✅ You toggled the Humidity panel and adjusted the Temperature gauge.

✅ You added, found, and deleted a record in the Smart Table.

✅ You reached 75% on the interactive progress bar and identified its color as blue (Info).

✅ You received a GIF response from the chat bot.

✅ The name "Capstone" appears in the dialog names list.

✅ A Success status toast appeared on the Toastr page.

Glossary {#glossary}

Skills Checklist {#skills-checklist}

Use this checklist to track your progress through the training. Check off each skill as you complete it.

Foundation Skills

• FS-1: Navigate the application shell (header, sidebar, content area, footer)

• FS-2: Sort and filter a data table

• FS-3: Identify the five status indicator colors and their meanings

• FS-4: Use period selectors (Week/Month/Year) and the date picker

• FS-5: Read chart tooltips and interpret chart legends

• FS-6: Open, interact with, and close modal overlays (dialogs, windows, toasts)

• FS-7: Use the interactive progress bar and identify status color thresholds

• FS-8: Trigger and observe spinner animations

Module 1: Getting Oriented

• 1.1: Identify the four regions of the application layout

• 1.2: Navigate to any page using the sidebar menu

• 1.3: Switch between all four available themes

• 1.4: Use the user context menu and search input in the header

Module 2: Exploring the Dashboard

• 2.1: Read and interpret the IoT Dashboard status cards

• 2.2: Switch between Week/Month/Year views on the Electricity screen

• 2.3: Select rooms on the floor plan and control media playback

• 2.4: Read the Traffic Consumption chart

• 2.5: Switch between grid view and single-camera view in Security Cameras

• 2.6: Read the Solar widget and interact with the Temperature gauge

Module 3: Exploring the E-Commerce Analytics Dashboard

• 3.1: Identify the key widgets on the E-Commerce dashboard

• 3.2: Select a country on the Country Orders map and read the bar chart

• 3.3: Flip the Traffic Reveal Card and Earning Card to see their back sides

• 3.4: Read the Visitors Analytics line chart and pie chart

• 3.5: Switch between Orders and Profit tabs in the Charts Panel

• 3.6: Read progress metrics and user activity data

Module 4: Working with Tables

• 4.1: Sort and filter the Smart Table

• 4.2: Add, edit, and delete records in the Smart Table

• 4.3: Expand/collapse rows and sort the Tree Grid

Module 5: Working with Forms

• 5.1: Identify form layout patterns on the Form Layouts page

• 5.2: Interact with star ratings, heart ratings, and radio buttons

• 5.3: Select a date within the allowed range using the Datepicker

• 5.4: Identify button status, shape, and size variants

Module 6: Working with Maps

• 6.1: Pan and zoom the Leaflet map

• 6.2: Read bubble map data by hovering over country bubbles

• 6.3: Search for a location using the Search Map

• 6.4: Navigate the Google Maps embed

Module 7: Working with Charts

• 7.1: Navigate the ECharts section and read chart tooltips

• 7.2: Navigate the Chart.js section and toggle data series

• 7.3: Navigate the D3 section and explore chart interactions

Module 8: Using Editors

• 8.1: Type and format text in CKEditor

• 8.2: Type and format text in TinyMCE

Module 9: Exploring Extra Components

• 9.1: Select dates using the standard, range, and Calendar Kit calendars

• 9.2: Send messages and receive bot replies in the Chat interface

• 9.3: Identify alert component variants by status color

• 9.4: Trigger spinner animations in buttons and tabs

• 9.5: Use the interactive progress bar and identify all four status color thresholds

Module 10: Using Modal Overlays

• 10.1: Open, interact with, and close dialog overlays including the name prompt

• 10.2: Open, drag, and close window overlays

• 10.3: Configure and trigger toast notifications

• 10.4: Trigger popovers and hover over tooltips

Module 11: Exploring UI Features

• 11.1: Browse the icon library and identify icons by name and library

• 11.2: Identify typographic styles on the Typography page

• 11.3: Identify grid layout patterns

• 11.4: Identify search field component variants

Capstone Exercise

• Completed the full Capstone Exercise scenario successfully

Appendix A: Source Traceability {#appendix-a-source-traceability}

This appendix is for document maintainers, not end users.

Additional screens documented but not mapped to a specific lesson (shell/container components with no direct user-facing content):

• Editors (/editors), Extra Components (/extra-components), Maps (/maps), Tables (/tables), Pages (/pages), Modal Overlays (/modal-overlays), Miscellaneous (/miscellaneous), Charts (/charts), Forms (/forms), Ui Features (/ui-features), Not Found (/miscellaneous/not-found), Profit Card (/e-commerce/profit-card), Slide Out (/e-commerce/slide-out), Back Side Profit Card (/e-commerce/profit-card/back-side), Front Side Profit Card (/e-commerce/profit-card/front-side), Kitten (/dashboard/kitten), Weather (/dashboard/weather), Contacts (/dashboard/contacts)

Appendix B: Documentation Coverage {#appendix-b-documentation-coverage}

This appendix is for document maintainers. It identifies gaps, inferences, and verification requirements before distribution.

Screens Covered

All 100 screens listed in the assessment scope are covered in this document. Shell/container components (those whose only content is a <router-outlet>) are documented as routing infrastructure and do not have dedicated lessons, as they present no user-facing UI of their own.

Partially Documented Workflows

The following workflows are partially documented due to missing template files or child component source files:

Inferred Information Requiring Verification

The following information was inferred from technology conventions, naming patterns, or component class logic rather than from explicit template documentation. Each item should be verified against the live application before distributing this manual.

Recommendations Before Distribution

Priority 1 — Verify before any distribution:

1. WHO: The development team lead WHAT: Confirm the exact labels of the flip/toggle buttons on the Traffic Reveal Card, Earning Card, and Profit Card WHERE: Insert verified labels in Lesson 3.3, Steps 3 and 7

2. WHO: The development team lead WHAT: Confirm the exact label and location of the "return to grid" control on the Security Cameras screen WHERE: Insert verified information in Lesson 2.5, Step 4

3. WHO: The development team lead WHAT: Confirm the exact labels of the Temperature ON/OFF toggle and mode selector WHERE: Insert verified labels in Lesson 2.6, Steps 6–8

4. WHO: The system administrator or deployment team WHAT: Confirm that Google Maps API, Google Places API, CKEditor CDN, and TinyMCE skin assets are all accessible in the target deployment environment WHERE: Insert a note in Prerequisites if any of these are unavailable

Priority 2 — Verify before wide distribution:

5. WHO: The development team lead WHAT: Confirm whether Spinner sub-pages (Spinner In Buttons, Spinner In Tabs, Spinner Color, Spinner Sizes) appear as sidebar sub-items or as sections on a single Spinner page WHERE: Update Lesson 9.4 navigation steps accordingly

6. WHO: The development team lead WHAT: Confirm whether the Interactive Progress Bar is a separate sub-page or a section on the main Progress Bar page WHERE: Update Lesson 9.5 navigation step 1 accordingly

7. WHO: The product owner WHAT: Confirm the intended purpose of the Kitten, Weather, and Contacts screens — are they placeholder pages or planned features? WHERE: If they are planned features, add lessons for them in Module 2

8. WHO: The development team lead WHAT: Confirm the exact tab labels in the Charts Panel ("Orders" and "Profit") and the exact period selector UI type on the User Activity screen WHERE: Update Lesson 3.5 and Lesson 3.6 accordingly