Sail JADA — Engineering Log

Technical work on sailjada.com and the JADA booking systems

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

During a recent development session on the JADA maintenance tracking system, a critical UX issue emerged: the "Total Tasks" summary card on the main dashboard was displaying data but wasn't actionable. Users viewing the card couldn't navigate to the actual task list without manually clicking a separate tab. This post covers the technical implementation to make dashboard stat cards clickable gateways into detailed views.

The Problem

The JADA Maintenance Hub serves as a centralized dashboard for vessel maintenance tracking. The homepage displays key metrics in "info-card" components—including a prominent "Total Tasks: 82" card. However, clicking this card did nothing. Users had to separately locate and click the "Systems" tab to view the task table itself. This created friction in the user experience and made the dashboard feel incomplete.

The requirement was simple but critical: make the Total Tasks card clickable and navigate directly to the Tasks tab, deployed to production today.

Technical Architecture

The maintenance hub is deployed as a static HTML/CSS/JavaScript site hosted in an S3 bucket with CloudFront distribution for edge caching and fast delivery to users accessing the JADA platform. The file structure looks like this:

  • S3 Bucket: Contains the compiled maintenance hub assets
  • CloudFront Distribution: Serves the maintenance subdomain with cache invalidation capability
  • Index.html: Single-page application with embedded tab navigation logic

The application uses a tab-switching pattern implemented in vanilla JavaScript. Each tab is identified by a data-tab attribute, and the navigation logic is driven by a switchTab() function that:

  1. Hides all tab content divs
  2. Shows the selected tab's content
  3. Updates active tab styling

Implementation Details

1. Locating the Components

The first step was identifying the exact HTML structure. The maintenance hub's index.html contains three main sections:

  • Dashboard View: Home tab with stat cards (Total Tasks, Active Issues, etc.)
  • Systems Tab: Contains the task table and detailed task data
  • Tab Navigation: Hidden JavaScript switch logic controlling which content displays

The Total Tasks card was rendered as a simple <div class="info-card"> with no event binding. The task data itself lives in the Systems tab, accessed via switchTab('systems').

2. Making the Card Interactive

The modification required three changes:

A. Update HTML Structure

Wrap the info-card in a clickable container and add the onclick handler:

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

B. Add CSS for Visual Feedback

Users need visual cues that the card is clickable. Add a new CSS class:

.info-card-link {
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

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

The hover effect provides immediate feedback, while the cursor change signals interactivity to screen readers and mouse users alike.

C. Verify Tab Switch Function

The existing switchTab() function already handles the navigation logic. No modifications were needed—it toggles the 'systems' tab's display class and updates the active tab indicator.

3. File Modifications

Only one file needed changes: the maintenance hub's index.html. The modifications were:

  • Added info-card-link class to the Total Tasks card div
  • Added onclick="switchTab('systems')" attribute
  • Added CSS rules for hover state and cursor styling

No changes to JavaScript logic, no new dependencies, no backend modifications.

Deployment Pipeline

With static assets in S3, deployment follows this sequence:

  1. Update Local File: Edit index.html with the card link changes
  2. Upload to S3: Use AWS CLI to push the updated file to the maintenance hub S3 bucket
  3. Invalidate CloudFront Cache: Create a cache invalidation for /* to force edge nodes to fetch fresh content
  4. Verify in Production: Test the maintenance hub domain to confirm card is clickable and navigation works

The CloudFront invalidation is critical—without it, cached versions of the old index.html would serve to users for up to 24 hours (depending on TTL settings). By invalidating the entire path pattern, we ensure all edge locations immediately fetch the updated content.

Why This Approach

No JavaScript Framework Overhead: Rather than adding event listeners via JavaScript or using a frontend framework, we used inline onclick attributes. The maintenance hub already has a global switchTab() function, so this is the most direct path.

CSS-Only Visual Feedback: Hover effects and cursor changes don't require JavaScript. Users get immediate visual confirmation that the card is interactive before they click.

Single-Page App Pattern: The maintenance hub is a single-page application where all tabs exist in the DOM simultaneously. Clicking the card doesn't navigate to a new URL—it simply shows/hides pre-rendered content. This keeps the experience fast and smooth.

Static Asset Efficiency: The entire application is HTML/CSS/JavaScript with no server-side rendering. This makes deployment trivial: upload a file, invalidate cache, done. No build step, no compilation, no dependencies.

Testing and Validation

Post-deployment validation checked:

  • Card displays with updated CSS (hover state visible, cursor changes to pointer)
  • Clicking the card triggers switchTab('systems')
  • The Systems tab content displays correctly with the task table visible
  • Tab indicator updates to show "Systems" as the active tab
  • Other tabs (Dashboard, etc.) still function normally
  • Mobile responsiveness maintained (touch targets remain >= 44px)

What's Next

This pattern can be extended to other stat cards on the dashboard. The same approach—adding info-card-link class and wiring onclick to the appropriate tab—would make Active Issues, Overdue Items, and other metrics directly navigable.

Future enhancements could include:

  • URL hash updates when tabs switch (e.g., #systems), enabling deep linking and browser back