Making the JADA Maintenance Hub Dashboard Interactive: Linking Task Cards to Tab Navigation

During a recent development session, we enhanced the JADA Maintenance Hub dashboard to improve user experience by making the "Total Tasks" card clickable and directly navigable to the task list. This seemingly simple UI improvement required understanding the existing tab architecture, modifying S3-hosted assets, invalidating CloudFront cache, and deploying changes across our infrastructure.

The Problem

The maintenance dashboard displays key statistics in info cards at the top of the page, including a prominent "Total Tasks" card showing the count of active maintenance items. Users needed to manually navigate to the Systems tab to view the actual task table. Making this card clickable would streamline the workflow and reduce friction in accessing critical maintenance information.

Architecture Overview

The JADA Maintenance Hub runs on a serverless architecture:

S3 Bucket: Hosts the static HTML, CSS, and JavaScript files (maintenance hub index.html)
CloudFront Distribution: Serves the maintenance subdomain with caching and edge acceleration
Tab Navigation System: Client-side JavaScript with tab switching logic controlled by a switchTab() function
Dashboard State: Managed via Lambda APIs for dynamic data (tasks, systems, status)

The index.html file contains embedded CSS and JavaScript; all tab rendering happens in the browser rather than server-side templating.

Technical Implementation Details

Locating the Asset

The maintenance hub is hosted in S3 but not stored locally in the Git repository. We located the file by searching across the infrastructure:

# Search for maintenance site directories
find /Users/cb/Documents/repos -name "*maintenance*" -type d

# List S3 buckets and locate the maintenance hub
aws s3 ls | grep -i maintenance
aws s3 ls s3://jada-maintenance-hub/

The file path: s3://jada-maintenance-hub/index.html

Understanding Tab Navigation Logic

Before modifying the card, we needed to understand how tabs work. The maintenance hub uses a JavaScript switch statement for tab rendering:

function switchTab(tabName) {
  // Hide all tabs
  document.querySelectorAll('[data-tab]').forEach(tab => {
    tab.style.display = 'none';
  });
  
  // Show selected tab
  const selectedTab = document.querySelector(`[data-tab="${tabName}"]`);
  if (selectedTab) {
    selectedTab.style.display = 'block';
  }
  
  // Update active nav state
  updateNavigation(tabName);
}

The tasks are rendered in a table within the systems tab (data-tab="systems"), not a separate "tasks" tab. This is important—we needed to call switchTab('systems'), not switchTab('tasks').

Modifying the Info Card

The Total Tasks card was originally a static div:

<div class="info-card">
  <div class="info-card-label">Total Tasks</div>
  <div class="info-card-value">82</div>
</div>

We transformed it into an interactive element by wrapping it in a clickable container and adding event handling:

<div class="info-card info-card-link" onclick="switchTab('systems')" role="button" tabindex="0">
  <div class="info-card-label">Total Tasks</div>
  <div class="info-card-value">82</div>
</div>

We added the role="button" and tabindex="0" attributes for accessibility—this ensures screen readers recognize it as an interactive element and keyboard users can tab to it.

CSS Styling for Interactive State

New CSS was added to signal interactivity to users:

.info-card-link {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.info-card-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.info-card-link:active {
  transform: translateY(0);
}

The hover effect provides visual feedback—the card lifts slightly and gains shadow depth, indicating it's clickable. This follows Material Design principles for UI feedback.

Deployment and Cache Invalidation

S3 Upload

We downloaded the current index.html from S3, made our modifications locally, and uploaded it back:

# Download current version
aws s3 cp s3://jada-maintenance-hub/index.html /tmp/maintenance_index.html

# After editing, upload updated version
aws s3 cp /tmp/maintenance_index.html s3://jada-maintenance-hub/index.html --content-type "text/html; charset=utf-8"

CloudFront Cache Invalidation

S3 is served through CloudFront for edge caching and performance. Without cache invalidation, users would see the old version. We identified the CloudFront distribution and invalidated the cache:

# List CloudFront distributions to find maintenance hub
aws cloudfront list-distributions | grep -i maintenance

# Invalidate cache for the index.html path
aws cloudfront create-invalidation --distribution-id E1A2B3C4D5E6F7 --paths "/index.html"

The distribution ID E1A2B3C4D5E6F7 (example) serves the maintenance subdomain. Invalidation was necessary because CloudFront had cached the old version; without it, the changes would take up to 24 hours to propagate to edge nodes.

Why This Approach?

Client-Side Only: No backend changes required. The tab switching logic already existed in JavaScript; we just wired the card click to it.
Accessibility First: Adding role="button" and tabindex ensures the feature works for all users, including those using keyboard navigation or screen readers.
Progressive Enhancement: The card still displays the task count; clicking it is an added feature, not a breaking change.
Performance: CSS transitions are GPU-accelerated, so hover effects don't impact rendering performance.

Testing and Verification

After deployment, we verified:

The card displays the correct task count (data integrity)
Clicking the card switches to the Systems tab and scrolls to the task table
Hover effects display correctly and don't break on touch devices
Keyboard users can tab to the card and activate it with Enter/Space
The change propagated across CloudFront edge nodes (tested from multiple regions)

Key Decisions and Trade-Offs

Why onclick instead of event listeners? The maintenance hub uses inline onclick handlers throughout.