Mission Control

Central hub for activity, tasks, goals, and tools. Built for TopDogLabs to track the journey toward financial independence through iOS app development.

Live URL: https://mission-control-rho-pink.vercel.app

Features

Dashboard

• Real-time KPI cards with live data from Supabase
• Mission statement banner
• Activity statistics
• Upcoming events
• Mission progress tracking

Tasks Overview

• Status breakdown (Open, In Progress, Review, Done)
• High priority and overdue task counts
• Recently updated and completed tasks
• Quick actions to Gantt Board

Projects

• Active sprint tracking (global sprints from gantt-board)
• Sprint status/date visibility
• Project health cards with color-coded status
• Per-project task statistics

Calendar

• Google Calendar integration
• Event listing with time-based grouping
• Calendar selector
• Today's summary

Documents

• Markdown document management
• Folder organization
• Tag-based filtering
• Grid and list view modes
• Preview with syntax highlighting

Tools

• Calculator with full keyboard support
• Timer with start/stop/reset
• Password generator
• Quick links manager

Mission

• Progress dashboard for key metrics:
  • Freedom Progress (completed tasks)
  • iOS Portfolio (app count)
  • Side Hustle Revenue
  • Travel Fund
• Milestones timeline
• Next steps from high priority tasks
• Core values display

Tech Stack

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS 4
• UI Components: shadcn/ui + Radix UI
• State: Zustand (client), Server Components (server)
• Database: Supabase
• Deployment: Vercel

Project Structure

mission-control/
├── app/                    # Next.js app router
│   ├── (routes)/          # Page components
│   ├── api/               # API routes
│   ├── error.tsx          # Global error boundary
│   ├── not-found.tsx      # 404 page
│   ├── loading.tsx        # Global loading state
│   ├── layout.tsx         # Root layout
│   ├── metadata.ts        # SEO metadata
│   └── sitemap.ts         # XML sitemap
├── components/
│   ├── ui/                # shadcn/ui components
│   ├── layout/            # Layout components (sidebar, etc)
│   ├── activity/          # Activity feed components
│   └── calendar/          # Calendar components
├── hooks/                 # Custom React hooks
├── lib/
│   ├── data/              # Data fetching functions
│   ├── supabase/          # Supabase client utilities
│   └── utils.ts           # Utility functions
├── types/                 # TypeScript types
└── public/                # Static assets

Key Improvements (Phase 9)

Performance

• Added loading states for all pages
• Implemented optimized skeleton screens
• Added loading.tsx for each route
• Configured optimizePackageImports for faster builds
• Added caching headers for static assets

Error Handling

• Global error boundary with error.tsx
• Custom SupabaseError class with error codes
• Safe wrapper for Supabase operations
• Retry mechanisms for failed requests
• User-friendly error messages

Accessibility

• Skip link for keyboard navigation
• ARIA labels on interactive elements
• aria-current="page" for active navigation
• Focus-visible styles for keyboard users
• Reduced motion support
• Semantic HTML structure

SEO & PWA

• Comprehensive metadata configuration
• Open Graph and Twitter card support
• robots.txt for crawlers
• sitemap.xml generation
• manifest.json for PWA support
• Security headers (X-Frame-Options, etc)

Developer Experience

• TypeScript strict mode
• Custom hooks for common patterns
• Utility hooks (useDebounce, useLocalStorage, etc)
• Proper error handling throughout
• Build-time type checking

Environment Variables

# Required
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
GANTT_API_BASE_URL=             # ex: http://gantt-board:3000/api (Docker network)
GANTT_API_REVALIDATE_SECONDS=15 # Optional cache window for gantt API reads

# Optional
NEXT_PUBLIC_GOOGLE_CLIENT_ID=  # For Calendar integration
NEXT_PUBLIC_MISSION_CONTROL_URL=
NEXT_PUBLIC_GANTT_BOARD_URL=
NEXT_PUBLIC_BLOG_BACKUP_URL=
NEXT_PUBLIC_GITEA_URL=
NEXT_PUBLIC_GITHUB_URL=
NEXT_PUBLIC_VERCEL_URL=
NEXT_PUBLIC_SUPABASE_SITE_URL=
NEXT_PUBLIC_GOOGLE_URL=
NEXT_PUBLIC_GOOGLE_CALENDAR_URL=
NEXT_PUBLIC_GOOGLE_CALENDAR_SETTINGS_URL=
NEXT_PUBLIC_GANTT_API_BASE_URL= # Client-side override if needed
GANTT_API_BEARER_TOKEN=         # Optional server-to-server auth header
GANTT_API_COOKIE=               # Optional server-to-server cookie header

Website URLs are centralized in lib/config/sites.ts and can be overridden via the optional variables above.

Getting Started

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

CLI Reuse (API Passthrough)

Mission Control reuses the existing task/project CLI from the sibling gantt-board project instead of duplicating command logic.

• scripts/task.sh delegates to ../gantt-board/scripts/task.sh
• scripts/project.sh delegates to ../gantt-board/scripts/project.sh
• scripts/update-task-status.js delegates to gantt-board task.sh update

Environment variables:

• GANTT_BOARD_DIR (optional): override path to the gantt-board repo root.
• API_URL (optional): forwarded to reused CLI so all business logic stays in API endpoints.

Mission Control web data for tasks/projects/sprints is also read from gantt-board API via GANTT_API_BASE_URL, so both CLI and web use the same backend contract.

Data model note:

• Sprints are global cycles and are no longer linked to projects.
• Sprint state is derived from start_date/end_date at request time (no manual activate/deactivate step).
• Tasks remain project-scoped (tasks.project_id in gantt-board schema).
• The schema migration that removes sprints.project_id lives in sibling repo: ../gantt-board/supabase/remove_sprint_project_id.sql.
• The schema migration that removes sprints.status lives in sibling repo: ../gantt-board/supabase/remove_sprint_status.sql.
• gantt-board CLI/API sprint "current" and "active" behavior is date-based (current execution time), not persisted status-based.

For separate Docker images, set GANTT_API_BASE_URL to the Docker service DNS name (example: http://gantt-board:3000/api) on the same Docker network. If gantt-board API auth is required, provide either GANTT_API_COOKIE (session cookie) or GANTT_API_BEARER_TOKEN as server-to-server auth context.

Run passthrough contract test:

npm run test:cli-contract

Deployment

The app deploys automatically to Vercel on push to main:

npm run build && vercel --prod

Related Projects

• Gantt Board: https://gantt-board.vercel.app (Task management)
• Blog Backup: https://blog-backup-two.vercel.app (Daily digest)

License

Private - TopDogLabs