Sail JADA — Engineering Log

Technical work on sailjada.com and the JADA booking systems

```html

Making Dashboard Cards Interactive: Linking UI State to Tab Navigation in a Maintenance Hub

What Was Done

The JADA Maintenance Hub's dashboard displays summary cards showing key metrics—one of which is "Total Tasks: 82". Users were clicking this card expecting navigation to the detailed task list, but it was static. The goal was to make the card clickable and have it switch the interface to the Systems tab where the full task table lives, eliminating the friction of manual tab navigation.

Technical Details

Understanding the Current Architecture

The maintenance hub is a single-page application (SPA) served from an S3 bucket and distributed via CloudFront. The application uses vanilla JavaScript with a tab-based UI pattern:

  • File location: s3://jada-maintenance-hub/index.html
  • CloudFront distribution: Points to the S3 bucket with cache invalidation support
  • Tab structure: Multiple tabs identified by data-tab attributes (e.g., data-tab="systems", data-tab="dashboard")
  • Tab switching: Controlled by JavaScript function switchTab(tabName)

The task data is rendered as a table within the Systems tab, not the Dashboard tab where the Total Tasks card lives. This spatial separation required a programmatic bridge.

The Info Card Element Structure

Before modification, the Total Tasks card was a static <div> with the class info-card:

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

This structure provided no affordance for interactivity—no cursor change, no hover state, no click handler. The decision was to preserve the HTML structure for backward compatibility with existing CSS but enhance it with minimal JavaScript and targeted CSS additions.

Implementation Strategy

Step 1: Add Click Handler

Wrapped the card div with an onclick handler that invokes the existing switchTab() function:

<div class="info-card" onclick="switchTab('systems')" style="cursor: pointer;">
  <div class="info-card-value">82</div>
  <div class="info-card-label">Total Tasks</div>
</div>

We chose inline onclick over event listeners to minimize changes to the JavaScript event binding logic, which already manages other UI interactions. The function switchTab('systems') was already present and tested; reusing it ensured consistent behavior.

Step 2: Add CSS for Visual Feedback

Created a new CSS class info-card-link to provide cursor and hover state feedback:

.info-card-link {
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.info-card-link:hover {
  background-color: rgba(200, 220, 255, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

This approach:

  • Uses a semantic class name that signals intent to future maintainers
  • Applies a subtle hover effect (background tint + shadow lift) that doesn't distract from the dashboard view
  • Uses CSS transitions for smooth visual feedback (200ms)
  • Maintains the card's original appearance in its resting state

Step 3: Update the HTML

Modified the Total Tasks card to include the info-card-link class:

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

Infrastructure and Deployment

S3 Bucket Management

The maintenance hub is stored in S3 with the following configuration:

  • Bucket: jada-maintenance-hub (versioning enabled)
  • Key: index.html
  • Metadata: Content-Type set to text/html; charset=utf-8

The file was downloaded locally, edited, and re-uploaded using the AWS CLI:

aws s3 cp index.html s3://jada-maintenance-hub/index.html --content-type "text/html; charset=utf-8"

CloudFront Cache Invalidation

After uploading to S3, the CloudFront distribution cache was invalidated to ensure users receive the updated file immediately. The distribution ID is identified via:

aws cloudfront list-distributions --query "DistributionList.Items[?DomainName=='d1234567890abc.cloudfront.net'].Id"

Cache invalidation command:

aws cloudfront create-invalidation --distribution-id E1ABC2DEF3GHI --paths "/*"

The /* path pattern ensures all objects in the distribution are purged, guaranteeing users see the updated index.html within 1–2 minutes.

Key Decisions and Rationale

Why Not Use a Router or SPA Framework?

The maintenance hub uses vanilla JavaScript with a simple tab-switching pattern. Adding a routing library would introduce unnecessary complexity and dependencies. The existing switchTab() function is sufficient and proven.

Why Inline onclick Instead of Event Delegation?

The HTML structure is static (not dynamically generated). A single onclick attribute is easier to understand, debug, and maintain than attaching listeners to a parent element. It also reduces the risk of event-binding conflicts with other parts of the application.

Why CSS Transitions?

Smooth hover feedback improves perceived responsiveness and signals to users that the card is interactive. A 200ms transition is fast enough to feel instant but slow enough to be perceptible.

Why Preserve the HTML Structure?

Existing CSS styling depends on the current class hierarchy. Changing the structure (e.g., wrapping in a button element) could break visual layouts or introduce accessibility issues. The minimal change approach (adding classes and handlers) reduces regression risk.

What's Next

  • Testing: Verify that clicking the Total Tasks card on the Dashboard tab switches to the Systems tab and the task table is visible.
  • Analytics: Monitor CloudWatch or application logs to track how often users click the card. This data informs