From 1c9eca814ec39f8eb7d21d2d533a2a5f28f4a5d6 Mon Sep 17 00:00:00 2001 From: Poyraz Avsever Date: Fri, 8 May 2026 17:29:02 +0300 Subject: [PATCH] feat: scaffold initial dashboard layout and base pages for all modules --- app/(dashboard)/analytics/page.tsx | 270 ++++++++------- app/(dashboard)/calendar/page.tsx | 216 +++++++++--- app/(dashboard)/clients/page.tsx | 282 +++++++++++++++ app/(dashboard)/documents/page.tsx | 465 ++++++++++++++++++------- app/(dashboard)/finance/page.tsx | 533 ++++++++++++++++++----------- app/(dashboard)/goals/page.tsx | 397 +++++++++++++-------- app/(dashboard)/habits/page.tsx | 406 +++++++++++++--------- app/(dashboard)/journal/page.tsx | 364 ++++++++++++++------ app/(dashboard)/projects/page.tsx | 411 +++++++++++++++------- app/(dashboard)/proposals/page.tsx | 302 ++++++++++++++++ app/(dashboard)/tasks/page.tsx | 379 ++++++++++++-------- app/(dashboard)/time/page.tsx | 251 ++++++++++++++ 12 files changed, 3129 insertions(+), 1147 deletions(-) create mode 100644 app/(dashboard)/clients/page.tsx create mode 100644 app/(dashboard)/proposals/page.tsx create mode 100644 app/(dashboard)/time/page.tsx diff --git a/app/(dashboard)/analytics/page.tsx b/app/(dashboard)/analytics/page.tsx index aa828ab..0d2348e 100644 --- a/app/(dashboard)/analytics/page.tsx +++ b/app/(dashboard)/analytics/page.tsx @@ -1,21 +1,15 @@ "use client"; -import { ArrowUpRight, Brain, TrendingUp, Zap, Target, ArrowDownRight, BarChart3, Filter } from "lucide-react"; +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, + Area, AreaChart, Bar, BarChart, CartesianGrid, ResponsiveContainer, + Tooltip, XAxis, YAxis, Radar, RadarChart, PolarGrid, PolarAngleAxis, Cell } from "recharts"; +import { motion, AnimatePresence } from "framer-motion"; // Mock Data const productivityTrend = [ @@ -29,10 +23,10 @@ const productivityTrend = [ ]; const habitCompletion = [ - { name: "Reading", completed: 85, missed: 15 }, - { name: "Workout", completed: 60, missed: 40 }, - { name: "Meditation", completed: 90, missed: 10 }, - { name: "Coding", completed: 75, missed: 25 }, + { 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" }, ]; const focusRadarData = [ @@ -44,8 +38,16 @@ const focusRadarData = [ ]; export default function AnalyticsPage() { + const [isExporting, setIsExporting] = useState(false); + const [activeInsight, setActiveInsight] = useState(null); + + const handleExport = () => { + setIsExporting(true); + setTimeout(() => setIsExporting(false), 3000); + }; + return ( -
+
{/* Top Header */}
@@ -61,95 +63,116 @@ export default function AnalyticsPage() {
-
{/* KPI Row */}
+ + + -
-
- + {/* Dynamic AI Score Ring */} +
+
+

Strategic Readiness

+
94%
+

Optimal alignment with goals.

-

Total Focus Hours

-
- 124.5 - - 12% - +
+ + + + +
+ +
-
vs previous 30 days
- -
-
- -
-

Goal Completion

-
- 82% - - 4% - -
-
vs previous 30 days
-
- -
-
- -
-

Productivity Score

-
- 9.2 - - 2% - -
-
Out of 10.0 max
-
- -
-
- -

AI Insight

-
-

- Your energy peaks consistently around 10:00 AM. Consider scheduling complex tasks during this block to maximize output. -

-
-
- {/* Charts Grid */} + {/* Main Analysis Area */}
- {/* Main Area Chart */} -
-
+ {/* Productivity Chart with Hotspots */} +
+
-

Productivity vs Energy Correlation

-

How your physical energy levels impact deep work output.

+

Correlation: Focus vs Energy

+

Detailed visual mapping of biological energy impact on focus output.

-
-
Focus Score
-
Energy Level
+
+
Focus
+
Energy
+ + {/* Chart Interaction Layer */} +
+ +
+ + + {activeInsight && ( + +
+ AI Observation +
+ {activeInsight} + + )} + +
- + - + @@ -157,61 +180,76 @@ export default function AnalyticsPage() { - - + +
- {/* Side Charts Stack */} + {/* Sidebar Insights */}
- {/* Radar Chart */}
-

Effort Distribution

-
+

Effort Distribution

+
- - - - - + + + + +
- {/* Bar Chart */} -
-

Habit Consistency

-
- - - - - - - - - +
+

Strategic Alerts

+
+
+ +
+
Habit Streak Maintained
+
Reading streak is now at 12 days. Energy levels are correlating positively.
+
+
+
+ +
+
Admin Overload
+
Admin tasks have increased by 15%. Consider automating these via Cognis AI.
+
+
-
+
+ ); +} +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 ( +
+
+ +
+

{title}

+
+ {value} + + {isUp ? : } {change} + +
+
vs previous 30 days
); } diff --git a/app/(dashboard)/calendar/page.tsx b/app/(dashboard)/calendar/page.tsx index dccca00..ce3bc77 100644 --- a/app/(dashboard)/calendar/page.tsx +++ b/app/(dashboard)/calendar/page.tsx @@ -1,6 +1,11 @@ "use client"; -import { ChevronLeft, ChevronRight, Plus, Search, Calendar as CalendarIcon, Clock, Filter, MoreHorizontal, Brain } from "lucide-react"; +import { useState } from "react"; +import { + ChevronLeft, ChevronRight, Plus, Search, Calendar as CalendarIcon, + Clock, Filter, MoreHorizontal, Brain, X, Check, ArrowRight +} from "lucide-react"; +import { motion, AnimatePresence } from "framer-motion"; // Mock Data const categories = [ @@ -25,16 +30,13 @@ const mockEvents = [ const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; -// Generates a mock calendar grid for a 30-day month starting on a Tuesday const generateCalendarDays = () => { const days = []; - // 1 empty slot for Monday before the 1st days.push({ empty: true, key: "empty-0" }); for (let i = 1; i <= 30; i++) { const events = mockEvents.filter((e) => e.day === i); days.push({ empty: false, day: i, events, isToday: i === 15 }); } - // Fill the rest of the grid (35 total cells for a 5-week view) const remaining = 35 - days.length; for (let i = 1; i <= remaining; i++) { days.push({ empty: true, key: `empty-end-${i}` }); @@ -43,13 +45,53 @@ const generateCalendarDays = () => { }; export default function CalendarPage() { + const [selectedDay, setSelectedDay] = useState(null); + const [isOptimizing, setIsOptimizing] = useState(false); const calendarDays = generateCalendarDays(); + const handleOptimize = () => { + setIsOptimizing(true); + setTimeout(() => setIsOptimizing(false), 2500); + }; + return ( -
+
+ {/* Optimization Overlay */} + + {isOptimizing && ( + + + + +

AI Schedule Optimization

+

Analyzing energy trends and focus blocks...

+
+ +
+ + )} + + {/* Top Header */} -
+

