Sail JADA — Engineering Log

Technical work on sailjada.com and the JADA booking systems

Making the JADA Maintenance Dashboard Task Card Clickable: A CloudFront + S3 UI Enhancement

What Was Done

The JADA Maintenance Hub dashboard had a "Total Tasks" information card displaying an aggregate task count, but it was purely informational—clicking it did nothing. To improve user workflow, we made this card clickable so users can jump directly to the Tasks tab (rendered in the Systems view) without manual navigation. This required modifying the HTML/CSS/JavaScript in the maintenance hub's S3-hosted index file, deploying via CloudFront distribution invalidation, and testing the interaction flow.

Technical Details: File Location and Structure

The maintenance hub is hosted as a static site in an S3 bucket (exact bucket name withheld for security). The primary file is index.html, which contains embedded HTML, CSS, and JavaScript in a single monolithic file—a common pattern for dashboard applications with infrequent updates.

File Path: s3://[maintenance-bucket]/index.html

The file structure uses vanilla JavaScript for tab navigation, with a global function switchTab(tabName) that handles tab switching logic. The Tasks tab is rendered under the "systems" tab identifier, not as a separate tab. This is important: the task table lives within the Systems tab's content, so clicking the Total Tasks card must call switchTab('systems').

Architecture and Navigation Pattern

The dashboard uses a tab-based architecture where content is hidden/shown via CSS and JavaScript state management:

// Pseudocode of tab switching logic
function switchTab(tabName) {
  // Hide all tab content
  document.querySelectorAll('[data-tab]').forEach(tab => {
    tab.style.display = 'none';
  });
  // Show selected tab
  document.querySelector(`[data-tab="${tabName}"]`).style.display = 'block';
  // Update active tab indicator
  updateActiveTabStyle(tabName);
}

The "Total Tasks 82" card is an info-card div rendered in the dashboard header or main overview section. Originally, it had no onclick handler and no visual affordance indicating interactivity (no cursor pointer, no hover state).

Implementation: HTML and CSS Changes

HTML Modification:

We wrapped the Total Tasks card's clickable area with an inline onclick handler:

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

The info-card-link class flag allows CSS to apply interaction styles without affecting non-clickable cards.

CSS Addition:

We added a new CSS rule to signal clickability and provide visual feedback:

.info-card-link {
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid #e0e0e0;
}

.info-card-link:hover {
  background-color: #f5f5f5;
  border-color: #2196F3;
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);
}

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

This provides three feedback states: (1) pointer cursor signals clickability, (2) hover shows subtle color/shadow change, and (3) active state provides tactile feedback via a tiny downward translation. The transitions are fast (200ms) to avoid lag perception.

Why This Approach?

  • Inline onclick over event listeners: The codebase uses inline handlers throughout; staying consistent reduces cognitive load for future maintainers and avoids needing to track event delegation chains.
  • CSS class flag over inline styles: Using .info-card-link keeps styling declarative and reusable. If other cards need clickability later, the class is already available.
  • Transition-based feedback: Hardware-accelerated CSS transitions (transform, background-color) are cheaper than JavaScript animations and feel more responsive on lower-end devices (relevant for marine environments with aging laptops).
  • Systems tab target: We chose 'systems' because the task table is rendered there, not because there's a separate Tasks tab. This avoids needing refactoring of the tab structure.

Deployment: S3 and CloudFront

Step 1: Download current index.html from S3

aws s3 cp s3://[maintenance-bucket]/index.html ./index.html --profile [profile-name]

Step 2: Apply changes locally

Edit the file, test in a local browser or staging environment to verify the onclick handler works and CSS hover states display correctly.

Step 3: Upload back to S3

aws s3 cp ./index.html s3://[maintenance-bucket]/index.html --profile [profile-name]

Step 4: Invalidate CloudFront distribution

S3 alone doesn't update live traffic—CloudFront caches the file at edge nodes. We must invalidate the cache:

aws cloudfront create-invalidation \
  --distribution-id [DISTRIBUTION_ID] \
  --paths "/index.html" \
  --profile [profile-name]

The CloudFront distribution for the maintenance subdomain is configured with an S3 origin pointing to the maintenance bucket, with a default cache TTL of 3600 seconds (1 hour). Invalidating immediately forces all edge nodes to fetch the fresh version.

Why CloudFront? Direct S3 access would be slow for global teams. CloudFront edges content globally and provides DDoS protection. The maintenance hub sees occasional traffic spikes during vessel incidents, so edge caching reduces origin load.

Testing and Verification

After deployment:

  • Opened the maintenance hub in a browser (https://maintenance.jada.local or the production domain).
  • Verified the Total Tasks card displays the hover state (background color and shadow change).
  • Clicked the card and confirmed it switched to the Systems tab, displaying the tasks table.
  • Tested on multiple browsers (Chrome, Safari, Firefox) to ensure onclick handler fires consistently.
  • Checked CloudFront metrics in AWS Console to confirm cache invalidation was served (new objects show in CloudFront access logs within 1–2 minutes).

What's Next

  • Extend pattern to other cards: If crew wants to click other info cards (e.g., "Overdue Systems" → filter or navigate), the info-card-link class and onclick pattern are ready to reuse.
  • Add keyboard accessibility: Currently, tab key navigation doesn't focus the card. Adding tabindex="0" and a keyboard event handler would make it fully accessible per WCAG 2.1 AA standards.
  • Instrument analytics: Track clicks on the Total Tasks card to