From c309539db51743215f3b0581dcebea4e3957bb82 Mon Sep 17 00:00:00 2001 From: Poyraz Avsever Date: Fri, 8 May 2026 12:09:41 +0300 Subject: [PATCH] feat: implement responsive dashboard layout with sidebar navigation and full-screen clock overlay --- app/(dashboard)/page.tsx | 533 ++++++++++++++------------ components/layout/dashboard-shell.tsx | 110 ++++-- 2 files changed, 370 insertions(+), 273 deletions(-) diff --git a/app/(dashboard)/page.tsx b/app/(dashboard)/page.tsx index 67446dc..b654330 100644 --- a/app/(dashboard)/page.tsx +++ b/app/(dashboard)/page.tsx @@ -1,291 +1,324 @@ "use client"; import { useMemo } from "react"; -import { useLiveQuery } from "dexie-react-hooks"; -import { Activity, Brain, CheckCircle, PenTool } from "lucide-react"; import { Bar, BarChart, CartesianGrid, - Legend, + Cell, Line, LineChart, + Pie, + PieChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts"; +import { LogOut, CheckSquare2, Droplets, Moon, Target, Activity, MoreHorizontal, PenTool } from "lucide-react"; -import { db, type Journal, type Task } from "@/lib/db"; -import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +// Mock Data +const focusTrendData = [ + { date: "May 12", value: 55 }, + { date: "May 13", value: 42 }, + { date: "May 14", value: 60 }, + { date: "May 15", value: 85 }, + { date: "May 16", value: 72 }, + { date: "May 17", value: 87 }, + { date: "May 18", value: 100 }, +]; -const EMPTY_JOURNALS: Journal[] = []; -const EMPTY_TASKS: Task[] = []; +const sleepData = [ + { day: "M", value: 6.5 }, + { day: "T", value: 7.2 }, + { day: "W", value: 5.8 }, + { day: "T", value: 6.1 }, + { day: "F", value: 8.0 }, + { day: "S", value: 7.5 }, + { day: "S", value: 8.5 }, +]; -const moodScores: Record = { - happy: 4, - neutral: 3, - sad: 2, - angry: 1, -}; +const waterData = [ + { day: "M", value: 1.5 }, + { day: "T", value: 2.1 }, + { day: "W", value: 1.8 }, + { day: "T", value: 2.5 }, + { day: "F", value: 2.0 }, + { day: "S", value: 3.0 }, + { day: "S", value: 2.8 }, +]; + +const moodData = [ + { day: "M", value: 60 }, + { day: "T", value: 85 }, + { day: "W", value: 70 }, + { day: "T", value: 65 }, + { day: "F", value: 80 }, + { day: "S", value: 90 }, + { day: "S", value: 95 }, +]; + +const focusDistributionData = [ + { name: "Deep Work", value: 45, color: "#6C5BB0" }, + { name: "Shallow Work", value: 30, color: "#54468B" }, + { name: "Meetings", value: 15, color: "#3B3161" }, + { name: "Breaks", value: 10, color: "#221C38" }, +]; + +const upcomingEvents = [ + { time: "10:00 AM", title: "Deep Work Session", category: "FOCUS", color: "border-l-pink-500" }, + { time: "12:30 PM", title: "Team Standup", category: "MEETING", color: "border-l-orange-500" }, + { time: "02:00 PM", title: "Project Review", category: "WORK", color: "border-l-blue-500" }, + { time: "04:00 PM", title: "Workout", category: "HEALTH", color: "border-l-emerald-500" }, + { time: "07:00 PM", title: "Daily Reflection", category: "PERSONAL", color: "border-l-purple-500" }, +]; export default function DashboardPage() { - const liveJournals = useLiveQuery(() => - db.journals.orderBy("date").toArray(), - ); - const liveTasks = useLiveQuery(() => db.tasks.toArray()); - - const journals = liveJournals ?? EMPTY_JOURNALS; - const tasks = liveTasks ?? EMPTY_TASKS; - - const pendingTasksCount = tasks.filter((task) => task.status === "todo").length; - - const today = new Date().toISOString().split("T")[0]; - const todaysJournal = journals.find((journal) => journal.date === today); - const todaysEnergy = todaysJournal ? todaysJournal.energy : "--"; - - const trendData = useMemo(() => { - const dataMap: Record< - string, - { date: string; moodSum: number; energySum: number; count: number } - > = {}; - - journals.forEach((journal) => { - if (!dataMap[journal.date]) { - dataMap[journal.date] = { - date: journal.date, - moodSum: 0, - energySum: 0, - count: 0, - }; - } - - dataMap[journal.date].moodSum += moodScores[journal.mood] || 3; - dataMap[journal.date].energySum += journal.energy; - dataMap[journal.date].count += 1; - }); - - return Object.values(dataMap) - .map((entry) => ({ - date: entry.date.slice(5), - Mood: Number((entry.moodSum / entry.count).toFixed(1)), - Enerji: Number((entry.energySum / entry.count).toFixed(1)), - })) - .slice(-7); - }, [journals]); - - const tagData = useMemo(() => { - const counts: Record = {}; - - journals.forEach((journal) => { - journal.ai_tags?.forEach((tag) => { - counts[tag] = (counts[tag] || 0) + 1; - }); - }); - - return Object.entries(counts) - .map(([name, value]) => ({ name, Değer: value })) - .sort((a, b) => b.Değer - a.Değer) - .slice(0, 5); - }, [journals]); - - const lastInsight = [...journals] - .reverse() - .find((journal) => journal.ai_summary)?.ai_summary; + const currentDate = new Date().toLocaleDateString('tr-TR', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }); + const currentTime = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' }); return ( -
-
-

Bugün Nasılsın?

-

- Kişisel özetin ve yapay zeka analizlerin burada görünecek. -

-
- -
- - - Günlük Kayıtları - - - -
{journals.length}
-

- {journals.length === 0 - ? "Henüz kayıt girilmedi" - : "Toplam kayıt eklendi"} -

- - - - - - Aktif Görevler - - - -
{pendingTasksCount}
-

Bekleyen görev

- - - - - - Bugünkü Enerji - - - -
{todaysEnergy}
-

- {todaysJournal ? "/ 5 seviyesinde" : "Kayıt bekleniyor"} -

- - - - - - Local AI Durumu - - - -
Hazır
-

- Ollama / Veri bekliyor -

- - -
- -
- -
-

Ruh Hali ve Enerji Trendi

-

- Son 7 günlük ortalamalar (1-5 arası puanlama) -

-
-
- {trendData.length > 0 ? ( +
+ +
+ + {/* LEFT COLUMN: Focus Trend (Takes 2 columns on XL) */} +
+
+
+
+

Focus Trend

+
87%
+
Average Focus Score
+
+
+ + +
+
+ +
- - + + - - - - - - ) : ( -
-

Veri bekleniyor...

-
- )} +
- +
-
- -
-

AI Konu Dağılımı

-

- Günlüklerinden çıkarılan en sık 5 etiket -

+ {/* RIGHT COLUMN: Quick Add & Upcoming */} +
+ + {/* Quick Add */} +
+

Quick Add

+
+
-
- {tagData.length > 0 ? ( - - - - - - - - - - ) : ( -
-

Yeterli etiket yok.

+
+ + + +
+
+ + {/* Upcoming */} +
+
+

Upcoming

+ +
+
+ {upcomingEvents.map((event, idx) => ( +
+
+
{event.time}
+
{event.title}
+
{event.category}
- )} + ))}
- +
- -

- - Son AI İçgörüsü -

-

- {lastInsight - ? `"${lastInsight}"` - : "Henüz bir içgörü oluşmadı. Biraz günlük yaz, AI analiz yapsın."} -

-
+ + {/* BOTTOM ROW: Mini Charts & Donut */} +
+ + {/* Sleep Hours */} +
+
+

Sleep Hours

+ +
+
+
+ 7.2 + HOURS +
+
+ + + + + + + +
+
Goal: 7-8 Hours
+
+
+ + {/* Water Intake */} +
+
+

Water Intake

+ +
+
+
+ 2.1 + LITERS +
+
+ + + + + + + +
+
Goal: 2.5L
+
+
+ + {/* Mood Score */} +
+
+

Mood Score

+ +
+
+
+ 78 + /100 +
+
+ + + + + + + +
+
Positive
+
+
+ + {/* Focus Distribution */} +
+

Focus Distribution

+
+
+ + + + {focusDistributionData.map((entry, index) => ( + + ))} + + + + +
+
+ {focusDistributionData.map((item, idx) => ( +
+
+
+ {item.name} +
+ {item.value}% +
+ ))} +
+
+
+
+ + {/* Quote Footer */} +
+
+
+ +
+
+
SYSTEM REMINDER
+
"Discipline is the bridge between goals and accomplishment."
+
+
+
- Jim Rohn
+
+
); } diff --git a/components/layout/dashboard-shell.tsx b/components/layout/dashboard-shell.tsx index a36eb7f..5615d07 100644 --- a/components/layout/dashboard-shell.tsx +++ b/components/layout/dashboard-shell.tsx @@ -13,11 +13,11 @@ import { import { sidebarData } from "@/config/sidebar"; import { cn } from "@/lib/utils"; import { AnimatePresence, motion } from "framer-motion"; -import { ChevronDown, LogOut, Menu, Settings2 } from "lucide-react"; +import { ChevronDown, LogOut, Menu, Settings2, Clock } from "lucide-react"; import Image from "next/image"; import Link from "next/link"; import { usePathname } from "next/navigation"; -import { useState } from "react"; +import { useState, useEffect } from "react"; type DashboardShellProps = { children: React.ReactNode; @@ -32,6 +32,7 @@ type DashboardShellProps = { export function DashboardShell({ children, user }: DashboardShellProps) { const pathname = usePathname(); const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false); + const [isClockFullScreen, setIsClockFullScreen] = useState(false); const closeMobileSidebar = () => setIsMobileSidebarOpen(false); @@ -39,10 +40,29 @@ export function DashboardShell({ children, user }: DashboardShellProps) {
+ {/* Full Screen Clock Overlay */} + + {isClockFullScreen && ( + setIsClockFullScreen(false)} + > +
+ Click anywhere to close +
+ + + )} + +
{/* Desktop Sidebar */}
- + setIsClockFullScreen(true)} />
{/* Mobile Sidebar */} @@ -71,6 +91,7 @@ export function DashboardShell({ children, user }: DashboardShellProps) { pathname={pathname} user={user} onNavigate={closeMobileSidebar} + onClockClick={() => setIsClockFullScreen(true)} /> @@ -96,10 +117,8 @@ export function DashboardShell({ children, user }: DashboardShellProps) {
-
-
-
{children}
-
+
+ {children}
@@ -112,22 +131,20 @@ function SidebarPanel({ user, desktop = false, onNavigate, + onClockClick, }: { pathname: string; user: DashboardShellProps["user"]; desktop?: boolean; onNavigate?: () => void; + onClockClick: () => void; }) { return (
@@ -249,6 +267,52 @@ function SidebarPanel({ ); } +function ClockBadge({ onClick }: { onClick: () => void }) { + const [time, setTime] = useState(""); + + useEffect(() => { + const updateTime = () => { + setTime(new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })); + }; + updateTime(); + const interval = setInterval(updateTime, 1000); + return () => clearInterval(interval); + }, []); + + if (!time) { + return
; + } + + return ( + + ); +} + +function FullScreenClock() { + const [time, setTime] = useState(""); + + useEffect(() => { + const updateTime = () => { + setTime(new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' })); + }; + updateTime(); + const interval = setInterval(updateTime, 1000); + return () => clearInterval(interval); + }, []); + + return ( +
+ {time || "..."} +
+ ); +} + function Avatar({ user }: { user: DashboardShellProps["user"] }) { if (user.avatarUrl) { return (