Queen of San Diego — Tech Blog

Under the hood at queenofsandiego.com

Building a Unified Ops Dashboard: Consolidating JADA Charters Infrastructure Into a Single Management Portal

Managing multiple web properties, payment systems, and operational tools across different platforms creates friction. When you're running a charter business with websites, booking engines, payment processing, and administrative workflows scattered across different services, the cognitive load adds up quickly. This session focused on consolidating that fragmentation into a single ops dashboard at https://ops.queenofsandiego.com/—a centralized hub for payment links, public-facing properties, external platforms, and development tools.

What Was Done

The ops page underwent a significant restructuring to serve as the single source of truth for operational access:

  • Payments Section — Created a dedicated payments card with quick access to the $500 deposit link, Zelle wire details, and recent transaction history
  • Public Sites Section — Consolidated all customer-facing properties (sailjada.com, queenofsandiego.com, Events Hub, burialsatseasandiego.com)
  • External Platforms — Added links to Instagram, ImprovMX email routing, DocuSign waiver system, and Google Business Profile
  • Dev Tools Updated — Fixed broken links, added Rady Shell Google Apps Script project, and linked DynamoDB crew dispatch table
  • Stripe Payment Link Generation — Created a $1,560 payment link for deposit processing using the JADA Stripe account
  • Deployment — Updated index.html, deployed to S3, and invalidated CloudFront cache

Technical Details: File Structure and Modifications

The primary file modified was /Users/cb/Documents/repos/sites/ops/index.html. This is the entry point for the ops dashboard and contains semantic HTML organized into logical sections:

File: /Users/cb/Documents/repos/sites/ops/index.html
Structure:
├── Header (branding and navigation)
├── Payments Section (new primary card)
├── Public Sites Section (new consolidated view)
├── External Platforms (expanded)
├── Dev Tools (updated with corrections)
└── AWS Resources (new DynamoDB reference)

Each section uses a card-based layout with color-coded accents for visual scanning. The Payments section received a green accent to denote financial operations, with the $500 deposit button prominently placed in the quick links area.

Payment Processing: Stripe Integration

The Stripe payment link generation followed this workflow:

  1. Product Creation — Created a product in the JADA Stripe account representing the charter deposit
  2. Price Object — Generated a price of $1,560.00 USD with the product as parent
  3. Payment Link Generation — Created a Stripe payment link from the price object, configured to auto-fill metadata and redirect on success
  4. HTML Integration — Embedded the payment link as a button in the Payments card with fallback Zelle details below

The Stripe API calls used standard REST endpoints:

POST /v1/products
POST /v1/prices
POST /v1/payment_links

These operations were executed via the Stripe CLI with credentials sourced from repos.env (secrets management follows the standard practice of never committing credentials to source control).

Infrastructure: S3 and CloudFront Deployment

The ops page is hosted on AWS with the following architecture:

  • S3 Bucket — Hosts the static HTML content for ops.queenofsandiego.com
  • CloudFront Distribution — Provides global edge caching and HTTPS termination in front of the S3 bucket
  • Route53 — DNS routing for ops.queenofsandiego.com points to the CloudFront distribution endpoint

After modifying index.html, the deployment process involved:

aws s3 cp /Users/cb/Documents/repos/sites/ops/index.html s3://[ops-bucket-name]/index.html

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

The CloudFront invalidation ensures that edge caches are cleared immediately, making the updated page available globally within seconds. The distribution was identified from the existing infrastructure audit and the invalidation targeted all paths with /* to guarantee complete refresh.

Data Integrity: Reference Sheet Corrections

During this session, a broken link to the Port Sheet (for Sheraton port submissions) was corrected. The original link was a placeholder; the correct Google Sheets ID was identified as 1jUxYXS24VS-D9tO37ckNqMNclvOBqQuh from the ACTIVE.md reference file.

This illustrates a key operational pattern: maintaining a single source of truth for resource IDs and URLs. The ACTIVE.md file serves this purpose, and any broken links should be traced back to that document rather than hardcoded values.

Tool Organization: Development and Operational Tools

The ops page now provides quick access to several categories of tools:

  • Booking Engine — Google Apps Script for JADA charter booking (separate script ID from Rady Shell)
  • Rady Shell Project — A new Google Apps Script project for managing the Rady Shell venue (discovered during tool audit)
  • Database Access — Direct link to the jada-crew-dispatch DynamoDB table for operational queries
  • Email Routing — ImprovMX configuration for custom domain email aliases
  • Document Management — DocuSign for waiver and contract signing

The rationale for consolidating these is simple: operational efficiency. Rather than maintaining bookmarks, notes, or documentation scattered across Slack, emails, or local files, every tool needed at a moment's notice is one click away from the ops dashboard.

Payment Processing Design Decision

Why embed the Stripe link rather than building a custom payment form? Several factors:

  • PCI Compliance — Stripe-hosted payment links handle sensitive card data without exposing the ops page to PCI scope
  • Maintenance Burden — No custom form code to update or debug; Stripe manages UI/UX updates
  • Mobile-First — Stripe links are optimized for mobile payment flows, critical for on-the-water operations
  • Fallback Option — Zelle details remain visible for customers who prefer bank transfers, ensuring revenue doesn't depend on a single payment method

The $1,560 price point represents the full deposit amount; the secondary $125 birthday sail link (also integrated) provides an upsell/standalone option.

What's Next

The ops dashboard is now production-ready, but several enhancements are candidates for future iterations:

  • Analytics Dashboard — Integrate a mini-dashboard showing recent payments, pending bookings, and crew availability
  • Webhook Monitoring — Real-time Stripe webhook status and recent payment confirmations
  • Quick Actions — One-click links to common tasks like creating a new waiver, sending an invoice, or updating crew availability