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

refactor: decouple analytics page into server-side data fetching and client-side presentation components

Browse Source
This commit is contained in:
poyrazavsever
2026-06-06 20:14:16 +03:00
parent 4dbe8ff98b
commit 1cd00d4efe
4 changed files with 551 additions and 628 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(dashboard)/analytics/page.tsx
+30 -246
View File
@@ -1,255 +1,39 @@
"use client";
import { createClient } from "@/lib/supabase/server";
import { AnalyticsClient } from "./analytics-client";
import { redirect } from "next/navigation";
import { useState } from "react";
import {
ArrowUpRight, Brain, TrendingUp, Zap, Target, ArrowDownRight,
BarChart3, Filter, Download, Info, CheckCircle2, AlertCircle
} from "lucide-react";
import {
Area, AreaChart, Bar, BarChart, CartesianGrid, ResponsiveContainer,
Tooltip, XAxis, YAxis, Radar, RadarChart, PolarGrid, PolarAngleAxis, Cell
} from "recharts";
import { motion, AnimatePresence } from "framer-motion";
export const metadata = {
title: "Analizler - Cognis",
};
// Mock Data
const productivityTrend = [
{ date: "May 1", focus: 65, energy: 40 },
{ date: "May 4", focus: 75, energy: 55 },
{ date: "May 8", focus: 60, energy: 50 },
{ date: "May 12", focus: 85, energy: 70 },
{ date: "May 16", focus: 72, energy: 65 },
{ date: "May 20", focus: 95, energy: 85 },
{ date: "May 24", focus: 88, energy: 80 },
];
export default async function AnalyticsPage() {
const supabase = await createClient();
const { data: { user } } = await supabase.auth.getUser();
const habitCompletion = [
{ name: "Reading", completed: 85, missed: 15, color: "#6C5BB0" },
{ name: "Workout", completed: 60, missed: 40, color: "#a798e8" },
{ name: "Meditation", completed: 90, missed: 10, color: "#10b981" },
{ name: "Coding", completed: 75, missed: 25, color: "#3b82f6" },
];
if (!user) {
redirect("/login");
}
const focusRadarData = [
{ subject: "Deep Work", A: 120, fullMark: 150 },
{ subject: "Learning", A: 98, fullMark: 150 },
{ subject: "Health", A: 86, fullMark: 150 },
{ subject: "Networking", A: 65, fullMark: 150 },
{ subject: "Admin", A: 40, fullMark: 150 },
];
// 1. Fetch tasks
const { data: tasks } = await supabase
.from("tasks")
.select("*");
export default function AnalyticsPage() {
const [isExporting, setIsExporting] = useState(false);
const [activeInsight, setActiveInsight] = useState<string | null>(null);
// 2. Fetch projects
const { data: projects } = await supabase
.from("projects")
.select("*");
const handleExport = () => {
setIsExporting(true);
setTimeout(() => setIsExporting(false), 3000);
// 3. Fetch finances
const { data: finances } = await supabase
.from("finance_transactions")
.select("*");
const analyticsData = {
tasks: tasks || [],
projects: projects || [],
finances: finances || [],
};
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 pb-12">
{/* 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">Analytics</span> / Performance Metrics
</h1>
<div className="flex items-center gap-3">
<div className="bg-[#150F1D] border border-white/5 rounded-sm px-3 py-1.5 flex items-center gap-2">
<Filter className="h-4 w-4 text-muted-foreground" />
<select className="bg-transparent border-none outline-none text-xs text-foreground cursor-pointer">
<option className="bg-[#0A0710]">Last 30 Days</option>
<option className="bg-[#0A0710]">Last Quarter</option>
<option className="bg-[#0A0710]">This Year</option>
</select>
</div>
<button
onClick={handleExport}
disabled={isExporting}
className={`min-w-[140px] px-4 py-1.5 rounded-sm text-xs font-semibold flex items-center justify-center gap-2 transition-all ${isExporting ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30' : 'bg-white/5 hover:bg-white/10 text-foreground border border-white/10'}`}
>
{isExporting ? (
<>
<motion.div animate={{ rotate: 360 }} transition={{ repeat: Infinity, duration: 1, ease: "linear" }}>
<Download className="h-4 w-4" />
</motion.div>
GENERATING...
</>
) : (
<>
<BarChart3 className="h-4 w-4" />
EXPORT REPORT
</>
)}
</button>
</div>
</div>
{/* KPI Row */}
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
<KpiCard title="Total Focus Hours" value="124.5" change="+12%" icon={Zap} trend="up" />
<KpiCard title="Goal Completion" value="82%" change="+4%" icon={Target} trend="up" color="emerald" />
<KpiCard title="Productivity Score" value="9.2" change="-2%" icon={TrendingUp} trend="down" color="blue" />
{/* Dynamic AI Score Ring */}
<div className="rounded-sm border border-primary/20 bg-primary/5 p-6 relative overflow-hidden group flex items-center justify-between">
<div>
<h3 className="text-[10px] font-bold uppercase tracking-widest text-primary mb-2">Strategic Readiness</h3>
<div className="text-3xl font-black text-foreground">94<span className="text-sm font-normal opacity-60 ml-1">%</span></div>
<p className="text-[10px] text-muted-foreground mt-2 font-medium">Optimal alignment with goals.</p>
</div>
<div className="relative w-16 h-16">
<svg className="w-full h-full" viewBox="0 0 36 36">
<path className="text-white/5" stroke="currentColor" strokeWidth="3" fill="none" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
<motion.path
initial={{ pathLength: 0 }}
animate={{ pathLength: 0.94 }}
transition={{ duration: 1.5, ease: "easeOut" }}
className="text-primary"
stroke="currentColor"
strokeWidth="3"
strokeDasharray="100, 100"
fill="none"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
/>
</svg>
<div className="absolute inset-0 flex items-center justify-center">
<Brain className="h-4 w-4 text-primary" />
</div>
</div>
</div>
</div>
{/* Main Analysis Area */}
<div className="grid grid-cols-1 xl:grid-cols-3 gap-6 flex-1 min-h-[400px]">
{/* Productivity Chart with Hotspots */}
<div className="xl:col-span-2 rounded-sm border border-white/5 bg-[#0A0710] p-8 flex flex-col relative">
<div className="flex justify-between items-start mb-8">
<div>
<h3 className="text-lg font-bold mb-1">Correlation: Focus vs Energy</h3>
<p className="text-sm text-muted-foreground">Detailed visual mapping of biological energy impact on focus output.</p>
</div>
<div className="flex gap-4 text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
<div className="flex items-center gap-2"><div className="w-2 h-2 rounded-full bg-[#6C5BB0]"></div> Focus</div>
<div className="flex items-center gap-2"><div className="w-2 h-2 rounded-full bg-emerald-500"></div> Energy</div>
</div>
</div>
{/* Chart Interaction Layer */}
<div className="absolute top-24 left-1/2 -translate-x-1/2 z-10 flex gap-4">
<button
onMouseEnter={() => setActiveInsight("Your energy and focus peaked together on May 20. This suggests your evening rest was highly effective.")}
onMouseLeave={() => setActiveInsight(null)}
className="p-2 bg-primary/20 border border-primary/40 rounded-full text-primary hover:scale-110 transition-transform animate-pulse"
>
<Info className="h-4 w-4" />
</button>
</div>
<AnimatePresence>
{activeInsight && (
<motion.div
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 10 }}
className="absolute top-36 left-1/2 -translate-x-1/2 z-20 w-64 p-3 bg-[#1F172B] border border-primary/30 rounded-sm shadow-2xl text-[11px] leading-relaxed text-foreground"
>
<div className="flex items-center gap-2 mb-1 text-primary font-bold uppercase tracking-widest">
<Brain className="h-3 w-3" /> AI Observation
</div>
{activeInsight}
</motion.div>
)}
</AnimatePresence>
<div className="flex-1 w-full min-h-[300px]">
<ResponsiveContainer width="100%" height="100%">
<AreaChart data={productivityTrend}>
<defs>
<linearGradient id="colorFocus" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#6C5BB0" stopOpacity={0.4}/>
<stop offset="95%" stopColor="#6C5BB0" stopOpacity={0}/>
</linearGradient>
<linearGradient id="colorEnergy" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#10b981" stopOpacity={0.4}/>
<stop offset="95%" stopColor="#10b981" stopOpacity={0}/>
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#ffffff05" />
<XAxis dataKey="date" axisLine={false} tickLine={false} tick={{ fontSize: 11, fill: '#8F89A5' }} dy={10} />
<YAxis axisLine={false} tickLine={false} tick={{ fontSize: 11, fill: '#8F89A5' }} dx={-10} />
<Tooltip
cursor={{ stroke: '#6C5BB0', strokeWidth: 1 }}
contentStyle={{ backgroundColor: "#150F1D", border: "1px solid rgba(255,255,255,0.05)", fontSize: "12px", color: "#FBF9FE", borderRadius: "4px" }}
/>
<Area type="monotone" dataKey="focus" stroke="#6C5BB0" strokeWidth={3} fillOpacity={1} fill="url(#colorFocus)" />
<Area type="monotone" dataKey="energy" stroke="#10b981" strokeWidth={3} fillOpacity={1} fill="url(#colorEnergy)" />
</AreaChart>
</ResponsiveContainer>
</div>
</div>
{/* Sidebar Insights */}
<div className="flex flex-col gap-6">
<div className="rounded-sm border border-white/5 bg-[#0A0710] p-6 flex-1 flex flex-col">
<h3 className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-6">Effort Distribution</h3>
<div className="flex-1 flex items-center justify-center">
<ResponsiveContainer width="100%" height="100%">
<RadarChart cx="50%" cy="50%" outerRadius="80%" data={focusRadarData}>
<PolarGrid stroke="#ffffff05" />
<PolarAngleAxis dataKey="subject" tick={{ fill: '#8F89A5', fontSize: 10, fontWeight: 600 }} />
<Radar name="Effort" dataKey="A" stroke="#6C5BB0" strokeWidth={2} fill="#6C5BB0" fillOpacity={0.4} />
<Tooltip contentStyle={{ backgroundColor: "#1F172B", border: "none", fontSize: "12px" }} />
</RadarChart>
</ResponsiveContainer>
</div>
</div>
<div className="rounded-sm border border-white/5 bg-[#0A0710] p-6 flex-1">
<h3 className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-6">Strategic Alerts</h3>
<div className="space-y-4">
<div className="flex items-start gap-3 p-3 rounded-sm bg-emerald-500/5 border border-emerald-500/10">
<CheckCircle2 className="h-4 w-4 text-emerald-500 mt-0.5" />
<div>
<div className="text-xs font-bold text-emerald-400">Habit Streak Maintained</div>
<div className="text-[10px] text-muted-foreground mt-1">Reading streak is now at 12 days. Energy levels are correlating positively.</div>
</div>
</div>
<div className="flex items-start gap-3 p-3 rounded-sm bg-orange-500/5 border border-orange-500/10">
<AlertCircle className="h-4 w-4 text-orange-500 mt-0.5" />
<div>
<div className="text-xs font-bold text-orange-400">Admin Overload</div>
<div className="text-[10px] text-muted-foreground mt-1">Admin tasks have increased by 15%. Consider automating these via Cognis AI.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
function KpiCard({ title, value, change, icon: Icon, trend, color = "primary" }: any) {
const isUp = trend === "up";
const trendColor = isUp ? "text-emerald-500" : "text-rose-500";
return (
<div className="rounded-sm border border-white/5 bg-[#0A0710] p-6 relative overflow-hidden group">
<div className={`absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity ${color === 'primary' ? 'text-primary' : color === 'emerald' ? 'text-emerald-500' : 'text-blue-500'}`}>
<Icon className="h-16 w-16" />
</div>
<h3 className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mb-4">{title}</h3>
<div className="flex items-end gap-3 mb-1">
<span className="text-4xl font-black text-foreground tracking-tight">{value}</span>
<span className={`text-[10px] flex items-center font-bold mb-1.5 px-1.5 py-0.5 rounded-sm bg-white/5 ${trendColor}`}>
{isUp ? <ArrowUpRight className="h-3 w-3 mr-0.5" /> : <ArrowDownRight className="h-3 w-3 mr-0.5" />} {change}
</span>
</div>
<div className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">vs previous 30 days</div>
</div>
);
return <AnalyticsClient data={analyticsData} />;
}