TR Actabl Visual Refresh

What's Changed

Transcendent Application • Customer Release Guide

This guide covers all functional changes in the Transcendent application following the Actabl rebrand update. Use it to quickly find what moved, what’s new, and what works differently.

Visual Refresh

We updated the entire application's look and feel to align with the Actabl brand. The interface now features a cleaner, lighter color palette built on neutral whites and grays, using brand blues to highlight interactive elements like buttons, links, and active selections.

Status indicators use a consistent color-coding system:

• Green: Success

• Red: Errors

• Amber: Warnings

We also softly rounded the corners on cards, buttons, and inputs, and standardized the spacing between elements. Form fields now feature visible outlined borders, making them easier to identify at a glance. Overall, the application feels more modern, polished, and visually consistent from page to page.

Navigation: Sidebar Redesign

We completely redesigned the application sidebar into a sleek, two-part layout.

Side Menu (Always Visible)

The left edge of the screen now features a narrow vertical side menu. It displays the Actabl logo at the top, followed by icons for each major application section (e.g., Home, Work, Assets, Reports).

• Hover over any icon to view its tooltip label.

• The side menu remains visible by default. Toggle its visibility using the menu button in the header.

Feature Panel (Expandable)

Clicking an icon on the side menu opens a feature panel to its right, revealing the sub-pages and groups within that section.

• Expand or collapse groups by clicking the group name. Groups containing your current page expand automatically.

• Click the active section icon a second time to close the feature panel.

• A blue accent bar on the left side highlights your active page.

 

Desktop vs. Mobile Behavior

• On Desktop: The feature panel pushes your main page content to the right when it opens.

• On Mobile & Tablet: The feature panel slides over your content as an overlay. Tap outside the panel to close it.

User Menu

We moved your profile, role selector, licenses, and logout options from the top header bar into the sidebar. Look for your avatar (profile photo or initials) at the bottom of the side menu.

• Click your avatar to open a dropdown menu containing your name, email, current role, and direct links to your profile, licenses, and logout.

 

Search

Search no longer sits embedded in the sidebar. It now features its own dedicated magnifying glass icon on the side menu.

Quick Page Search (Ctrl+K / Cmd+K)

A new command palette lets you instantly jump to any page in the application.

How to Open

• Press Ctrl+K (Windows) or Cmd+K  (Mac) on your keyboard from anywhere in the app, or

• Click the Magnifying Glass icon on the side menu.

How to Use

1. Start typing the name of the page you need.

2. The app groups results by section and highlights matching text.

3. Results display breadcrumb paths so you can distinguish between pages with similar names.

Keyboard Navigation

If no pages match your search term, the system displays a "No pages found" message.

Header: Breadcrumb Navigation

The application header now displays a breadcrumb trail to show your exact location within the app.

How It Works

• Click the Home Icon at the far left of the header to return to your dashboard.

• Chevron-separated breadcrumbs track your path (e.g., Home > Work > Work Orders).

• The final breadcrumb displays the current page name.

• Clickable intermediate breadcrumbs let you navigate up a level. Static text breadcrumbs represent parent grouping categories that do not have their own page.

Deep Navigation

When you navigate several levels deep, the breadcrumb trail automatically shortens to keep the header clean, displaying the first breadcrumb, an ellipsis (...), and the final two breadcrumbs.

Menu Reorganization: Dashboards

We moved all dashboard pages into their own top-level Dashboards section in the side menu.

What Changed

Previously, the menu scattered dashboard pages (including the main dashboard, expenditures dashboard, and work requester dashboard) across different areas. We have now grouped them together under a dedicated Dashboards menu item marked with a home icon.

Where to Find Your Dashboards

• Locate the Dashboards home icon near the top of the side menu.

• Click it to expand the feature panel and view all available dashboards.

• We automatically transferred user permissions; all roles that previously accessed these dashboards retain their access in the new location.

Announcements

We redesigned the announcements panel, which you can still access via the bell icon in the header.

What's Changed

• Mark All Read: A new button at the top lets you clear all unread statuses in a single click.

• Timestamps: Each announcement now shows a relative timestamp (e.g., "2 hours ago").

• Alert Icons: Color-coded icons instantly indicate the type and severity of the announcement.

• Unread Indicator: A simple dot indicator highlights unread announcements so you can spot them quickly.

• Empty State: When you catch up on all announcements, the app displays an "All caught up" message and an icon instead of plain text.

• Increased Visibility: The popover now displays up to 5 announcements at a time (up from 4).

• Scrollable List: A cleaner layout organizes announcements into a scrollable list featuring a header at the top, content in the middle, and navigation at the bottom.

Data Grids

Toolbar Overflow Menu

Grid toolbar buttons—including column chooser, clear filter, refresh, export, and reset columns—now live inside a three-dot overflow menu at the end of the toolbar. Click the menu button to access these actions, which now feature full text labels for easy identification.

 

Alternating Row Colors

All data grids across the application now display alternating row background colors by default, making it easier to read across wide rows of data.

Column Header Tooltips

Hovering over a grid column header now reveals a tooltip with the full column name. This helps you identify columns when narrow widths truncate the text.

Toolbar Tooltips

Grid toolbar buttons now display descriptive tooltips upon hover. Previously, these buttons only showed icons without supporting text.

Outlined Form Inputs

Text inputs, dropdowns, and other form fields throughout the application now use an outlined style. Visible borders around each field make it easier to identify data-entry zones.

Work Dashboard: Engagement Tiles

We redesigned the engagement metric tiles on the dashboard. Instead of stacking the icon, title, and metrics vertically inside a card, the dashboard now displays them as a horizontal row. This single-line format delivers a more compact, scannable view of your icon, title, amount, and variance.

 

Legacy URL Redirects

If you bookmarked pages using older URL formats, they will still work. The application automatically redirects the following legacy URLs:

• Asset Tree - /asset/tree ,  /assettree , and  /asset-tree   redirects to the Assets List page.

• Labor Forecast -  /laborforecast  and  /laborForecast  redirects to the new Labor Forecast page.

Error Pages

We redesigned our error pages to provide clearer guidance when things go wrong.

Not Authorized

If you try to access a page without the required permissions, the app displays:

• A lock icon

• A clear message explaining that you lack authorization

• A Back button to return you to the previous page

Page Not Found

If you navigate to a non-existent page, the app displays:

• An error icon

• A message stating that the system cannot find the page

• A Back button to return you to the previous page

Dialog Button Order

We standardized the button order in dialogs and modals across the entire application:

• Left Side: Cancel / Exit / Close buttons

• Right Side: Save / Submit / Action buttons

This standard applies to all areas, including work orders, reports, asset management, import dialogs, forms, and inspection management.

Help System

We updated the help popover (accessed via the ? button):

• A reorganized layout provides a clearer header and content structure.

• The Edit button now appears as a text-style button with a tooltip rather than a standalone icon.

Modal Overlays

When you open a dialog or modal, the system now applies a darker background overlay. This treatment draws focus directly to the dialog content, helping you concentrate on the task at hand.

© 2026 Actabl, Inc. • Transcendent