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

```html

What Was Done

The JADA Maintenance Hub dashboard displays a "Total Tasks" card showing aggregated task counts. Previously, this card was static—viewing it displayed information, but users couldn't navigate to the underlying task list from the card itself. The requirement was to make this card clickable, causing it to switch the dashboard view to the Systems tab (where the full task table renders) when clicked.

This involved three core changes:

Identifying the card DOM structure and existing tab navigation logic in the maintenance hub frontend
Adding semantic HTML and CSS classes to make the card visually interactive
Wiring the click handler to trigger the existing switchTab() function with the correct tab identifier
Invalidating the CloudFront distribution cache to ensure users received the updated asset

Technical Details: File Structure and Navigation Architecture

Source File Location: The maintenance hub frontend lives in an S3 bucket (not in the local repository). The primary HTML file is served from S3 and cached through CloudFront.

Retrieving the File: The maintenance hub index.html was downloaded from S3 to understand the existing tab structure and card layout:

# Download from S3 to inspect
aws s3 cp s3://jada-maintenance-hub/index.html /tmp/maintenance_index.html

Tab Navigation Architecture: The maintenance hub uses a tab-based interface. The existing JavaScript function switchTab(tabName) handles all tab switching logic. Each tab is identified by a data-tab attribute on tab buttons, and content is hidden/shown based on the active tab state.

The Systems tab—which contains the full task table rendering—is identified internally as 'systems'. The task table renders task data fetched from a Lambda API endpoint configured in the dashboard state (stored in dashboardState JavaScript object).

DOM Changes: Making the Card Clickable

Original Structure: The Total Tasks card was a simple <div> with the class info-card, displaying static text and a number.

Modified Structure: The card was wrapped to be semantically clickable:

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

Why These Changes:

onclick="switchTab('systems')" — Directly invokes the existing tab-switching function with the Systems tab identifier. This avoids code duplication and ensures consistency with the current navigation pattern.
role="button" — Semantic HTML for accessibility. Screen readers will announce this as an interactive button, not just a div.
tabindex="0" — Allows keyboard navigation. Users can tab to this element and press Enter to activate it (with a small event listener addition).
info-card-link — New CSS class that applies interactive styling (see below).

CSS Styling: Visual Feedback

Added a new CSS class to provide visual affordances that the card is interactive:

.info-card-link {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.info-card-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  background-color: #f5f5f5;
}

.info-card-link:active {
  transform: translateY(0);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

Design Rationale: The hover state uses a subtle upward translation and enhanced shadow to signal interactivity without breaking the card's visual hierarchy. The transition is fast (200ms) to feel responsive. This follows Material Design conventions for interactive surfaces.

Keyboard Accessibility Enhancement

To support Enter/Space key activation on the card, a small event listener was added to the script section:

document.querySelector('.info-card-link').addEventListener('keydown', function(event) {
  if (event.key === 'Enter' || event.key === ' ') {
    event.preventDefault();
    switchTab('systems');
  }
});

Infrastructure: Deployment and Cache Invalidation

S3 Upload: The updated index.html was pushed back to the S3 bucket:

aws s3 cp /tmp/maintenance_index.html s3://jada-maintenance-hub/index.html --content-type "text/html"

CloudFront Cache Invalidation: Since the maintenance hub is served through CloudFront (for global edge caching), the distribution cache had to be invalidated to ensure all users received the updated version immediately:

aws cloudfront create-invalidation --distribution-id [DIST_ID] --paths "/*"

Why S3 + CloudFront: The maintenance hub is a static HTML asset with no server-side logic. S3 provides durable, cheap storage; CloudFront provides low-latency global distribution and automatic minification/compression. Invalidation ensures cache coherency—without it, some users might see stale versions for up to the TTL (typically 1 hour).

Testing and Verification

The change was verified by:

Checking that the Total Tasks card now has a pointer cursor on hover
Clicking the card and confirming the view switches to the Systems tab (where the task table appears)
Testing keyboard navigation: tabbing to the card and pressing Enter
Verifying the task table displays the correct aggregated task count from the dashboardState object

Why This Approach (Not Alternatives)

Alternative 1: Navigation Link — Could have used an <a> tag with JavaScript href. Rejected because there's no URL to navigate to; the tab switch is in-memory state management.

Alternative 2: Modal or Popup — Could have opened the task list in a modal overlay. Rejected because the Systems tab already exists and is the expected location for detailed views; this keeps navigation consistent.

Alternative 3: Direct API Call — Could have fetched task data on card click and displayed it inline. Rejected to avoid code duplication; the Systems tab already handles all task-fetching logic, so reusing that behavior is simpler to maintain.

What's Next

This pattern (making dashboard stat cards navigational) can be extended to other cards:

Engine Hours Card: Could link to the Maintenance Log tab to show hour-based service intervals
Open Incidents Card: Could link to a filtered view of high-priority tasks
Due Soon Card:
← All posts