diff --git a/app/(dashboard)/page.tsx b/app/(dashboard)/page.tsx index 64e1bde..266c540 100644 --- a/app/(dashboard)/page.tsx +++ b/app/(dashboard)/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { useMemo } from "react"; +import { useState } from "react"; import { Bar, BarChart, @@ -15,7 +15,13 @@ import { XAxis, YAxis, } from "recharts"; -import { LogOut, CheckSquare2, Droplets, Moon, Target, Activity, MoreHorizontal, PenTool, Plus } from "lucide-react"; +import { + CheckSquare2, Droplets, Moon, Target, Activity, + MoreHorizontal, PenTool, Plus, GripVertical, Maximize2 +} from "lucide-react"; +import { motion, Reorder } from "framer-motion"; +import { QuickActionsSheet } from "@/components/dashboard/quick-actions-sheet"; +import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"; // Mock Data const focusTrendData = [ @@ -73,19 +79,27 @@ const upcomingEvents = [ { time: "07:00 PM", title: "Daily Reflection", category: "PERSONAL", color: "border-l-purple-500" }, ]; +type WidgetId = "sleep" | "water" | "mood" | "distribution"; + export default function DashboardPage() { - 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' }); + const [isQuickActionOpen, setIsQuickActionOpen] = useState(false); + const [selectedKpi, setSelectedKpi] = useState(null); + + // Widget ordering state + const [widgetOrder, setWidgetOrder] = useState(["sleep", "water", "mood", "distribution"]); return ( -
+
{/* Top Header */}

Dashboard / Overview

- @@ -95,7 +109,7 @@ export default function DashboardPage() { {/* LEFT COLUMN: Focus Trend (Takes 2 columns on XL) */}
-
+

Focus Trend

@@ -154,30 +168,21 @@ export default function DashboardPage() { {/* RIGHT COLUMN: Quick Add & Upcoming */}
- {/* Quick Add */} -
-

Quick Add

-
- -
-
- - - + {/* AI Strategy Suggestion (Replacing Quick Add Input) */} +
+
+
+

+ + AI Insight +

+

+ "Based on your 100% focus score yesterday, you have high mental momentum. Schedule your hardest task for 10:00 AM today." +

+
{/* Upcoming */} @@ -201,128 +206,103 @@ export default function DashboardPage() {
- {/* 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} + {/* BOTTOM ROW: Draggable Widgets */} + + {widgetOrder.map((id) => ( + + {id === "sleep" && ( + setSelectedKpi("sleep")} + /> + )} + {id === "water" && ( + setSelectedKpi("water")} + /> + )} + {id === "mood" && ( + setSelectedKpi("mood")} + /> + )} + {id === "distribution" && ( +
+
+
+
- {item.value}%
- ))} -
-
-
-
+

Focus Distribution

+
+
+ + + + {focusDistributionData.map((entry, index) => ( + + ))} + + + +
+
+ {focusDistributionData.slice(0, 3).map((item, idx) => ( +
+
+
+ {item.name} +
+ {item.value}% +
+ ))} +
+
+
+ )} + + ))} + {/* Quote Footer */} -
+
-
+
@@ -333,6 +313,83 @@ export default function DashboardPage() {
- Jim Rohn
+ {/* Sheet & Modals */} + setIsQuickActionOpen(false)} + /> + + setSelectedKpi(null)}> + + + + {selectedKpi === "sleep" && <> Sleep Analysis} + {selectedKpi === "water" && <> Hydration Trends} + {selectedKpi === "mood" && <> Mood Tracking} + + +
+ + + + + + + + + +
+
+
+

AI Observation

+

Your consistency is up 12% from last week. Keep this pace for optimal performance.

+
+
+

Recommendation

+

Try to reach your goal by increasing focus in the evening blocks.

+
+
+ + + +
+ ); +} + +function WidgetCard({ title, icon: Icon, value, unit, goal, data, onExpand }: any) { + return ( +
+
+ +
+ +
+
+
+

{title}

+ +
+
+
+ {value} + {unit} +
+
+ + + + + + + +
+
Goal: {goal}
+
); } diff --git a/components/dashboard/quick-actions-sheet.tsx b/components/dashboard/quick-actions-sheet.tsx new file mode 100644 index 0000000..cebeaf3 --- /dev/null +++ b/components/dashboard/quick-actions-sheet.tsx @@ -0,0 +1,122 @@ +"use client"; + +import { motion, AnimatePresence } from "framer-motion"; +import { X, PenTool, Target, CheckSquare2, Calendar, Coffee, Zap, Moon } from "lucide-react"; + +interface QuickActionsSheetProps { + isOpen: boolean; + onClose: () => void; +} + +export function QuickActionsSheet({ isOpen, onClose }: QuickActionsSheetProps) { + return ( + + {isOpen && ( + <> + {/* Backdrop */} + + + {/* Sheet Content */} + + {/* Header */} +
+
+

Quick Actions

+

Add new entries to your workspace

+
+ +
+ + {/* Action Grid */} +
+
+

Core Actions

+
+ {[ + { icon: PenTool, label: "New Journal", color: "text-purple-400", bg: "bg-purple-500/10" }, + { icon: Target, label: "Set Habit", color: "text-blue-400", bg: "bg-blue-500/10" }, + { icon: CheckSquare2, label: "New Goal", color: "text-emerald-400", bg: "bg-emerald-500/10" }, + { icon: Calendar, label: "Schedule", color: "text-orange-400", bg: "bg-orange-500/10" }, + ].map((item, idx) => ( + + ))} +
+
+ +
+

Quick Logs

+
+ {[ + { icon: Coffee, label: "Log Coffee", value: "+1 Cup" }, + { icon: Zap, label: "Energy Level", value: "8/10" }, + { icon: Moon, label: "Sleep Quality", value: "Great" }, + ].map((item, idx) => ( + + ))} +
+
+ + {/* Form Input Sample */} +
+

Quick Task

+
+
+ +
+ +
+
+
+ + {/* Footer */} +
+

+ AI Assistant is ready to help with any of these actions +

+
+ + + )} + + ); +}