Sail JADA — Engineering Log

Technical work on sailjada.com and the JADA booking systems

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

What Was Done

The JADA Maintenance Hub's dashboard presented task metrics in a prominent "Total Tasks" card, but clicking it produced no action. Users had to manually navigate to the Systems tab to view the underlying task table. This session involved retrofitting that card with click-to-navigate functionality, transforming a static display element into an interactive navigation trigger.

The implementation required three coordinated changes:

  • Identifying the tab-switching mechanism and its entry points
  • Adding semantic clickability to the Total Tasks info-card component
  • Deploying changes through the S3 + CloudFront pipeline with cache invalidation

Technical Details

Locating the Source of Truth

The maintenance hub's primary interface lives not in a local Git repository but in an S3 bucket. This is a deliberate architectural choice for this project—the dashboard is deployed as a static site served through CloudFront, allowing rapid iteration without rebuilding backend services.

The search process involved:

aws s3 ls s3://jada-maintenance-hub/
aws s3 cp s3://jada-maintenance-hub/index.html /tmp/maintenance_index.html

Once downloaded, grepping for the Total Tasks card string confirmed its location in the HTML structure. The card is rendered as a `div` with class `info-card`, containing hardcoded task count and descriptive text.

Understanding Tab Navigation Architecture

The maintenance hub uses a tabbed interface. Examining the HTML revealed a `switchTab(tabName)` function that:

  • Takes a string identifier (e.g., `'systems'`, `'vessels'`, `'financials'`)
  • Hides all tab content panels
  • Shows only the panel matching the selected tab
  • Updates visual indicators (active tab styling)

The function is invoked by tab navigation buttons via `onclick="switchTab('systems')"` attributes. This pattern—direct function invocation on click—is intentionally simple for a static site context where no build tooling is required.

The task table itself is housed within a `

` element. Clicking the Total Tasks card now needed to trigger `switchTab('systems')`, making that same table visible and focused.

Modifying the Info Card Component

The original Total Tasks card structure was a static div:

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

To make it clickable without changing the DOM structure significantly, an `onclick` handler was added directly to the card:

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

Inline `cursor: pointer` provides immediate visual feedback, but for maintainability, a new CSS class was also introduced:

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

.info-card-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

The hover state (slight lift and background brightening) signals to users that the card is interactive. This follows standard UI patterns where clickable elements respond to pointer interaction.

A second approach considered was wrapping the card in an `` or `