437 lines
18 KiB
TypeScript
437 lines
18 KiB
TypeScript
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 (
|
|
<Card className="relative overflow-hidden group hover:shadow-md transition-all duration-300">
|
|
{/* Background glow effect */}
|
|
<div className={`absolute inset-0 bg-gradient-to-br ${metric.color} opacity-5 group-hover:opacity-10 transition-opacity`} />
|
|
|
|
<CardContent className="p-4 sm:p-6 relative z-10">
|
|
<div className="flex items-start justify-between gap-3 mb-4">
|
|
<div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
|
|
<div className={`w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br ${metric.color} flex items-center justify-center shadow-lg shrink-0`}>
|
|
<IconComponent className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<h3 className="font-bold text-base sm:text-lg truncate">{metric.label}</h3>
|
|
<p className="text-xs sm:text-sm text-muted-foreground">
|
|
{formattedCurrent} / {formattedTarget} {metric.unit}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="text-right shrink-0">
|
|
<span className={`text-2xl sm:text-3xl font-bold bg-gradient-to-r ${metric.color} bg-clip-text text-transparent`}>
|
|
{metric.percentage}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Progress bar */}
|
|
<div className="relative">
|
|
<div className="h-3 sm:h-4 bg-secondary/50 rounded-full overflow-hidden">
|
|
<div
|
|
className={`h-full bg-gradient-to-r ${metric.color} rounded-full transition-all duration-1000 ease-out relative`}
|
|
style={{ width: `${metric.percentage}%` }}
|
|
>
|
|
{/* Shine effect */}
|
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-shimmer" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Milestone markers - hidden on mobile */}
|
|
<div className="hidden sm:flex justify-between mt-2 text-xs text-muted-foreground">
|
|
<span>Start</span>
|
|
<span>25%</span>
|
|
<span>50%</span>
|
|
<span>75%</span>
|
|
<span>Goal</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// ============================================================================
|
|
// Milestone Timeline Component
|
|
// ============================================================================
|
|
|
|
function MilestoneTimeline({ milestones }: { milestones: Milestone[] }) {
|
|
if (milestones.length === 0) {
|
|
return (
|
|
<Card className="bg-muted/50">
|
|
<CardContent className="p-6 sm:p-8 text-center">
|
|
<Rocket className="w-10 h-10 sm:w-12 sm:h-12 mx-auto text-muted-foreground mb-4" />
|
|
<h3 className="font-semibold text-base sm:text-lg mb-2">No Milestones Yet</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Complete tasks tagged with "milestone" or "mission" to see your achievements here!
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
const categoryColors: Record<Milestone["category"], string> = {
|
|
ios: "bg-blue-500",
|
|
financial: "bg-amber-500",
|
|
travel: "bg-purple-500",
|
|
family: "bg-pink-500",
|
|
business: "bg-emerald-500",
|
|
};
|
|
|
|
const categoryLabels: Record<Milestone["category"], string> = {
|
|
ios: "iOS",
|
|
financial: "Financial",
|
|
travel: "Travel",
|
|
family: "Family",
|
|
business: "Business",
|
|
};
|
|
|
|
const IconComponents: Record<string, React.ComponentType<{ className?: string }>> = {
|
|
Smartphone,
|
|
DollarSign,
|
|
Plane,
|
|
Heart,
|
|
Briefcase,
|
|
};
|
|
|
|
return (
|
|
<div className="relative">
|
|
{/* Timeline line - hidden on mobile */}
|
|
<div className="hidden sm:block absolute left-5 top-0 bottom-0 w-0.5 bg-gradient-to-b from-primary via-primary/50 to-transparent" />
|
|
|
|
<div className="space-y-3 sm:space-y-4">
|
|
{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 (
|
|
<div
|
|
key={milestone.id}
|
|
className="relative flex gap-3 sm:gap-4 group animate-fade-in"
|
|
style={{ animationDelay: `${index * 100}ms` }}
|
|
>
|
|
{/* Timeline dot - hidden on mobile */}
|
|
<div className={`hidden sm:flex w-10 h-10 rounded-full ${categoryColors[milestone.category]} items-center justify-center shrink-0 shadow-lg z-10 group-hover:scale-110 transition-transform`}>
|
|
<IconComponent className="w-5 h-5 text-white" />
|
|
</div>
|
|
|
|
{/* Mobile icon */}
|
|
<div className={`sm:hidden w-8 h-8 rounded-full ${categoryColors[milestone.category]} flex items-center justify-center shrink-0`}>
|
|
<IconComponent className="w-4 h-4 text-white" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<Card className="flex-1 group-hover:shadow-md transition-shadow">
|
|
<CardContent className="p-3 sm:p-4">
|
|
<div className="flex flex-wrap items-center gap-2 mb-1">
|
|
<Badge className={`${categoryColors[milestone.category]}/10 text-${categoryColors[milestone.category].replace("bg-", "")} text-xs`}>
|
|
{categoryLabels[milestone.category]}
|
|
</Badge>
|
|
<span className="text-xs text-muted-foreground flex items-center gap-1">
|
|
<CheckCircle2 className="w-3 h-3" />
|
|
{completedDate}
|
|
</span>
|
|
</div>
|
|
<h4 className="font-semibold text-sm sm:text-base">{milestone.title}</h4>
|
|
{milestone.description && (
|
|
<p className="text-xs sm:text-sm text-muted-foreground mt-1 line-clamp-2">
|
|
{milestone.description}
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ============================================================================
|
|
// Next Steps Component
|
|
// ============================================================================
|
|
|
|
function NextSteps({ steps }: { steps: NextStep[] }) {
|
|
if (steps.length === 0) {
|
|
return (
|
|
<Card className="bg-muted/50">
|
|
<CardContent className="p-6 sm:p-8 text-center">
|
|
<CheckCircle2 className="w-10 h-10 sm:w-12 sm:h-12 mx-auto text-green-500 mb-4" />
|
|
<h3 className="font-semibold text-base sm:text-lg mb-2">All Caught Up!</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
No high priority tasks. Time to set new goals!
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2 sm:space-y-3">
|
|
{steps.map((step, index) => (
|
|
<a
|
|
key={step.id}
|
|
href={step.ganttBoardUrl}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="block group animate-fade-in"
|
|
style={{ animationDelay: `${index * 100}ms` }}
|
|
>
|
|
<Card className="group-hover:border-primary/50 group-hover:shadow-md transition-all">
|
|
<CardContent className="p-3 sm:p-4">
|
|
<div className="flex items-start gap-2 sm:gap-3">
|
|
{/* Priority indicator */}
|
|
<div className={`w-1 h-full min-h-[32px] sm:min-h-[40px] rounded-full ${
|
|
step.priority === "urgent" ? "bg-red-500" : "bg-orange-500"
|
|
}`} />
|
|
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex flex-wrap items-center gap-2 mb-1">
|
|
<Badge
|
|
variant={step.priority === "urgent" ? "destructive" : "default"}
|
|
className="text-xs"
|
|
>
|
|
{step.priority === "urgent" ? (
|
|
<><Flame className="w-3 h-3 mr-1" /> Urgent</>
|
|
) : (
|
|
"High Priority"
|
|
)}
|
|
</Badge>
|
|
{step.projectName && (
|
|
<span className="text-xs text-muted-foreground truncate">
|
|
{step.projectName}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<h4 className="font-medium text-sm sm:text-base truncate group-hover:text-primary transition-colors">
|
|
{step.title}
|
|
</h4>
|
|
{step.dueDate && (
|
|
<p className="text-xs text-muted-foreground mt-1 flex items-center gap-1">
|
|
<Clock className="w-3 h-3" />
|
|
Due {new Date(step.dueDate).toLocaleDateString("en-US", {
|
|
month: "short",
|
|
day: "numeric",
|
|
})}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<ExternalLink className="w-4 h-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0 mt-1" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</a>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ============================================================================
|
|
// Main Page Component
|
|
// ============================================================================
|
|
|
|
export default async function MissionPage() {
|
|
const progress = await fetchMissionProgress();
|
|
|
|
return (
|
|
<DashboardLayout>
|
|
<div className="space-y-6 sm:space-y-8">
|
|
{/* Header */}
|
|
<div className="text-center sm:text-left">
|
|
<h1 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight">
|
|
<span className="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 bg-clip-text text-transparent">
|
|
The Mission
|
|
</span>
|
|
</h1>
|
|
<p className="text-muted-foreground mt-2 text-sm sm:text-base md:text-lg">
|
|
Build an iOS empire → retire on our terms → travel with Heidi → 53 is just the start
|
|
</p>
|
|
</div>
|
|
|
|
{/* Mission Statement Card */}
|
|
<Card className="relative overflow-hidden hover:shadow-lg transition-shadow">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10" />
|
|
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-blue-500/20 via-transparent to-transparent" />
|
|
<CardContent className="p-4 sm:p-6 md:p-8 relative z-10">
|
|
<div className="flex flex-col sm:flex-row items-center gap-4 sm:gap-6">
|
|
<div className="w-16 h-16 sm:w-20 sm:h-20 rounded-2xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shadow-xl shrink-0">
|
|
<Rocket className="w-8 h-8 sm:w-10 sm:h-10 text-white" />
|
|
</div>
|
|
<div className="text-center sm:text-left">
|
|
<h2 className="text-lg sm:text-xl md:text-2xl font-bold mb-2">Why We Do What We Do</h2>
|
|
<p className="text-muted-foreground text-sm sm:text-base md:text-lg leading-relaxed max-w-2xl">
|
|
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.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Progress Dashboard */}
|
|
<section>
|
|
<div className="flex items-center gap-3 mb-4 sm:mb-6">
|
|
<div className="w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-gradient-to-br from-emerald-500 to-teal-600 flex items-center justify-center shrink-0">
|
|
<TrendingUp className="w-4 h-4 sm:w-5 sm:h-5 text-white" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl sm:text-2xl font-bold">Progress Dashboard</h2>
|
|
<p className="text-xs sm:text-sm text-muted-foreground">
|
|
Tracking the journey to freedom
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-3 sm:gap-4">
|
|
<ProgressBar metric={progress.retirement} />
|
|
<ProgressBar metric={progress.iosPortfolio} />
|
|
<ProgressBar metric={progress.sideHustleRevenue} />
|
|
<ProgressBar metric={progress.travelFund} />
|
|
</div>
|
|
</section>
|
|
|
|
{/* Two Column Layout: Milestones & Next Steps */}
|
|
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6 sm:gap-8">
|
|
{/* Milestones Timeline */}
|
|
<section>
|
|
<div className="flex items-center gap-3 mb-4 sm:mb-6">
|
|
<div className="w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center shrink-0">
|
|
<CheckCircle2 className="w-4 h-4 sm:w-5 sm:h-5 text-white" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h2 className="text-xl sm:text-2xl font-bold">Milestones Achieved</h2>
|
|
<p className="text-xs sm:text-sm text-muted-foreground">
|
|
{progress.milestones.length} completed
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<MilestoneTimeline milestones={progress.milestones} />
|
|
</section>
|
|
|
|
{/* Next Steps */}
|
|
<section>
|
|
<div className="flex items-center gap-3 mb-4 sm:mb-6">
|
|
<div className="w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-gradient-to-br from-red-500 to-pink-600 flex items-center justify-center shrink-0">
|
|
<Flame className="w-4 h-4 sm:w-5 sm:h-5 text-white" />
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<h2 className="text-xl sm:text-2xl font-bold">Next Steps</h2>
|
|
<p className="text-xs sm:text-sm text-muted-foreground">
|
|
High priority mission tasks
|
|
</p>
|
|
</div>
|
|
<Button variant="outline" size="sm" asChild className="shrink-0">
|
|
<a href={siteUrls.ganttBoard} target="_blank" rel="noopener noreferrer">
|
|
View All <ArrowRight className="w-4 h-4 ml-1" />
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
<NextSteps steps={progress.nextSteps} />
|
|
</section>
|
|
</div>
|
|
|
|
{/* Core Values */}
|
|
<section>
|
|
<h2 className="text-lg sm:text-xl font-bold mb-4">Core Values</h2>
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
|
|
{[
|
|
{ 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) => (
|
|
<Card key={value.name} className="group hover:shadow-md hover:scale-105 transition-all">
|
|
<CardContent className="p-3 sm:p-4 text-center">
|
|
<div className={`w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-gradient-to-br ${value.color} flex items-center justify-center mx-auto mb-2 sm:mb-3 shadow-lg group-hover:shadow-xl transition-shadow`}>
|
|
<value.icon className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
|
|
</div>
|
|
<h3 className="font-bold text-sm sm:text-base">{value.name}</h3>
|
|
<p className="text-xs text-muted-foreground">{value.desc}</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Quote */}
|
|
<Card className="bg-gradient-to-r from-slate-800 to-slate-900 border-0 relative overflow-hidden">
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-blue-500/10 via-transparent to-transparent" />
|
|
<CardContent className="p-6 sm:p-8 text-center relative z-10">
|
|
<p className="text-lg sm:text-xl md:text-2xl italic text-slate-300 font-light">
|
|
“53 is just the start of the best chapter.”
|
|
</p>
|
|
<p className="text-xs sm:text-sm text-slate-500 mt-3">— The Mission</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</DashboardLayout>
|
|
);
|
|
}
|