Calendar / Monthly View

@@ -62,7 +104,10 @@ export default function CalendarPage() { className="bg-transparent border-none outline-none text-xs w-48 placeholder:text-muted-foreground/50 text-foreground" />
- @@ -92,15 +137,11 @@ export default function CalendarPage() { {[...Array(30)].map((_, i) => (
{i + 1}
))} -
1
-
2
-
3
-
4
@@ -113,40 +154,35 @@ export default function CalendarPage() {
{categories.map((cat, idx) => ( ))}
- -
-

Shared Context

-
-
- - -
- {/* AI Features */} -
+ {/* AI Optimizer Card */} + +
+ +
-

AI Assistant

+

AI Optimizer

- Based on your energy trends, I suggest moving the UI Review to Thursday afternoon. + Detected focus peak at 10 AM on Thursdays. Suggest moving **UI Review** to maximize alignment.

- -
+
@@ -170,7 +206,7 @@ export default function CalendarPage() {
- {/* Calendar Header (Days) */} + {/* Calendar Header */}
{daysOfWeek.map((day) => (
@@ -182,34 +218,122 @@ export default function CalendarPage() { {/* Calendar Grid */}
{calendarDays.map((cell, idx) => ( -
!cell.empty && setSelectedDay(cell)} + className={`bg-[#0A0710] p-2 flex flex-col gap-1 transition-all cursor-pointer relative group ${cell.empty ? 'opacity-30 pointer-events-none' : ''}`} > {!cell.empty && ( -
+
{cell.day}
)} - {/* Events */}
{cell.events?.map((event, eIdx) => ( -
- {event.time} • {event.title} -
+ {event.title} + ))}
-
+ ))}
-
+ + {/* Quick Entry Sheet */} + + {selectedDay && ( + <> + setSelectedDay(null)} + className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[100]" + /> + +
+
+

May {selectedDay.day}, 2026

+

Daily Schedule Overview

+
+ +
+ +
+
+

+ Scheduled Events +

+
+ {selectedDay.events?.length > 0 ? ( + selectedDay.events.map((event: any, idx: number) => ( +
+
+
+
+
{event.title}
+
{event.time} • {event.type}
+
+
+ +
+ )) + ) : ( +

No events scheduled for this day.

+ )} +
+
+ +
+

Quick Add Event

+
+
+
+ + +
+
+ + +
+
+
+ + +
+ +
+
+
+ + + )} + +
); } diff --git a/app/(dashboard)/clients/page.tsx b/app/(dashboard)/clients/page.tsx new file mode 100644 index 0000000..d11d015 --- /dev/null +++ b/app/(dashboard)/clients/page.tsx @@ -0,0 +1,282 @@ +"use client"; + +import { useState } from "react"; +import { + Plus, Search, User, Mail, Phone, Globe, + MoreHorizontal, MessageSquare, Briefcase, + TrendingUp, Star, Clock, X, ChevronRight, + ArrowUpRight, DollarSign, Brain, Shield, + Activity, CheckCircle2, AlertCircle +} from "lucide-react"; +import { motion, AnimatePresence } from "framer-motion"; + +// Mock Data +const clients = [ + { + id: 1, + name: "Acme Corp", + contact: "John Doe", + email: "john@acme.com", + status: "Active", + value: "$12,400", + projects: 2, + health: "Stable", + lastContact: "2 days ago", + aiInsight: "Excellent relationship. High potential for upsell into the Q3 Marketing Package.", + history: [ + { type: "Meeting", date: "May 12", note: "Q3 Strategy Review" }, + { type: "Payment", date: "May 08", note: "$4,200 received" }, + ] + }, + { + id: 2, + name: "Global Tech", + contact: "Jane Smith", + email: "jane@global.io", + status: "Onboarding", + value: "$8,500", + projects: 1, + health: "Critical", + lastContact: "1 week ago", + aiInsight: "Risk of churn detected. Last communication was 7 days ago. Immediate outreach suggested.", + history: [ + { type: "Proposal", date: "May 01", note: "Infrastructure Scale" }, + ] + }, + { id: 3, name: "Nexus Design", contact: "Mike Ross", email: "mike@nexus.com", status: "Active", value: "$42,000", projects: 4, health: "Growth", lastContact: "Today", aiInsight: "Client is expanding rapidly. Consider offering a dedicated project manager role.", history: [] }, + { id: 4, name: "Stark Ind.", contact: "Pepper P.", email: "pepper@stark.com", status: "Lead", value: "$0", projects: 0, health: "Neutral", lastContact: "May 14", aiInsight: "Warm lead from the Webflow conference. Interested in AI integration.", history: [] }, +]; + +export default function ClientsPage() { + const [selectedClient, setSelectedClient] = useState(null); + + return ( +
+ + {/* Top Header */} +
+
+

+ Network / Strategic Clients +

+
+
+ 12 ACTIVE PARTNERSHIPS +
+
+
+
+ + +
+ +
+
+ + {/* CRM Stats */} +
+ + + +
+
+
+ AI Insight +
+

+ "High churn risk for Global Tech. Immediate outreach suggested." +

+
+
+ + {/* Main Clients List */} +
+
+
+
Partner Entity
+
Relationship
+
Strategic Value
+
Engagement
+
Actions
+
+ +
+ {clients.map((client) => ( + setSelectedClient(client)} + className="grid grid-cols-12 gap-4 p-6 items-center hover:bg-white/[0.02] transition-all group cursor-pointer border-l-2 border-transparent hover:border-primary" + > +
+
+ {client.name.split(' ').map(n => n[0]).join('')} +
+
+
{client.name}
+
{client.contact}
+
+
+ +
+ + {client.health} + +
+ +
+ {client.value} + {client.projects} Active Projects +
+ +
+ {client.lastContact} + Last Touchpoint +
+ +
+ + +
+ + ))} +
+
+
+ + {/* Client Detail Sheet */} + + {selectedClient && ( + <> + setSelectedClient(null)} className="fixed inset-0 bg-black/80 backdrop-blur-md z-[100]" /> + + +
+
+
+ {selectedClient.name.split(' ').map((n: string) => n[0]).join('')} +
+
+

{selectedClient.name}

+
+ {selectedClient.contact} +
+ {selectedClient.email} +
+
+
+ +
+ +
+ + {/* AI Client Pulse */} +
+
+ +
+

+ Client Health Pulse +

+

+ "{selectedClient.aiInsight}" +

+
+ + {/* Key Financials */} +
+
+
LIFETIME VALUE
+
{selectedClient.value}
+
+
+
ACTIVE DELIVERABLES
+
{selectedClient.projects}
+
+
+ + {/* Relationship History */} +
+

Relationship Log

+
+ {selectedClient.history?.length > 0 ? selectedClient.history.map((log: any, i: number) => ( +
+
+
+
+
{log.note}
+
{log.date} • {log.type}
+
+
+
+ )) :

No historical log entries found for this partner.

} +
+
+ + {/* Quick Actions */} +
+

Strategic Actions

+
+ + + + +
+
+ +
+ +
+ +
+ + + )} + + +
+ ); +} + +function ActionButton({ icon: Icon, label }: { icon: any, label: string }) { + return ( + + ); +} + +function ClientStatCard({ label, value, subtext, icon: Icon }: any) { + return ( +
+
+ +
+
+ +
+
+
{label}
+
+ {value} + {subtext} +
+
+
+ ); +} diff --git a/app/(dashboard)/documents/page.tsx b/app/(dashboard)/documents/page.tsx index 49127e7..0e1d9ea 100644 --- a/app/(dashboard)/documents/page.tsx +++ b/app/(dashboard)/documents/page.tsx @@ -1,154 +1,381 @@ "use client"; -import { Plus, Search, Filter, Brain, FileText, Download, MoreHorizontal, FileSpreadsheet, FileIcon, MessageSquare } from "lucide-react"; +import { useState } from "react"; +import { + Plus, Search, FileText, File, Image, Music, Video, + MoreHorizontal, Download, Share2, Trash2, Eye, + Layout, List, Brain, Clock, ChevronRight, X, + Folder, HardDrive, Shield, Cloud, Tag, Info, + Star, Filter, Zap, Globe, ExternalLink, Activity +} from "lucide-react"; +import { motion, AnimatePresence } from "framer-motion"; // Mock Data const documents = [ - { - id: 1, - name: "Q3 Strategy Planning.docx", - type: "word", - size: "2.4 MB", - updated: "2 hours ago", - aiStatus: "Summarized", - aiSummary: "Focuses on user acquisition and shifting marketing budget to TikTok ads. AI extracted 4 key action items." + { + id: 1, + name: "Marketing Strategy 2026.pdf", + type: "PDF", + size: "2.4 MB", + date: "May 10, 2026", + category: "Strategy", + starred: true, + summary: "Comprehensive roadmap for Q3 marketing funnels and ad spend allocation.", + owner: "Sarah J.", + tags: ["Marketing", "Strategy", "Q3"], + aiAnalysis: "This document outlines a 15% increase in digital spend. Key focus is on video-first content." }, - { - id: 2, - name: "Financial_Report_May.xlsx", - type: "excel", - size: "5.1 MB", - updated: "Yesterday", - aiStatus: "Analyzing", - aiSummary: "AI is currently detecting anomalies in the Q2 vs Q3 expense margins." + { + id: 2, + name: "Project Brand Identity.fig", + type: "FIG", + size: "15.8 MB", + date: "May 08, 2026", + category: "Design", + starred: false, + summary: "Core design tokens, typography, and color palette for the Cognis rebrand.", + owner: "Alex R.", + tags: ["Design", "UI", "Branding"], + aiAnalysis: "Identifies 'Cyber-Lavender' as the primary action color. Typography is set to Geist Sans." }, - { - id: 3, - name: "Design_System_Guidelines.pdf", - type: "pdf", - size: "12 MB", - updated: "May 04, 2026", - aiStatus: "Summarized", - aiSummary: "Details the new dark mode color tokens (#0A0710). AI created a searchable index for developers." - }, - { - id: 4, - name: "Client_Feedback_Transcript.txt", - type: "text", - size: "145 KB", - updated: "May 01, 2026", - aiStatus: "Action Required", - aiSummary: "Sentiment analysis is extremely negative regarding the login flow. AI flagged this for urgent review." - } + { id: 3, name: "Client Contracts Bundle.zip", type: "ZIP", size: "4.2 MB", date: "May 05, 2026", category: "Legal", starred: true, summary: "Collection of signed service agreements for the top 5 enterprise clients.", owner: "Emma W.", tags: ["Legal", "Enterprise"] }, + { id: 4, name: "Revenue Forecast Q3.xlsx", type: "XLSX", size: "1.1 MB", date: "May 01, 2026", category: "Finance", starred: false, summary: "Predicted revenue growth based on current subscription trends and churn rates.", owner: "Sarah J.", tags: ["Finance", "Data"] }, + { id: 5, name: "User Research Session 01.mp4", type: "MP4", size: "142 MB", date: "Apr 28, 2026", category: "Research", starred: false, summary: "Interview with primary persona 'Executive Alex' regarding workflow pain points.", owner: "Mike C.", tags: ["Research", "User-Test"] }, +]; + +const storageStats = [ + { label: "Documents", size: "1.2 GB", color: "bg-primary", percentage: 65 }, + { label: "Media", size: "800 MB", color: "bg-blue-500", percentage: 25 }, + { label: "Others", size: "400 MB", color: "bg-white/20", percentage: 10 }, ]; export default function DocumentsPage() { + const [viewMode, setViewMode] = useState<"grid" | "list">("grid"); + const [selectedDoc, setSelectedDoc] = useState(null); + const [activeFolder, setActiveFolder] = useState("All Files"); + return ( -
+
{/* Top Header */} -
-

