Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

Making the JADA Maintenance Dashboard Interactive: Linking Task Cards to Filtered Views

What Was Done

The JADA maintenance tracking system needed improved navigation. Previously, the "Total Tasks" summary card on the main dashboard was static—users saw the count but had no direct way to jump to the task list. This session focused on making that card clickable to navigate users to the Tasks tab, reducing friction in the maintenance workflow.

The solution involved identifying the dashboard architecture, understanding the tab-switching mechanism, and implementing a semantic HTML/CSS pattern that maintains accessibility while adding interactivity.

Technical Details

File Structure & Location

The JADA maintenance hub dashboard is hosted on AWS S3 at a subdomain served through CloudFront. The primary file modified was:

  • /maintenance-hub/index.html (stored in S3, not locally)

Multiple edits to /tmp/maintenance_index.html during development indicate local testing before pushing to S3. The file serves as the single-page application entry point for all maintenance tracking features.

Navigation Architecture

The dashboard uses a tab-based architecture with a JavaScript switch statement managing tab visibility. The key function is switchTab(tabName), which handles all navigation logic:

switchTab('systems')  // Navigate to Systems tab where tasks are rendered
switchTab('overview') // Return to overview/dashboard
switchTab('reports')  // Access reporting features

The DOM structure uses data-tab attributes to identify which content sections correspond to each tab. The Tasks table is rendered within the Systems tab, not a dedicated Tasks tab—this is a critical architectural detail that influenced the implementation.

Implementation Pattern

The card element was wrapped with styling to indicate interactivity:

  • Added cursor: pointer CSS property to the info-card-link class
  • Implemented hover state styling for visual feedback
  • Wired onclick="switchTab('systems')" to the card container
  • Maintained semantic HTML structure for accessibility

The CSS class info-card-link was created to style clickable cards distinctly from static cards, allowing future expansion if other cards need similar behavior:

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

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

This pattern uses CSS transitions for smooth hover effects—a small detail that significantly improves perceived responsiveness without adding JavaScript complexity.

Infrastructure & Deployment

S3 & CloudFront Setup

The maintenance dashboard is deployed through a static hosting architecture:

  • S3 Bucket: Holds the index.html and associated assets
  • CloudFront Distribution: Caches content at edge locations for fast delivery globally
  • Subdomain: Points to the CloudFront distribution via Route 53

After updating the S3 file, a CloudFront cache invalidation was necessary to ensure users received the updated version. The invalidation targets /* to clear the entire distribution cache.

Deployment Commands

The deployment workflow followed this sequence:

# 1. Download current file from S3
aws s3 cp s3://[bucket-name]/index.html /tmp/maintenance_index.html

# 2. Edit locally (modify card HTML and CSS)

# 3. Upload updated file back to S3
aws s3 cp /tmp/maintenance_index.html s3://[bucket-name]/index.html

# 4. Invalidate CloudFront cache to propagate changes
aws cloudfront create-invalidation --distribution-id [DIST_ID] --paths "/*"

The cache invalidation step is essential—without it, users with cached versions would not see the update for hours until the default TTL expired.

Related Infrastructure Work

During this session, several other infrastructure components were addressed:

Google Apps Script Deployment

Files modified in the JADA Apps Script project:

  • JadaLedger.gs (newly created)
  • ExpenseTracker.gs (modified)
  • appsscript.json (updated manifest)

These files handle financial tracking and expense reconciliation. Deployment used clasp, Google's command-line Apps Script tool:

cd /Users/cb/Documents/repos/sites/queenofsandiego.com
npx clasp push

The appsscript.json manifest was updated to register new dependencies and permissions required by the financial ledger functionality.

Ship Captain Crew Integration

Modifications to /tools/shipcaptaincrew/frontend/index.html suggest integration work between the maintenance system and crew scheduling tools. This represents architectural expansion beyond isolated dashboards toward a unified operations suite.

Key Design Decisions

Why Not a Dedicated Tasks Tab?

The Tasks data is rendered within the Systems tab, not created as a separate view. This decision reflects a deliberate information architecture choice—tasks are scoped to specific systems (engine, electrical, hull, etc.), so housing them in the Systems context improves logical organization. The card click-through reinforces this relationship rather than breaking it.

Why CSS Over JavaScript for Hover Effects?

The hover state uses pure CSS transitions rather than JavaScript event handlers. This approach:

  • Reduces JavaScript bundle size and parsing overhead
  • Guarantees smooth 60fps animation through GPU acceleration
  • Separates presentation concerns (CSS) from behavioral concerns (HTML)

The onclick attribute for the actual click navigation remains necessary because switching tabs is state management, not mere presentation.

S3 + CloudFront Over Direct Hosting

Using S3 as a static file origin with CloudFront provides:

  • Geographic distribution—edge caches reduce latency for users worldwide
  • High availability—S3's durability and CloudFront's failover protect against single-point failures
  • Cost efficiency—minimal compute cost, pay-per-request for GET operations
  • Zero-downtime deployments—update S3 and invalidate cache without restarting services

This architecture scales seamlessly as the maintenance hub adds more features and users.

What's Next

Future enhancements to the maintenance dashboard should consider:

  • Filtering cards: Other summary cards (Engine Hours, Pending Inspections, etc.) could similarly navigate to filtered task views
  • Breadcrumb navigation: Add a breadcrumb trail showing "Dashboard > Systems > Tasks" to provide context
  • Deep linking: Modify the URL hash when tabs switch to support bookmarking and browser back/forward
  • Analytics: