224 lines
7.7 KiB
TypeScript
224 lines
7.7 KiB
TypeScript
import { DashboardLayout } from "@/components/layout/sidebar";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Target, TrendingUp, Heart, Plane, DollarSign, Briefcase } from "lucide-react";
|
|
|
|
const missionStatement = {
|
|
title: "The Mission",
|
|
description: "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.",
|
|
};
|
|
|
|
const coreValues = [
|
|
{ name: "Family", icon: Heart, description: "Priority #1 — take care of loved ones" },
|
|
{ name: "Health", icon: Target, description: "Stay fit, strong, and mobile" },
|
|
{ name: "Fun", icon: TrendingUp, description: "Enjoy the journey, not just the destination" },
|
|
{ name: "Adventure", icon: Plane, description: "Travel and experience new things" },
|
|
];
|
|
|
|
const goals = [
|
|
{
|
|
id: 1,
|
|
title: "Double Retirement Savings",
|
|
current: 50,
|
|
target: 100,
|
|
unit: "%",
|
|
category: "financial",
|
|
deadline: "Ongoing",
|
|
status: "in-progress",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Build iOS App Empire",
|
|
current: 6,
|
|
target: 20,
|
|
unit: "apps",
|
|
category: "business",
|
|
deadline: "2027",
|
|
status: "in-progress",
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Replace Contract Income",
|
|
current: 5,
|
|
target: 100,
|
|
unit: "%",
|
|
category: "financial",
|
|
deadline: "2027",
|
|
status: "in-progress",
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Travel with Heidi",
|
|
current: 0,
|
|
target: 10,
|
|
unit: "countries",
|
|
category: "adventure",
|
|
deadline: "2028",
|
|
status: "not-started",
|
|
},
|
|
{
|
|
id: 5,
|
|
title: "Family Trip with Mom",
|
|
current: 0,
|
|
target: 1,
|
|
unit: "trip",
|
|
category: "family",
|
|
deadline: "2026",
|
|
status: "planning",
|
|
},
|
|
{
|
|
id: 6,
|
|
title: "Milestone Birthday Trip",
|
|
current: 0,
|
|
target: 1,
|
|
unit: "trip",
|
|
category: "family",
|
|
deadline: "2026",
|
|
status: "planning",
|
|
},
|
|
];
|
|
|
|
const kpis = [
|
|
{ label: "Apps Built", value: "6", change: "+6 since Dec 2024", icon: Briefcase },
|
|
{ label: "Apps Live", value: "2", change: "2 pending LLC", icon: TrendingUp },
|
|
{ label: "Contract Months Left", value: "13", change: "Renews Mar 2026", icon: DollarSign },
|
|
{ label: "Morning Streak", value: "7", change: "days consistent", icon: Target },
|
|
];
|
|
|
|
const categoryColors: Record<string, string> = {
|
|
financial: "bg-green-500/10 text-green-500",
|
|
business: "bg-blue-500/10 text-blue-500",
|
|
adventure: "bg-purple-500/10 text-purple-500",
|
|
family: "bg-pink-500/10 text-pink-500",
|
|
};
|
|
|
|
const statusColors: Record<string, string> = {
|
|
"in-progress": "bg-yellow-500/10 text-yellow-500",
|
|
"not-started": "bg-gray-500/10 text-gray-500",
|
|
planning: "bg-blue-500/10 text-blue-500",
|
|
completed: "bg-green-500/10 text-green-500",
|
|
};
|
|
|
|
export default function MissionPage() {
|
|
return (
|
|
<DashboardLayout>
|
|
<div className="space-y-8">
|
|
{/* Header */}
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">The Mission</h1>
|
|
<p className="text-muted-foreground mt-1">
|
|
Your goals, values, and the path to freedom.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Mission Statement */}
|
|
<Card className="bg-gradient-to-br from-blue-500/5 via-purple-500/5 to-pink-500/5 border-blue-500/20">
|
|
<CardContent className="p-6">
|
|
<h2 className="text-xl font-bold mb-3">{missionStatement.title}</h2>
|
|
<p className="text-lg leading-relaxed text-muted-foreground">
|
|
{missionStatement.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* KPIs */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{kpis.map((kpi) => {
|
|
const Icon = kpi.icon;
|
|
return (
|
|
<Card key={kpi.label}>
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-sm font-medium text-muted-foreground">
|
|
{kpi.label}
|
|
</CardTitle>
|
|
<Icon className="w-4 h-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{kpi.value}</div>
|
|
<p className="text-xs text-muted-foreground mt-1">{kpi.change}</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Core Values */}
|
|
<div>
|
|
<h2 className="text-xl font-bold mb-4">Core Values</h2>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{coreValues.map((value) => {
|
|
const Icon = value.icon;
|
|
return (
|
|
<Card key={value.name}>
|
|
<CardContent className="p-4 text-center">
|
|
<div className="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-3">
|
|
<Icon className="w-6 h-6 text-primary" />
|
|
</div>
|
|
<h3 className="font-semibold">{value.name}</h3>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
{value.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Goals */}
|
|
<div>
|
|
<h2 className="text-xl font-bold mb-4">Goals</h2>
|
|
<div className="space-y-4">
|
|
{goals.map((goal) => (
|
|
<Card key={goal.id}>
|
|
<CardContent className="p-4">
|
|
<div className="flex flex-col sm:flex-row sm:items-center gap-4">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<h3 className="font-semibold">{goal.title}</h3>
|
|
<Badge className={categoryColors[goal.category]}>
|
|
{goal.category}
|
|
</Badge>
|
|
<Badge className={statusColors[goal.status]}>
|
|
{goal.status}
|
|
</Badge>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
Deadline: {goal.deadline}
|
|
</p>
|
|
</div>
|
|
<div className="sm:w-48">
|
|
<div className="flex justify-between text-sm mb-1">
|
|
<span className="text-muted-foreground">Progress</span>
|
|
<span className="font-medium">
|
|
{goal.current}/{goal.target} {goal.unit}
|
|
</span>
|
|
</div>
|
|
<div className="h-2 bg-secondary rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all"
|
|
style={{ width: `${(goal.current / goal.target) * 100}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quote */}
|
|
<Card className="bg-gradient-to-r from-slate-800 to-slate-900 border-0">
|
|
<CardContent className="p-6 text-center">
|
|
<p className="text-lg italic text-slate-300">
|
|
"53 is just the start of the best chapter."
|
|
</p>
|
|
<p className="text-sm text-slate-500 mt-2">— The Mission</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</DashboardLayout>
|
|
);
|
|
}
|