- Management / Documents -

+
+
+

+ Resources / Documents & Drive +

+
+
+
+ {[1, 2, 3].map(i =>
U{i}
)} +
+ Shared with team +
+
-
- {/* AI Semantic Search Banner */} -
-
- -

Talk to your Workspace

-
-

- The AI has indexed 1,240 documents. Instead of searching by keywords, ask a direct question like "What were the key takeaways from the Q3 Strategy?" -

-
- - -
-
+
+ + {/* Left Sidebar: Navigation & Storage */} +
+ +
+ {["All Files", "Recent", "Starred", "Shared", "Trash"].map(folder => ( + + ))} +
- {/* Document List */} -
- {documents.map((doc) => ( -
- - {/* File Info */} -
-
- {doc.type === 'word' ? : - doc.type === 'excel' ? : - } +
+

Storage Usage

+
+
+ 2.4 GB / 10 GB + 24%
-
-

{doc.name}

-
- {doc.size} - - {doc.updated} +
+ {storageStats.map(stat => ( +
+ ))} +
+
+ {storageStats.map(stat => ( +
+
+
+ {stat.label} +
+ {stat.size} +
+ ))} +
+ +
+
+ +
+
+ +
+
+ +

AI Librarian

+
+

+ "Your 'Legal' folder is 80% redundant. Should I suggest an automated cleanup strategy?" +

+
+
+ + {/* Main Content Area */} +
+ +
+
+
+ + +
+
+
+ {["All", "PDF", "Design", "Media"].map(f => ( + + ))} +
+
+ +
+ +
+ {viewMode === "grid" ? ( +
+ {documents.map((doc) => ( + setSelectedDoc(doc)} + className="bg-[#0A0710] border border-white/5 rounded-sm p-6 flex flex-col group relative overflow-hidden shadow-2xl transition-all hover:border-primary/40 cursor-pointer" + > +
+ + +
+ +
+ +
+
+ +
+
{doc.name}
+
+ +
+ {doc.type} • {doc.size} + + {doc.date.split(',')[0]} +
+
+ + ))} +
+ ) : ( +
+
+
Document Name
+
File Weight
+
Ownership
+
Strategic Date
+
+
+ {documents.map(doc => ( +
setSelectedDoc(doc)} className="grid grid-cols-12 gap-4 p-6 items-center hover:bg-white/[0.02] transition-all group cursor-pointer border-l-2 border-transparent hover:border-primary"> +
+ +
+
{doc.name}
+
+ {doc.category} + {doc.starred && } +
+
+
+
{doc.size}
+
{doc.owner}
+
{doc.date.split(',')[0]}
+
+ ))}
-
- - {/* AI Insight */} -
-
-
- - {doc.aiStatus} -
-

- {doc.aiSummary} -

-
- - {/* Actions */} -
- - - -
- + )}
- ))} +
+ {/* Document Detail Sheet */} + + {selectedDoc && ( + <> + setSelectedDoc(null)} className="fixed inset-0 bg-black/90 backdrop-blur-xl z-[100]" /> + + +
+
+
+
+ +
+
+

{selectedDoc.name}

+
+ {selectedDoc.type} + {selectedDoc.size} + {selectedDoc.starred && } +
+
+
+ +
+ +
+ + {/* AI Summary Section */} +
+
+ +
+

+ Strategic Content Intelligence +

+
+

+ "{selectedDoc.summary}" +

+ {selectedDoc.aiAnalysis && ( +
+
+ High-Level Insight +
+

{selectedDoc.aiAnalysis}

+
+ )} +
+
+ + {/* Metadata & Actions */} +
+
+

File Properties

+
+ + + +
+
+
+

Strategic Tags

+
+ {selectedDoc.tags?.map((tag: string) => ( + + {tag} + + ))} + +
+
+
+ + {/* Connected Ecosystem */} +
+
+

Strategic Ecosystem

+ Linked by AI +
+
+
+
+
+
+
Project: Q3 Expansion
+
Referenced in Section 4.2
+
+
+ +
+
+
+
+
+
Goal: Market Dominance
+
Foundational Resource
+
+
+ +
+
+
+ +
+ +
+ + +
+ + + )} + + +
+ ); +} + +function DocIcon({ type, small = false }: { type: string, small?: boolean }) { + const sizeClass = small ? "h-6 w-6" : "h-14 w-14"; + if (["PDF", "XLSX"].includes(type)) return ; + if (["FIG"].includes(type)) return ; + if (["MP4"].includes(type)) return