import { DashboardLayout } from "@/components/layout/sidebar"; import { PageHeader } from "@/components/layout/page-header"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Target, TrendingUp, Heart, Plane, DollarSign, Briefcase, Smartphone, Rocket, CheckCircle2, ArrowRight, Flame, Clock, ExternalLink, } from "lucide-react"; import { fetchMissionProgress, ProgressMetric, Milestone, NextStep } from "@/lib/data/mission"; import { siteUrls } from "@/lib/config/sites"; // Revalidate every 5 minutes export const revalidate = 300; // ============================================================================ // Progress Bar Component // ============================================================================ function ProgressBar({ metric }: { metric: ProgressMetric }) { const IconComponent = { Target, Smartphone, DollarSign, Plane, Briefcase, Heart, TrendingUp, }[metric.icon] || Target; const formattedCurrent = metric.unit === "MRR" || metric.unit === "saved" ? new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0, }).format(metric.current) : metric.current; const formattedTarget = metric.unit === "MRR" || metric.unit === "saved" ? new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0, }).format(metric.target) : metric.target; return ( {/* Background glow effect */}

{metric.label}

{formattedCurrent} / {formattedTarget} {metric.unit}

{metric.percentage}%
{/* Progress bar */}
{/* Shine effect */}
{/* Milestone markers - hidden on mobile */}
Start 25% 50% 75% Goal
); } // ============================================================================ // Milestone Timeline Component // ============================================================================ function MilestoneTimeline({ milestones }: { milestones: Milestone[] }) { if (milestones.length === 0) { return (

No Milestones Yet

Complete tasks tagged with "milestone" or "mission" to see your achievements here!

); } const categoryColors: Record = { ios: "bg-blue-500", financial: "bg-amber-500", travel: "bg-purple-500", family: "bg-pink-500", business: "bg-emerald-500", }; const categoryLabels: Record = { ios: "iOS", financial: "Financial", travel: "Travel", family: "Family", business: "Business", }; const IconComponents: Record> = { Smartphone, DollarSign, Plane, Heart, Briefcase, }; return (
{/* Timeline line - hidden on mobile */}
{milestones.map((milestone, index) => { const IconComponent = IconComponents[milestone.icon] || CheckCircle2; const completedDate = new Date(milestone.completedAt).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", }); return (
{/* Timeline dot - hidden on mobile */}
{/* Mobile icon */}
{/* Content */}
{categoryLabels[milestone.category]} {completedDate}

{milestone.title}

{milestone.description && (

{milestone.description}

)}
); })}
); } // ============================================================================ // Next Steps Component // ============================================================================ function NextSteps({ steps }: { steps: NextStep[] }) { if (steps.length === 0) { return (

All Caught Up!

No high priority tasks. Time to set new goals!

); } return (
{steps.map((step, index) => ( ); } // ============================================================================ // Main Page Component // ============================================================================ export default async function MissionPage() { const progress = await fetchMissionProgress(); return (
{/* Header */}

The Mission

Build an iOS empire → retire on our terms → travel with Heidi → 53 is just the start

{/* Mission Statement Card */}

Why We Do What We Do

Build a sustainable side hustle through iOS apps to achieve financial independence, travel with Heidi, take care of family, and retire on my own terms — all while staying healthy and having fun.

{/* Progress Dashboard */}

Progress Dashboard

Tracking the journey to freedom

{/* Two Column Layout: Milestones & Next Steps */}
{/* Milestones Timeline */}

Milestones Achieved

{progress.milestones.length} completed

{/* Next Steps */}

Next Steps

High priority mission tasks

{/* Core Values */}

Core Values

{[ { name: "Family", icon: Heart, color: "from-pink-500 to-rose-500", desc: "Priority #1" }, { name: "Health", icon: Target, color: "from-green-500 to-emerald-500", desc: "Stay strong" }, { name: "Fun", icon: Rocket, color: "from-blue-500 to-cyan-500", desc: "Enjoy the ride" }, { name: "Adventure", icon: Plane, color: "from-purple-500 to-violet-500", desc: "Explore more" }, ].map((value) => (

{value.name}

{value.desc}

))}
{/* Quote */}

“53 is just the start of the best chapter.”

— The Mission

); }