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

function switchTab(tabName) {
  // Hide all tab content
  // Show the specified tab by data-tab attribute
}

` with class `info-card`. To make it interactive, we wrapped its content in a clickable element and added an `onclick` handler:

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

CSS Enhancements: We added a new `.info-card-link` class to provide visual feedback that the card is interactive:

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

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

This gives users standard affordances: the cursor changes to a pointer, the card lifts slightly on hover, and the shadow intensifies—all standard patterns that signal clickability without requiring additional text or icons.

Infrastructure and Deployment

S3 Upload

After modifying the index.html file locally, the updated asset was uploaded back to the S3 bucket:

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

S3 bucket configuration uses versioning enabled, so previous versions remain retrievable if rollback is needed. The bucket policy restricts public access; CloudFront is the sole public entry point, ensuring all traffic goes through the CDN for caching and DDoS protection.

CloudFront Cache Invalidation

S3 updates don't automatically invalidate CloudFront's edge caches. The distribution must be explicitly told to clear its cached version:

aws cloudfront create-invalidation \
  --distribution-id E1A2B3C4D5E6F7 \
  --paths "/index.html"

The distribution ID (here represented as E1A2B3C4D5E6F7) routes traffic for the maintenance subdomain. Invalidation typically propagates globally within 5–15 minutes; edge nodes closest to users receive the update first.

DNS and Subdomain Routing

The maintenance hub is served via Route53, pointing the subdomain (e.g., maintenance.jada.sailjada.com) to the CloudFront distribution. No DNS changes were needed for this update—only cache invalidation was required to force edge nodes to fetch the new HTML.

Why These Decisions

Single-File Architecture

Rather than splitting the dashboard into separate JavaScript modules, HTML templates, and CSS files, everything lives in one S3 object. This approach:

• Eliminates render-blocking dependencies: One HTTP request fetches the entire app; no waterfall of sequential asset loads.
• Simplifies deployment: Update one file, invalidate one CloudFront path, done. No risk of partial deployments.
• Maximizes CloudFront caching: The entire app is one cache key, so stale-while-revalidate and other cache policies are straightforward.

For a team dashboard with stable feature sets, this pattern is pragmatic. If the dashboard grows to hundreds of KB or the feature team becomes large, refactoring into a bundled application (Vite, esbuild) would be warranted, but current scale justifies simplicity.

CSS Hover States Over JavaScript

The `info-card-link` class uses pure CSS transitions rather than JavaScript event listeners for hover effects. This ensures:

• 60 FPS animations: Browser compositing handles the transform and opacity changes without blocking the main thread.
• Instant feedback: No JavaScript parsing or function call overhead between user action and visual response.
• Works offline: If JavaScript fails to load, CSS still renders and the card looks interactive (even if the click handler fails).

Tab Navigation Over Page Navigation

Rather than adding a new route or page, the click handler calls the existing switchTab() function. Benefits:

• Consistent navigation model: All tab switches use the same code path; easier to debug and trace.
• State preservation: Filters, sort order, and scroll position within other tabs remain intact.
• No page reload: Instant tab switch without the flicker or lag of a full page navigation.

Validation and Testing

After CloudFront invalidation, the changes were verified by:

• Hard-refreshing the dashboard (Cmd+Shift+R / Ctrl+Shift+R) to bypass browser cache
• Clicking the Total Tasks card and confirming the Systems tab became active
• Inspecting the card's computed styles to verify the hover transition was present
• Testing on multiple devices to confirm the click handler worked on touch and mouse inputs

What's Next

With this pattern validated, similar enhancements are candidates for the other stat cards (Total Assets, Active Cycles, etc.). Each could navigate to its relevant tab or section. Future work might include:

• Analytics instrumentation: Track which cards are clicked most to inform UX prioritization.
• Keyboard accessibility: Add tabindex