poyrazavsever/neta
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: scaffold initial dashboard layout and base pages for all modules

Browse Source
This commit is contained in:
Poyraz Avsever
2026-05-08 17:29:02 +03:00
parent 8f63998d34
commit 1c9eca814e
12 changed files with 3129 additions and 1147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(dashboard)/goals/page.tsx
+263 -134
View File
@@ -1,165 +1,294 @@
"use client";
import { Plus, Brain, Target, Compass, Award, MoreHorizontal, CircleDashed, CheckCircle2 } from "lucide-react";
import { useState } from "react";
import {
Plus, Search, Target, Flag, TrendingUp, Zap,
CheckCircle2, Clock, Brain, MoreHorizontal, X,
ChevronRight, ArrowRight, BarChart3, Star,
Shield, Globe, Briefcase, Award
} from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
// 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
{
id: 1,
title: "100k Monthly Recurring Revenue",
category: "Financial",
progress: 42,
deadline: "Dec 2026",
status: "Active",
priority: "Critical",
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 },
]
{ name: "Reach 50k MRR", status: "Done", date: "Aug 2026" },
{ name: "Scale Sales Team", status: "In Progress", date: "Sep 2026" },
{ name: "Launch Enterprise Tier", status: "Upcoming", date: "Nov 2026" },
],
aiInsight: "Currently 12% ahead of target. Strategic focus should remain on enterprise lead generation."
},
{
id: 2,
title: "Run a Half-Marathon",
category: "Health & Fitness",
progress: 40,
dueDate: "Oct 12, 2026",
status: "Behind",
color: "#10b981", // Emerald
{
id: 2,
title: "Launch Cognis AI Mobile App",
category: "Product",
progress: 85,
deadline: "May 25, 2026",
status: "Active",
priority: "High",
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 },
]
{ name: "Beta Testing", status: "Done", date: "Apr 15" },
{ name: "App Store Review", status: "In Progress", date: "May 10" },
{ name: "Global Launch", status: "Upcoming", date: "May 25" },
],
aiInsight: "85% complete. Recommendation: Finalize push notification logic to ensure day-1 retention."
},
{
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 },
]
}
{ id: 3, title: "Achieve Peak Physical Fitness", category: "Personal", progress: 60, deadline: "Ongoing", status: "Active", priority: "Medium", milestones: [], aiInsight: "" },
{ id: 4, title: "Acquire 500 Enterprise Leads", category: "Marketing", progress: 25, deadline: "Jun 2026", status: "Delayed", priority: "High", milestones: [], aiInsight: "" },
];
export default function GoalsPage() {
const [selectedGoal, setSelectedGoal] = useState<any>(null);
return (
<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">
<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 pb-12 relative">
{/* 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 justify-between pb-4 border-b border-white/5 mt-4 shrink-0">
<div className="flex items-center gap-4">
<h1 className="text-lg font-medium text-muted-foreground">
<span className="text-foreground">Vision</span> / Strategic Goals
</h1>
<div className="h-4 w-px bg-white/10" />
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-primary bg-primary/5 px-3 py-1 rounded-sm border border-primary/10">
<Target className="h-3 w-3" /> 4 ACTIVE OBJECTIVES
</div>
</div>
<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">
<div className="bg-[#150F1D] border border-white/5 rounded-sm px-3 py-1.5 flex items-center gap-2">
<Search className="h-4 w-4 text-muted-foreground" />
<input
type="text"
placeholder="Search goals..."
className="bg-transparent border-none outline-none text-xs w-48 placeholder:text-muted-foreground/50 text-foreground"
/>
</div>
<button className="bg-primary hover:bg-primary/90 text-primary-foreground border border-primary/20 px-5 py-2 rounded-sm text-xs font-black tracking-widest flex items-center gap-2 transition-all shadow-lg shadow-primary/30 active:scale-95">
<Plus className="h-4 w-4" />
NEW GOAL
</button>
</div>
</div>
{/* 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>
{/* Goal Matrix Categories */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 shrink-0">
<GoalCategoryCard label="Critical" count={1} color="text-rose-500" icon={Zap} />
<GoalCategoryCard label="High Priority" count={2} color="text-orange-500" icon={Star} />
<GoalCategoryCard label="Medium" count={1} color="text-blue-500" icon={TrendingUp} />
<GoalCategoryCard label="Completed" count={12} color="text-emerald-500" icon={CheckCircle2} />
</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>
{/* Main Goals Grid */}
<div className="flex-1 overflow-y-auto tiny-scrollbar pr-1">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 pb-6">
{goals.map((goal) => (
<motion.div
key={goal.id}
whileHover={{ y: -4 }}
onClick={() => setSelectedGoal(goal)}
className="bg-[#0A0710] border border-white/5 rounded-sm p-8 flex flex-col gap-8 relative group overflow-hidden shadow-2xl cursor-pointer hover:border-primary/30 transition-all"
>
<div className={`absolute top-0 right-0 w-32 h-32 translate-x-16 -translate-y-16 opacity-10 blur-3xl rounded-full ${goal.priority === 'Critical' ? 'bg-rose-500' : 'bg-primary'}`} />
<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 className="flex justify-between items-start relative z-10">
<div className="space-y-2">
<div className="flex items-center gap-3">
<span className={`text-[10px] font-black uppercase tracking-widest px-2 py-0.5 rounded-sm border ${
goal.priority === 'Critical' ? 'text-rose-400 border-rose-500/20 bg-rose-500/5' :
goal.priority === 'High' ? 'text-orange-400 border-orange-500/20 bg-orange-500/5' : 'text-blue-400 border-blue-500/20 bg-blue-500/5'
}`}>
{goal.priority}
</span>
<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">{goal.category}</span>
</div>
<h3 className="text-2xl font-black tracking-tighter group-hover:text-primary transition-colors">{goal.title}</h3>
</div>
<button className="p-2 hover:bg-white/5 rounded-sm transition-colors text-muted-foreground"><MoreHorizontal className="h-5 w-5" /></button>
</div>
</div>
))}
<div className="space-y-4 relative z-10">
<div className="flex justify-between items-end">
<div className="space-y-1">
<div className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">Strategic Progress</div>
<div className="text-3xl font-black text-foreground">{goal.progress}%</div>
</div>
<div className="text-right">
<div className="text-[10px] font-black uppercase tracking-widest text-muted-foreground mb-1">Target Date</div>
<div className="text-xs font-bold text-foreground">{goal.deadline}</div>
</div>
</div>
<div className="h-1.5 w-full bg-white/5 rounded-full overflow-hidden">
<motion.div
initial={{ width: 0 }}
animate={{ width: `${goal.progress}%` }}
transition={{ duration: 1, ease: "easeOut" }}
className={`h-full rounded-full ${goal.progress === 100 ? 'bg-emerald-500' : goal.status === 'Delayed' ? 'bg-rose-500' : 'bg-primary shadow-[0_0_15px_rgba(108,91,176,0.5)]'}`}
/>
</div>
</div>
<div className="pt-6 border-t border-white/5 flex items-center justify-between relative z-10">
<div className="flex items-center gap-4">
<div className="flex -space-x-2">
{[1, 2, 3].map(i => <div key={i} className="h-6 w-6 rounded-full border border-[#0A0710] bg-[#1F172B] flex items-center justify-center text-[8px] font-bold">U{i}</div>)}
</div>
<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">{goal.milestones?.length || 0} Milestones</span>
</div>
<button className="text-[10px] font-black uppercase tracking-widest text-primary flex items-center gap-2 group/btn">
VIEW STRATEGY <ArrowRight className="h-3 w-3 group-hover/btn:translate-x-1 transition-transform" />
</button>
</div>
</motion.div>
))}
</div>
</div>
{/* Goal Detail Sheet */}
<AnimatePresence>
{selectedGoal && (
<>
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} onClick={() => setSelectedGoal(null)} className="fixed inset-0 bg-black/80 backdrop-blur-md z-[100]" />
<motion.div initial={{ x: "100%" }} animate={{ x: 0 }} exit={{ x: "100%" }} transition={{ type: "spring", damping: 25, stiffness: 200 }} className="fixed top-0 right-0 h-full w-full max-w-2xl bg-[#0A0710] border-l border-white/5 z-[101] shadow-2xl flex flex-col">
<div className="p-10 border-b border-white/5 flex items-center justify-between bg-primary/5">
<div className="space-y-2">
<div className="flex items-center gap-3">
<span className={`text-[10px] font-black uppercase tracking-widest px-2 py-1 rounded-sm border ${
selectedGoal.priority === 'Critical' ? 'text-rose-400 border-rose-500/20' : 'text-primary border-primary/20'
}`}>
{selectedGoal.priority} Priority
</span>
<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">Category: {selectedGoal.category}</span>
</div>
<h2 className="text-3xl font-black tracking-tighter text-foreground">{selectedGoal.title}</h2>
</div>
<button onClick={() => setSelectedGoal(null)} className="p-3 hover:bg-white/10 rounded-sm text-muted-foreground transition-colors"><X className="h-6 w-6" /></button>
</div>
<div className="flex-1 overflow-y-auto p-10 space-y-12 tiny-scrollbar">
{/* Progress Visual */}
<div className="grid grid-cols-3 gap-8">
<div className="col-span-2 bg-[#150F1D] border border-white/5 rounded-sm p-8 flex flex-col justify-center">
<div className="flex justify-between items-end mb-4">
<div className="text-[10px] font-black uppercase tracking-widest text-primary">Strategic Completion</div>
<div className="text-4xl font-black">{selectedGoal.progress}%</div>
</div>
<div className="h-2 w-full bg-white/5 rounded-full overflow-hidden">
<div className="h-full bg-primary" style={{ width: `${selectedGoal.progress}%` }} />
</div>
</div>
<div className="bg-white/5 border border-white/5 rounded-sm p-6 flex flex-col items-center justify-center text-center">
<Clock className="h-6 w-6 text-muted-foreground mb-2" />
<div className="text-lg font-black">{selectedGoal.deadline}</div>
<div className="text-[9px] font-bold text-muted-foreground uppercase tracking-widest">Target Date</div>
</div>
</div>
{/* AI Goal Intelligence */}
{selectedGoal.aiInsight && (
<div className="rounded-sm border border-primary/20 bg-primary/5 p-8 space-y-4 relative overflow-hidden">
<div className="absolute -right-4 -top-4 opacity-5">
<Brain className="h-24 w-24 text-primary" />
</div>
<h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-primary flex items-center gap-2">
<Brain className="h-4 w-4" /> Goal Intelligence Report
</h3>
<p className="text-sm font-medium text-foreground/90 leading-relaxed italic">
"{selectedGoal.aiInsight}"
</p>
</div>
)}
{/* Milestone Roadmap */}
<div className="space-y-6">
<h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-primary">Milestone Roadmap</h3>
<div className="relative space-y-8 pl-6 before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-px before:bg-white/10">
{selectedGoal.milestones?.map((ms: any, i: number) => (
<div key={i} className="relative group">
<div className={`absolute -left-[23px] top-1 h-3 w-3 rounded-full border-2 border-[#0A0710] z-10 ${
ms.status === 'Done' ? 'bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]' :
ms.status === 'In Progress' ? 'bg-primary shadow-[0_0_8px_rgba(108,91,176,0.5)]' : 'bg-white/10'
}`} />
<div className="flex justify-between items-start">
<div>
<div className="text-sm font-bold group-hover:text-primary transition-colors">{ms.name}</div>
<div className="text-[10px] text-muted-foreground mt-1 uppercase font-medium">{ms.date} • {ms.status}</div>
</div>
{ms.status === 'Done' && <CheckCircle2 className="h-4 w-4 text-emerald-500" />}
</div>
</div>
))}
</div>
</div>
{/* Connect Resources */}
<div className="space-y-6 pt-6 border-t border-white/5">
<h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-primary">Linked Deliverables</h3>
<div className="grid grid-cols-2 gap-4">
<div className="p-4 rounded-sm bg-[#150F1D] border border-white/5 flex items-center justify-between group cursor-pointer hover:border-primary/20 transition-all">
<div className="flex items-center gap-3">
<div className="p-2 bg-blue-500/10 rounded-sm"><Briefcase className="h-4 w-4 text-blue-400" /></div>
<div>
<div className="text-xs font-bold">Project: Cognis App</div>
<div className="text-[9px] text-muted-foreground uppercase mt-1">Core Requirement</div>
</div>
</div>
<ChevronRight className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
</div>
<div className="p-4 rounded-sm bg-[#150F1D] border border-white/5 flex items-center justify-between group cursor-pointer hover:border-primary/20 transition-all">
<div className="flex items-center gap-3">
<div className="p-2 bg-emerald-500/10 rounded-sm"><Award className="h-4 w-4 text-emerald-500" /></div>
<div>
<div className="text-xs font-bold">Achievement: Series A</div>
<div className="text-[9px] text-muted-foreground uppercase mt-1">Strategic Outcome</div>
</div>
</div>
<ChevronRight className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
</div>
</div>
</div>
</div>
<div className="p-10 border-t border-white/5 bg-[#0F0B15]/50 flex gap-4">
<button className="flex-1 bg-primary hover:bg-primary/90 text-primary-foreground py-5 rounded-sm text-[11px] font-black uppercase tracking-widest shadow-2xl shadow-primary/30 transition-all active:scale-[0.98]">
UPDATE STRATEGIC PROGRESS
</button>
<button className="p-5 border border-white/10 rounded-sm text-muted-foreground hover:bg-white/5 transition-colors">
<BarChart3 className="h-6 w-6" />
</button>
</div>
</motion.div>
</>
)}
</AnimatePresence>
</div>
);
}
function GoalCategoryCard({ label, count, color, icon: Icon }: any) {
return (
<div className="bg-[#0A0710] border border-white/5 rounded-sm p-6 flex items-center justify-between group hover:border-white/10 transition-all shadow-xl">
<div className="flex items-center gap-4">
<div className={`p-3 bg-white/5 rounded-sm ${color} transition-colors group-hover:bg-white/10`}>
<Icon className="h-5 w-5" />
</div>
<div>
<div className="text-[10px] font-black uppercase tracking-widest text-muted-foreground mb-0.5">{label}</div>
<div className="text-xl font-black">{count}</div>
</div>
</div>
<ChevronRight className="h-4 w-4 text-muted-foreground/30" />
</div>
);
}