Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

Making the JADA Maintenance Hub Dashboard Actionable: Clickable Stat Cards and Tab Navigation

What Was Done

The JADA Maintenance Hub dashboard had a "Total Tasks" stat card displaying aggregated task counts, but it was purely informational. Users had to manually navigate to the Tasks tab to view details. We made the card clickable—converting it from a passive display element into an interactive navigation control that switches the dashboard view to the Systems tab where the full task table renders.

Technical Details: The Problem

The maintenance hub lives in an S3-backed CloudFront distribution serving maintenance.jada.local. The dashboard's index.html file (stored at s3://jada-maintenance-hub/index.html) contains multiple information cards across the top—Total Tasks, Active Systems, Pending Maintenance, etc. The "Total Tasks" card was a static <div> with class info-card, showing an aggregated count but offering no pathway to drill down into the actual tasks.

The underlying architecture uses tab-based navigation controlled by a JavaScript switchTab() function. The task table itself is rendered in the Systems tab (not a separate Tasks tab as one might expect). The function accepts a tab identifier string and handles DOM manipulation to show/hide content and update visual states.

Solution Architecture

Rather than creating a new tab or duplicating task logic, we leveraged the existing navigation system by making the stat card a trigger for switchTab('systems'). This approach:

  • Reuses existing code paths: No new tab logic or state management needed
  • Maintains visual hierarchy: The Systems tab already displays granular task data; the card simply becomes a shortcut
  • Improves UX: Users discovering "82 total tasks" can immediately view details with one click
  • Reduces cognitive load: No need to hunt for where tasks actually live

Implementation: DOM and CSS Changes

The original markup for the Total Tasks card was:

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

We wrapped it with a clickable handler:

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

The new info-card-link class adds visual and interaction affordances:

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

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

This CSS pattern follows modern UX conventions: on hover, the card lifts slightly (via translateY) and gains depth with an enhanced shadow. The background shift signals interactivity without being jarring. The 0.2s ease transition keeps the interaction feel smooth and professional.

JavaScript Integration

The switchTab('systems') call already existed in the codebase, handling the tab switching logic at the application level. No changes to the navigation function itself were required; we simply invoked it from the new click handler. The function manages:

  • Hiding all non-active tabs via CSS display: none
  • Showing the target tab
  • Updating button states (active/inactive styling)
  • Optionally refreshing data if the tab has lazy-load logic

Infrastructure: S3 and CloudFront

The maintenance hub is deployed via the following infrastructure stack:

  • S3 Bucket: jada-maintenance-hub (in us-west-2 region)
  • CloudFront Distribution: E2ABC123XYZ (pointing to the S3 origin)
  • Route53 DNS: CNAME record maintenance.jada.local → CloudFront distribution domain

The deployment workflow:

# 1. Download current version from S3
aws s3 cp s3://jada-maintenance-hub/index.html /tmp/maintenance_index.html

# 2. Edit locally (add onclick handlers, CSS classes)
# ... (edit in your preferred editor)

# 3. Upload back to S3
aws s3 cp /tmp/maintenance_index.html s3://jada-maintenance-hub/index.html \
  --content-type "text/html" \
  --cache-control "max-age=3600"

# 4. Invalidate CloudFront cache to serve updated version
aws cloudfront create-invalidation \
  --distribution-id E2ABC123XYZ \
  --paths "/*"

We used --cache-control "max-age=3600" to set a 1-hour TTL on the object in S3, ensuring changes propagate quickly without overwhelming the origin. The CloudFront invalidation ensures edge caches flush immediately.

Why This Approach?

No backend changes required: This is a pure frontend enhancement. The stat card count (82 tasks) is already being calculated and injected into the HTML, either via server-side rendering or client-side JavaScript. Adding a click handler doesn't touch that logic.

Minimal CSS footprint: The info-card-link class is a small, additive enhancement. It doesn't override or break existing info-card styles; it layers on top. This reduces regression risk.

Preserves tab state: Since we're using the existing switchTab()` function, the navigation remains consistent with how users interact with the rest of the dashboard. No surprise behaviors or edge cases.

Testing Considerations

When deployed, verify:

  • The card displays with a pointer cursor on hover
  • Clicking the card smoothly transitions to the Systems tab
  • The task table is visible once the tab loads
  • The hover animation is smooth on all target browsers (Chrome, Firefox, Safari, Edge)
  • Mobile responsiveness: the hover state should gracefully degrade (or be replaced with active state styling) on touch devices

What's Next

Potential follow-ups for future iterations:

  • Accessibility audit: Ensure the clickable card is keyboard-navigable (tab key focus, Enter key support) and properly labeled for screen readers
  • Analytics: Track clicks on the card to measure engagement and validate that this UX improvement drives users toward task details
  • Similar patterns: Apply the same clickable-card treatment to other stat cards (Active Systems, Pending Maintenance) to promote exploration of dashboard sections