Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

Making the JADA Maintenance Hub Dashboard Interactive: Clickable Task Card Navigation

What Was Done

The JADA Maintenance Hub dashboard—a critical tool for tracking vessel maintenance tasks—had a usability gap: the "Total Tasks" summary card displayed an aggregated count but wasn't interactive. Users couldn't click it to navigate to the detailed task list. This session added click-to-navigate functionality to the card, improving dashboard UX by reducing the number of clicks required to view pending maintenance items.

The implementation involved identifying the card in the S3-hosted HTML file, understanding the existing tab-switching architecture, adding CSS for interactive states, and wiring an onclick handler to trigger navigation to the Systems tab where the task table renders.

Technical Details: The Architecture

File Location & Hosting:

The maintenance hub is hosted as a static site in S3 behind CloudFront. The primary file is:

s3://jada-maintenance-hub/index.html

This file is served through a CloudFront distribution (invalidated after each change to clear the cache). The HTML file contains embedded JavaScript that manages tab state and DOM manipulation—no backend API calls are required for tab switching.

Existing Tab Navigation Pattern:

The dashboard implements a simple but effective tab system. Navigation is driven by a JavaScript function:

switchTab(tabName)

Each tab has a corresponding data-tab attribute in the HTML structure. The Systems tab (where the task table lives) is identified by data-tab="systems". When switchTab('systems') is called, the function:

  • Hides all non-active tab content
  • Shows the Systems tab
  • Updates the active tab indicator in the navigation UI

The Total Tasks Card:

The card was originally a static <div> with class info-card. It displayed the aggregated task count but had no event listener. The DOM structure was:

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

Implementation Details

Step 1: Semantic HTML Conversion

The card was converted to a clickable element by wrapping it with onclick behavior. Rather than changing the element type (which could break existing CSS), the class info-card-link was added to indicate interactivity:

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

Step 2: CSS for Interactive States

New CSS rules were added to provide visual feedback that the card is interactive:

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

.info-card-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

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

These rules provide:

  • Cursor feedback: The pointer cursor changes to indicate clickability
  • Hover elevation: A subtle translateY with enhanced shadow creates a "lifting" effect
  • Active state: The card returns to its normal position on click for tactile feedback
  • Smooth transitions: All changes animate over 200ms for a polished feel

Step 3: Accessibility Consideration

While the onclick attribute works for mouse and touch, keyboard navigation was preserved by ensuring the tab-switching mechanism itself remains accessible. Future iterations could wrap the card in a <button> for native keyboard support, but the current approach maintains backward compatibility with the existing dashboard structure.

Infrastructure & Deployment

File Retrieval:

The index.html was downloaded from S3:

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

Local Modifications:

The file was edited locally (multiple iterations on /tmp/maintenance_index.html to refine the CSS and ensure the onclick handler was correct).

Upload Back to S3:

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

CloudFront Cache Invalidation:

After the S3 upload, the CloudFront distribution serving the maintenance hub was invalidated:

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

This ensures all edge locations immediately serve the updated version. The invalidation targets the entire path tree (/*) to guarantee browsers receive the fresh HTML on next request.

Why This Approach

Minimal Coupling: The change uses the existing switchTab() function rather than introducing new state management or API calls. This reduces the risk of unintended side effects.

S3 + CloudFront Pattern: Static site hosting in S3 with CloudFront distribution is cost-effective (~$0.085/GB transferred) and provides global low-latency delivery. No server maintenance is required, and deployments are atomic file uploads.

CSS-First Interactivity: The hover and active states are CSS-based, not JavaScript-driven. This keeps the interaction smooth and doesn't require DOM polling or event delegation.

No Breaking Changes: The original info-card class remains unchanged. Only the Total Tasks card has the new class, so other cards or future cards inherit base styling without modification.

What's Next

The next phase could include:

  • Keyboard navigation: Convert the card to a <button> element for native keyboard accessibility and screen reader support
  • Analytics tracking: Add an event listener to track how often users click the card, informing future dashboard layout decisions
  • Breadcrumb context: When the Systems tab opens via card click, highlight or scroll to the task table to make the relationship explicit
  • Task filtering: Extend the card to include an optional data attribute (e.g., data-filter="priority:high") to pre-filter tasks when the tab opens

The foundation is now in place for a more interactive, user-centric maintenance dashboard that reduces friction between viewing summary metrics and drilling into operational details.