feat: implement dashboard layout with sidebar navigation, finance page, and supporting UI architecture
This commit is contained in:
Poyraz Avsever
@@ -1,17 +1,165 @@
|
||||
"use client";
|
||||
|
||||
import { Plus, Brain, Target, Compass, Award, MoreHorizontal, CircleDashed, CheckCircle2 } from "lucide-react";
|
||||
|
||||
// Mock Data
|
||||
const goals = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Launch SaaS Product MVP",
|
||||
category: "Career & Business",
|
||||
progress: 75,
|
||||
dueDate: "Q3 2026",
|
||||
status: "On Track",
|
||||
color: "#6C5BB0", // Primary
|
||||
milestones: [
|
||||
{ name: "Finalize Designs", done: true },
|
||||
{ name: "Backend Architecture", done: true },
|
||||
{ name: "Frontend Development", done: true },
|
||||
{ name: "Beta Testing", done: false },
|
||||
{ name: "Public Launch", done: false },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Run a Half-Marathon",
|
||||
category: "Health & Fitness",
|
||||
progress: 40,
|
||||
dueDate: "Oct 12, 2026",
|
||||
status: "Behind",
|
||||
color: "#10b981", // Emerald
|
||||
milestones: [
|
||||
{ name: "Run 5K Without Stopping", done: true },
|
||||
{ name: "Run 10K", done: true },
|
||||
{ name: "Maintain 15K weekly volume", done: false },
|
||||
{ name: "Complete 18K long run", done: false },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Read 24 Books",
|
||||
category: "Personal Growth",
|
||||
progress: 50,
|
||||
dueDate: "Dec 31, 2026",
|
||||
status: "Ahead",
|
||||
color: "#f97316", // Orange
|
||||
milestones: [
|
||||
{ name: "Read 6 Books (Q1)", done: true },
|
||||
{ name: "Read 12 Books (Q2)", done: true },
|
||||
{ name: "Read 18 Books (Q3)", done: false },
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export default function GoalsPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight text-foreground">Hedefler</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Kısa ve uzun vadeli hedeflerinizi belirleyin ve ilerlemenizi izleyin.
|
||||
</p>
|
||||
<div className="mx-auto max-w-7xl animate-in fade-in slide-in-from-bottom-4 duration-500 h-full flex flex-col text-foreground font-sans space-y-6">
|
||||
|
||||
{/* Top Header */}
|
||||
<div className="flex items-center justify-between pb-4 border-b border-white/5 mt-4">
|
||||
<h1 className="text-lg font-medium text-muted-foreground">
|
||||
<span className="text-foreground">Personal</span> / Strategic Goals
|
||||
</h1>
|
||||
<div className="flex items-center gap-3">
|
||||
<button className="bg-primary hover:bg-primary/90 text-primary-foreground border border-primary/20 px-4 py-1.5 rounded-sm text-xs font-semibold flex items-center gap-2 transition-colors">
|
||||
<Plus className="h-4 w-4" />
|
||||
NEW GOAL
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-white/5 bg-white/5 p-8 text-center text-muted-foreground backdrop-blur-sm">
|
||||
Hedef yönetim modülü yakında eklenecek.
|
||||
|
||||
{/* AI Goal Strategist */}
|
||||
<div className="rounded-sm border border-primary/20 bg-primary/5 p-6 flex flex-col md:flex-row items-center justify-between gap-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="p-3 bg-primary/10 rounded-sm shrink-0">
|
||||
<Brain className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-primary mb-1 flex items-center gap-2">
|
||||
AI Goal Strategist
|
||||
</h3>
|
||||
<p className="text-xs text-foreground/80 leading-relaxed max-w-3xl">
|
||||
You are falling behind on your <strong>Half-Marathon</strong> goal. Your running habit completion has dropped to 30% this month. AI suggests breaking the next milestone ("Maintain 15K weekly volume") into smaller, manageable 3K chunks to rebuild momentum.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button className="bg-primary hover:bg-primary/90 text-primary-foreground px-4 py-2 rounded-sm text-xs font-semibold transition-colors shrink-0 shadow-lg shadow-primary/20">
|
||||
Refactor Milestones
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Goals List */}
|
||||
<div className="space-y-6 pb-6">
|
||||
{goals.map((goal) => (
|
||||
<div key={goal.id} className="rounded-sm border border-white/5 bg-[#0A0710] p-6 flex flex-col lg:flex-row gap-8 relative overflow-hidden group">
|
||||
|
||||
{/* Left Side: Overview & Progress */}
|
||||
<div className="flex-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h2 className="text-xl font-bold text-foreground">{goal.title}</h2>
|
||||
<span className={`text-[10px] uppercase font-bold px-2 py-0.5 rounded-sm border ${
|
||||
goal.status === 'Ahead' ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20' :
|
||||
goal.status === 'Behind' ? 'bg-orange-500/10 text-orange-400 border-orange-500/20' :
|
||||
'bg-blue-500/10 text-blue-400 border-blue-500/20'
|
||||
}`}>
|
||||
{goal.status}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-xs text-muted-foreground mb-6">
|
||||
<span className="flex items-center gap-1.5"><Compass className="h-3.5 w-3.5" /> {goal.category}</span>
|
||||
<span className="flex items-center gap-1.5"><Target className="h-3.5 w-3.5" /> Due: {goal.dueDate}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Big Progress Bar */}
|
||||
<div>
|
||||
<div className="flex justify-between items-end mb-2">
|
||||
<span className="text-sm font-semibold">Overall Progress</span>
|
||||
<span className="text-2xl font-bold" style={{ color: goal.color }}>{goal.progress}%</span>
|
||||
</div>
|
||||
<div className="h-3 w-full bg-white/5 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full rounded-full transition-all duration-1000 relative"
|
||||
style={{ width: `${goal.progress}%`, backgroundColor: goal.color }}
|
||||
>
|
||||
{/* Inner highlight for 3D effect */}
|
||||
<div className="absolute top-0 left-0 right-0 h-1/2 bg-white/20"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Side: Milestones */}
|
||||
<div className="w-full lg:w-96 rounded-sm bg-[#150F1D] border border-white/5 p-4 flex flex-col">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Milestones</h3>
|
||||
<button className="text-muted-foreground hover:text-foreground transition-colors"><MoreHorizontal className="h-4 w-4" /></button>
|
||||
</div>
|
||||
<div className="space-y-3 flex-1 overflow-y-auto tiny-scrollbar">
|
||||
{goal.milestones.map((ms, idx) => (
|
||||
<div key={idx} className="flex items-start gap-3">
|
||||
{ms.done ? (
|
||||
<CheckCircle2 className="h-4 w-4 shrink-0 mt-0.5" style={{ color: goal.color }} />
|
||||
) : (
|
||||
<CircleDashed className="h-4 w-4 text-muted-foreground shrink-0 mt-0.5" />
|
||||
)}
|
||||
<span className={`text-sm ${ms.done ? 'text-muted-foreground line-through' : 'text-foreground font-medium'}`}>
|
||||
{ms.name}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button className="mt-4 w-full border border-dashed border-white/10 hover:border-white/30 text-muted-foreground hover:text-foreground py-2 rounded-sm text-xs font-semibold transition-colors flex items-center justify-center gap-2">
|
||||
<Plus className="h-3 w-3" /> Add Milestone
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user