refactor: remove proposals, team, and time tracking pages for codebase cleanup
This commit is contained in:
Poyraz Avsever
@@ -1,383 +0,0 @@
|
||||
"use client";
|
||||
|
||||
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: "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: "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 Neta 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: "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<any>(null);
|
||||
const [activeFolder, setActiveFolder] = useState("All Files");
|
||||
|
||||
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 relative">
|
||||
|
||||
{/* Top Header */}
|
||||
<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">Resources</span> / Documents & Drive
|
||||
</h1>
|
||||
<div className="h-4 w-px bg-white/10 hidden md:block" />
|
||||
<div className="hidden md:flex items-center gap-3">
|
||||
<div className="flex -space-x-2">
|
||||
{[1, 2, 3].map(i => <div key={i} className="h-6 w-6 rounded-full border-2 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">Shared with team</span>
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<Search className="h-4 w-4 text-muted-foreground" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search files..."
|
||||
className="bg-transparent border-none outline-none text-xs w-48 placeholder:text-muted-foreground/50 text-foreground font-medium"
|
||||
/>
|
||||
</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" />
|
||||
UPLOAD FILE
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 flex gap-8 min-h-0">
|
||||
|
||||
{/* Left Sidebar: Navigation & Storage */}
|
||||
<div className="hidden xl:flex w-72 flex-col gap-8 shrink-0">
|
||||
|
||||
<div className="space-y-1">
|
||||
{["All Files", "Recent", "Starred", "Shared", "Trash"].map(folder => (
|
||||
<button
|
||||
key={folder}
|
||||
onClick={() => setActiveFolder(folder)}
|
||||
className={`w-full flex items-center justify-between px-4 py-3 rounded-sm text-sm font-bold transition-all border ${activeFolder === folder ? 'bg-primary/5 text-primary border-primary/20 shadow-lg shadow-primary/5' : 'text-muted-foreground hover:bg-white/5 hover:text-foreground border-transparent'}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Folder className={`h-4 w-4 ${activeFolder === folder ? 'text-primary' : 'text-muted-foreground'}`} />
|
||||
{folder}
|
||||
</div>
|
||||
{folder === "Starred" && <Star className="h-3 w-3 fill-primary text-primary" />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-5">
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.3em] text-muted-foreground px-4">Storage Usage</h3>
|
||||
<div className="bg-[#0A0710] border border-white/5 rounded-sm p-5 space-y-4 shadow-xl">
|
||||
<div className="flex justify-between items-end mb-2">
|
||||
<span className="text-[10px] font-black text-foreground uppercase tracking-widest">2.4 GB / 10 GB</span>
|
||||
<span className="text-[10px] font-black text-primary uppercase tracking-widest">24%</span>
|
||||
</div>
|
||||
<div className="h-1.5 w-full bg-white/5 rounded-full overflow-hidden flex">
|
||||
{storageStats.map(stat => (
|
||||
<div key={stat.label} className={`h-full ${stat.color}`} style={{ width: `${stat.percentage}%` }} />
|
||||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-3 pt-2">
|
||||
{storageStats.map(stat => (
|
||||
<div key={stat.label} className="flex justify-between items-center text-[9px] font-bold uppercase tracking-widest">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-1.5 h-1.5 rounded-full ${stat.color}`} />
|
||||
<span className="text-muted-foreground">{stat.label}</span>
|
||||
</div>
|
||||
<span>{stat.size}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button className="w-full bg-white/5 hover:bg-white/10 text-[9px] font-black uppercase tracking-widest py-2 rounded-sm border border-white/5 transition-all mt-2">
|
||||
UPGRADE STORAGE
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-sm border border-primary/20 bg-primary/5 p-6 space-y-4 relative overflow-hidden group shadow-2xl">
|
||||
<div className="absolute -right-4 -top-4 opacity-5 rotate-12 transition-transform group-hover:scale-110">
|
||||
<Brain className="h-20 w-20 text-primary" />
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Brain className="h-4 w-4 text-primary" />
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-primary">AI Librarian</h3>
|
||||
</div>
|
||||
<p className="text-[11px] font-bold text-foreground/80 leading-relaxed italic">
|
||||
"Your 'Legal' folder is 80% redundant. Should I suggest an automated cleanup strategy?"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<div className="flex-1 flex flex-col gap-6 overflow-hidden">
|
||||
|
||||
<div className="flex items-center justify-between shrink-0">
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex items-center gap-2 bg-[#150F1D] border border-white/5 rounded-sm p-0.5 shadow-inner">
|
||||
<button onClick={() => setViewMode("grid")} className={`px-4 py-2 text-[10px] font-black uppercase tracking-widest rounded-sm transition-all flex items-center gap-2 ${viewMode === 'grid' ? 'bg-[#2B2538] text-foreground shadow-lg' : 'text-muted-foreground hover:text-foreground'}`}><Layout className="h-3.5 w-3.5" /> Grid</button>
|
||||
<button onClick={() => setViewMode("list")} className={`px-4 py-2 text-[10px] font-black uppercase tracking-widest rounded-sm transition-all flex items-center gap-2 ${viewMode === 'list' ? 'bg-[#2B2538] text-foreground shadow-lg' : 'text-muted-foreground hover:text-foreground'}`}><List className="h-3.5 w-3.5" /> List</button>
|
||||
</div>
|
||||
<div className="h-6 w-px bg-white/5" />
|
||||
<div className="flex items-center gap-4">
|
||||
{["All", "PDF", "Design", "Media"].map(f => (
|
||||
<button key={f} className="text-[10px] font-black uppercase tracking-widest text-muted-foreground hover:text-primary transition-colors">{f}</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<button className="p-2.5 bg-[#150F1D] border border-white/5 rounded-sm text-muted-foreground hover:text-foreground transition-all">
|
||||
<Filter className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto tiny-scrollbar pr-1">
|
||||
{viewMode === "grid" ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 pb-8">
|
||||
{documents.map((doc) => (
|
||||
<motion.div
|
||||
key={doc.id}
|
||||
whileHover={{ y: -6, scale: 1.02 }}
|
||||
onClick={() => 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"
|
||||
>
|
||||
<div className="absolute top-3 right-3 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-all">
|
||||
<button className="p-1.5 hover:bg-white/10 rounded-sm transition-colors text-muted-foreground"><Star className={`h-3.5 w-3.5 ${doc.starred ? 'fill-primary text-primary' : ''}`} /></button>
|
||||
<button className="p-1.5 hover:bg-white/10 rounded-sm transition-colors text-muted-foreground"><MoreHorizontal className="h-3.5 w-3.5" /></button>
|
||||
</div>
|
||||
|
||||
<div className="aspect-[4/3] bg-[#150F1D] border border-white/5 rounded-sm mb-6 flex items-center justify-center relative overflow-hidden group/thumb shadow-inner">
|
||||
<DocIcon type={doc.type} />
|
||||
<div className="absolute inset-0 bg-primary/5 opacity-0 group-hover/thumb:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<div className="text-[13px] font-black truncate group-hover:text-primary transition-colors tracking-tight">{doc.name}</div>
|
||||
<div className="flex items-center justify-between text-[9px] text-muted-foreground font-black uppercase tracking-[0.2em]">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<div className="w-1 h-1 rounded-full bg-white/20" />
|
||||
{doc.type} • {doc.size}
|
||||
</span>
|
||||
<span>{doc.date.split(',')[0]}</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto bg-[#0A0710] border border-white/5 rounded-sm shadow-2xl mb-8">
|
||||
<div className="min-w-[800px]">
|
||||
<div className="grid grid-cols-12 gap-4 p-5 border-b border-white/5 bg-[#0F0B15]/50 text-[9px] font-black uppercase tracking-[0.3em] text-muted-foreground">
|
||||
<div className="col-span-6 px-2">Document Name</div>
|
||||
<div className="col-span-2">File Weight</div>
|
||||
<div className="col-span-2">Ownership</div>
|
||||
<div className="col-span-2 text-right">Strategic Date</div>
|
||||
</div>
|
||||
<div className="divide-y divide-white/5">
|
||||
{documents.map(doc => (
|
||||
<div key={doc.id} onClick={() => 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">
|
||||
<div className="col-span-6 flex items-center gap-5">
|
||||
<DocIcon type={doc.type} small />
|
||||
<div className="min-w-0">
|
||||
<div className="text-[13px] font-black group-hover:text-primary transition-colors truncate tracking-tight">{doc.name}</div>
|
||||
<div className="flex items-center gap-3 mt-1">
|
||||
<span className="text-[9px] text-muted-foreground uppercase font-black tracking-[0.2em]">{doc.category}</span>
|
||||
{doc.starred && <Star className="h-2.5 w-2.5 fill-primary text-primary" />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-2 text-[11px] text-muted-foreground font-black uppercase tracking-tighter">{doc.size}</div>
|
||||
<div className="col-span-2 text-[11px] text-muted-foreground font-black uppercase tracking-widest">{doc.owner}</div>
|
||||
<div className="col-span-2 text-right text-[11px] text-muted-foreground font-black uppercase tracking-tighter">{doc.date.split(',')[0]}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Document Detail Sheet */}
|
||||
<AnimatePresence>
|
||||
{selectedDoc && (
|
||||
<>
|
||||
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} onClick={() => setSelectedDoc(null)} className="fixed inset-0 bg-black/90 backdrop-blur-xl 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-xl bg-[#0A0710] border-l border-white/10 z-[101] shadow-2xl flex flex-col">
|
||||
|
||||
<div className="p-10 border-b border-white/5 flex items-center justify-between bg-primary/10 relative overflow-hidden">
|
||||
<div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_30%_-20%,rgba(108,91,176,0.15),transparent)] pointer-events-none" />
|
||||
<div className="flex items-center gap-6 relative z-10">
|
||||
<div className="p-4 bg-[#150F1D] border border-white/10 rounded-sm shadow-xl">
|
||||
<DocIcon type={selectedDoc.type} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-black tracking-tighter text-foreground truncate max-w-sm uppercase">{selectedDoc.name}</h2>
|
||||
<div className="flex items-center gap-4 mt-2">
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.2em] bg-primary/20 text-primary px-3 py-1 rounded-sm border border-primary/20 shadow-sm">{selectedDoc.type}</span>
|
||||
<span className="text-[10px] font-black text-muted-foreground uppercase tracking-[0.2em]">{selectedDoc.size}</span>
|
||||
{selectedDoc.starred && <Star className="h-3.5 w-3.5 fill-primary text-primary" />}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={() => setSelectedDoc(null)} className="p-2.5 hover:bg-white/10 rounded-sm text-muted-foreground transition-colors relative z-10"><X className="h-8 w-8" /></button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-10 space-y-12 tiny-scrollbar relative">
|
||||
|
||||
{/* AI Summary Section */}
|
||||
<div className="rounded-sm border border-primary/30 bg-primary/5 p-8 space-y-5 relative overflow-hidden shadow-2xl">
|
||||
<div className="absolute -right-6 -top-6 opacity-10 rotate-12">
|
||||
<Brain className="h-24 w-24 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.3em] text-primary flex items-center gap-2">
|
||||
<Brain className="h-4 w-4" /> Strategic Content Intelligence
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm font-bold text-foreground/90 leading-[1.6] italic tracking-tight">
|
||||
"{selectedDoc.summary}"
|
||||
</p>
|
||||
{selectedDoc.aiAnalysis && (
|
||||
<div className="pt-5 border-t border-primary/20 mt-5">
|
||||
<div className="text-[10px] font-black text-primary uppercase tracking-[0.3em] mb-3 flex items-center gap-2">
|
||||
<Zap className="h-3.5 w-3.5" /> High-Level Insight
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground leading-relaxed font-medium uppercase tracking-wider">{selectedDoc.aiAnalysis}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Metadata & Actions */}
|
||||
<div className="grid grid-cols-2 gap-12">
|
||||
<div className="space-y-5">
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.3em] text-primary">File Properties</h3>
|
||||
<div className="space-y-5">
|
||||
<MetaItem label="AUTHOR" value={selectedDoc.owner} />
|
||||
<MetaItem label="TIMELINE" value={selectedDoc.date} />
|
||||
<MetaItem label="CLASSIF." value={selectedDoc.category} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-5">
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.3em] text-primary">Strategic Tags</h3>
|
||||
<div className="flex flex-wrap gap-2.5">
|
||||
{selectedDoc.tags?.map((tag: string) => (
|
||||
<span key={tag} className="text-[9px] font-black uppercase tracking-[0.2em] px-3 py-1.5 rounded-sm bg-white/5 border border-white/10 text-muted-foreground hover:border-primary hover:text-primary transition-all cursor-pointer">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
<button className="text-[9px] font-black uppercase tracking-[0.2em] px-3 py-1.5 rounded-sm border border-dashed border-white/20 text-muted-foreground hover:border-white/40 transition-colors">
|
||||
+ NEW TAG
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Connected Ecosystem */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.3em] text-primary">Strategic Ecosystem</h3>
|
||||
<span className="text-[9px] font-black text-muted-foreground uppercase tracking-widest">Linked by AI</span>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="p-5 rounded-sm bg-[#150F1D] border border-white/5 flex items-center justify-between group cursor-pointer hover:border-primary/40 transition-all shadow-xl">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-3 bg-primary/10 rounded-sm shadow-inner"><Globe className="h-5 w-5 text-primary" /></div>
|
||||
<div>
|
||||
<div className="text-[11px] font-black uppercase tracking-widest text-foreground">Project: Q3 Expansion</div>
|
||||
<div className="text-[9px] text-muted-foreground uppercase mt-1 font-bold">Referenced in Section 4.2</div>
|
||||
</div>
|
||||
</div>
|
||||
<ExternalLink className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
|
||||
</div>
|
||||
<div className="p-5 rounded-sm bg-[#150F1D] border border-white/5 flex items-center justify-between group cursor-pointer hover:border-primary/40 transition-all shadow-xl">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="p-3 bg-emerald-500/10 rounded-sm shadow-inner"><Activity className="h-5 w-5 text-emerald-500" /></div>
|
||||
<div>
|
||||
<div className="text-[11px] font-black uppercase tracking-widest text-foreground">Goal: Market Dominance</div>
|
||||
<div className="text-[9px] text-muted-foreground uppercase mt-1 font-bold">Foundational Resource</div>
|
||||
</div>
|
||||
</div>
|
||||
<ExternalLink 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/10 bg-[#0F0B15]/60 flex gap-6">
|
||||
<button className="flex-1 bg-primary hover:bg-primary/90 text-primary-foreground py-5 rounded-sm text-[11px] font-black uppercase tracking-[0.3em] shadow-2xl shadow-primary/40 transition-all active:scale-[0.98] flex items-center justify-center gap-3">
|
||||
<Download className="h-5 w-5" /> DOWNLOAD FILE
|
||||
</button>
|
||||
<button className="p-5 border border-white/10 rounded-sm text-muted-foreground hover:bg-white/10 transition-all shadow-xl">
|
||||
<Share2 className="h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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 <FileText className={`${sizeClass} text-rose-500`} />;
|
||||
if (["FIG"].includes(type)) return <File className={`${sizeClass} text-purple-500`} />;
|
||||
if (["MP4"].includes(type)) return <Video className={`${sizeClass} text-blue-500`} />;
|
||||
if (["ZIP"].includes(type)) return <File className={`${sizeClass} text-orange-500`} />;
|
||||
return <File className={`${sizeClass} text-muted-foreground`} />;
|
||||
}
|
||||
|
||||
function MetaItem({ label, value }: { label: string, value: string }) {
|
||||
return (
|
||||
<div className="flex items-center justify-between border-b border-white/5 pb-3">
|
||||
<span className="text-[10px] font-black text-muted-foreground uppercase tracking-[0.2em]">{label}</span>
|
||||
<span className="text-[11px] font-black text-foreground uppercase tracking-tight">{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,199 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Plus, Search, Filter, Brain, Building2, Mail, Phone, MoreHorizontal, ShieldCheck, AlertCircle, ArrowUpRight } from "lucide-react";
|
||||
|
||||
// Mock Data
|
||||
const clients = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Acme Corp",
|
||||
contact: "Alice Johnson",
|
||||
email: "alice@acme.co",
|
||||
status: "Active",
|
||||
ltv: "$45,000",
|
||||
activeProjects: 2,
|
||||
aiSentiment: "Excellent",
|
||||
aiInsight: "Client engagement is at an all-time high. AI suggests pitching the Q4 Marketing Retainer this week."
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Globex Industries",
|
||||
contact: "Mark Smith",
|
||||
email: "msmith@globex.com",
|
||||
status: "At Risk",
|
||||
ltv: "$12,500",
|
||||
activeProjects: 1,
|
||||
aiSentiment: "Frustrated",
|
||||
aiInsight: "Sentiment analysis on recent emails indicates frustration with turnaround times. Schedule a sync ASAP."
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Soylent Corp",
|
||||
contact: "John Doe",
|
||||
email: "john.d@soylent.net",
|
||||
status: "Onboarding",
|
||||
ltv: "$0",
|
||||
activeProjects: 1,
|
||||
aiSentiment: "Neutral",
|
||||
aiInsight: "Awaiting signed NDA. Send an automated reminder tomorrow at 10 AM."
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Initech",
|
||||
contact: "Bill Lumbergh",
|
||||
email: "bill@initech.com",
|
||||
status: "Active",
|
||||
ltv: "$110,000",
|
||||
activeProjects: 3,
|
||||
aiSentiment: "Good",
|
||||
aiInsight: "Consistent payment history. No immediate actions required."
|
||||
}
|
||||
];
|
||||
|
||||
export default function ClientsCRMPage() {
|
||||
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">
|
||||
|
||||
{/* 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">Freelance</span> / Clients CRM
|
||||
</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">
|
||||
<Search className="h-4 w-4 text-muted-foreground" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search clients..."
|
||||
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-4 py-1.5 rounded-sm text-xs font-semibold flex items-center gap-2 transition-colors">
|
||||
<Plus className="h-4 w-4" />
|
||||
NEW CLIENT
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI CRM Intelligence */}
|
||||
<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 Client Intelligence
|
||||
</h3>
|
||||
<p className="text-xs text-foreground/80 leading-relaxed max-w-3xl">
|
||||
You have a high probability (85%) of closing an upsell with <strong>Acme Corp</strong> this month. Their usage of the current product has doubled. Shall I draft a customized proposal highlighting scale benefits?
|
||||
</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">
|
||||
Draft Proposal Draft
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* KPI Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div className="rounded-sm border border-white/5 bg-[#0A0710] p-5">
|
||||
<h4 className="text-[10px] uppercase tracking-wider text-muted-foreground font-bold mb-1">Total Active Clients</h4>
|
||||
<div className="text-3xl font-bold text-foreground">14</div>
|
||||
</div>
|
||||
<div className="rounded-sm border border-white/5 bg-[#0A0710] p-5">
|
||||
<h4 className="text-[10px] uppercase tracking-wider text-muted-foreground font-bold mb-1">Pipeline LTV</h4>
|
||||
<div className="flex items-end gap-2">
|
||||
<div className="text-3xl font-bold text-foreground">$167k</div>
|
||||
<span className="text-xs text-emerald-500 font-medium mb-1.5 flex items-center"><ArrowUpRight className="h-3 w-3" /> +12%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-sm border border-white/5 bg-[#0A0710] p-5">
|
||||
<h4 className="text-[10px] uppercase tracking-wider text-muted-foreground font-bold mb-1">Average Client Health</h4>
|
||||
<div className="flex items-end gap-2">
|
||||
<div className="text-3xl font-bold text-emerald-400">92/100</div>
|
||||
<span className="text-xs text-muted-foreground font-medium mb-1.5">Excellent</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Clients List */}
|
||||
<div className="bg-[#0A0710] rounded-sm border border-white/5 overflow-hidden flex-1">
|
||||
<div className="grid grid-cols-12 gap-4 p-4 border-b border-white/5 bg-[#0F0B15]/50 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
<div className="col-span-3">Client</div>
|
||||
<div className="col-span-2">Status / LTV</div>
|
||||
<div className="col-span-6">AI Relationship Insight</div>
|
||||
<div className="col-span-1 text-right">Actions</div>
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-white/5">
|
||||
{clients.map((client) => (
|
||||
<div key={client.id} className="grid grid-cols-12 gap-4 p-4 items-center hover:bg-white/[0.02] transition-colors group">
|
||||
|
||||
{/* Client Details */}
|
||||
<div className="col-span-3 flex items-start gap-3">
|
||||
<div className="h-8 w-8 rounded-sm bg-[#1F172B] border border-white/10 flex items-center justify-center text-primary mt-0.5 shrink-0">
|
||||
<Building2 className="h-4 w-4" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-bold text-foreground hover:text-primary cursor-pointer transition-colors mb-0.5">
|
||||
{client.name}
|
||||
</div>
|
||||
<div className="text-[10px] text-muted-foreground flex items-center gap-2">
|
||||
<span>{client.contact}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status / LTV */}
|
||||
<div className="col-span-2 flex flex-col items-start gap-1">
|
||||
<span className={`text-[10px] uppercase font-bold px-2 py-0.5 rounded-sm border inline-block ${
|
||||
client.status === 'Active' ? 'bg-blue-500/10 text-blue-400 border-blue-500/20' :
|
||||
client.status === 'At Risk' ? 'bg-red-500/10 text-red-400 border-red-500/20' :
|
||||
'bg-orange-500/10 text-orange-400 border-orange-500/20'
|
||||
}`}>
|
||||
{client.status}
|
||||
</span>
|
||||
<span className="text-xs font-semibold text-foreground pl-1">{client.ltv} <span className="text-[10px] text-muted-foreground font-normal">LTV</span></span>
|
||||
</div>
|
||||
|
||||
{/* AI Insight */}
|
||||
<div className="col-span-6 flex items-start gap-3 bg-[#150F1D]/50 border border-white/5 p-2 rounded-sm relative overflow-hidden">
|
||||
<div className={`absolute left-0 top-0 bottom-0 w-0.5 ${
|
||||
client.aiSentiment === 'Excellent' || client.aiSentiment === 'Good' ? 'bg-emerald-500' :
|
||||
client.aiSentiment === 'Frustrated' ? 'bg-red-500' : 'bg-orange-500'
|
||||
}`}></div>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-1.5 mb-1">
|
||||
<Brain className="h-3 w-3 text-primary" />
|
||||
<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-wider">
|
||||
Sentiment: <span className={
|
||||
client.aiSentiment === 'Excellent' || client.aiSentiment === 'Good' ? 'text-emerald-400' :
|
||||
client.aiSentiment === 'Frustrated' ? 'text-red-400' : 'text-orange-400'
|
||||
}>{client.aiSentiment}</span>
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-foreground/70 leading-snug">
|
||||
{client.aiInsight}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="col-span-1 flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button className="p-1.5 hover:bg-white/10 rounded-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
<Mail className="h-4 w-4" />
|
||||
</button>
|
||||
<button className="p-1.5 hover:bg-white/10 rounded-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,124 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Plus, Brain, FileText, CheckCircle2, Clock, AlertCircle, Eye, PenTool } from "lucide-react";
|
||||
|
||||
// Mock Data
|
||||
const columns = [
|
||||
{
|
||||
title: "Drafting",
|
||||
color: "text-muted-foreground",
|
||||
items: [
|
||||
{ id: 1, client: "Stark Industries", title: "Enterprise Dashboard Redesign", value: "$18,500", date: "May 25", status: "Draft" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "In Review",
|
||||
color: "text-blue-400",
|
||||
items: [
|
||||
{ id: 2, client: "Wayne Enterprises", title: "Mobile App V2 Contract", value: "$32,000", date: "May 10", status: "Review" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Sent / Negotiating",
|
||||
color: "text-orange-400",
|
||||
items: [
|
||||
{ id: 3, client: "Acme Corp", title: "Q3 Marketing Retainer", value: "$4,500/mo", date: "May 05", status: "Sent" },
|
||||
{ id: 4, client: "Globex", title: "SEO Audit Proposal", value: "$2,800", date: "May 02", status: "Viewed 3x" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Signed / Won",
|
||||
color: "text-emerald-400",
|
||||
items: [
|
||||
{ id: 5, client: "Soylent Corp", title: "Brand Identity Guidelines", value: "$15,000", date: "Apr 28", status: "Signed" }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export default function ProposalsPage() {
|
||||
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">
|
||||
|
||||
{/* 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">Freelance</span> / Proposals & Contracts
|
||||
</h1>
|
||||
<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">
|
||||
<Plus className="h-4 w-4" />
|
||||
CREATE PROPOSAL
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI Conversion Optimizer */}
|
||||
<div className="rounded-sm border border-primary/20 bg-[linear-gradient(90deg,rgba(108,91,176,0.1)_0%,rgba(10,7,16,0)_100%)] 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 Conversion Optimizer
|
||||
</h3>
|
||||
<p className="text-xs text-foreground/80 leading-relaxed max-w-3xl">
|
||||
Globex has viewed the "SEO Audit Proposal" 3 times in the last 24 hours. AI indicates high intent. Additionally, historical data shows proposals sent with an <em>interactive pricing table</em> have an 85% higher win rate in your niche.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 shrink-0">
|
||||
<button className="bg-[#150F1D] text-foreground border border-white/10 px-4 py-2 rounded-sm text-xs font-semibold transition-colors">
|
||||
Follow up Globex
|
||||
</button>
|
||||
<button className="bg-primary/20 text-primary hover:bg-primary/30 border border-primary/30 px-4 py-2 rounded-sm text-xs font-semibold transition-colors">
|
||||
Apply Interactive Table Template
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Kanban Board */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 flex-1 min-h-0 pb-6">
|
||||
{columns.map((col, idx) => (
|
||||
<div key={idx} className="flex flex-col bg-white/[0.01] rounded-sm border border-white/5 p-4 overflow-hidden">
|
||||
{/* Column Header */}
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className={`text-xs font-bold uppercase tracking-wider ${col.color}`}>{col.title}</h3>
|
||||
<span className="text-[10px] font-bold bg-[#150F1D] px-2 py-0.5 rounded-sm border border-white/5">{col.items.length}</span>
|
||||
</div>
|
||||
|
||||
{/* Column Cards */}
|
||||
<div className="flex-1 overflow-y-auto tiny-scrollbar space-y-3">
|
||||
{col.items.map((item) => (
|
||||
<div key={item.id} className="bg-[#0A0710] border border-white/5 hover:border-primary/50 transition-colors rounded-sm p-4 cursor-pointer group">
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-wider">{item.client}</span>
|
||||
<FileText className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
</div>
|
||||
<h4 className="text-sm font-semibold text-foreground mb-3 leading-tight group-hover:text-primary transition-colors">{item.title}</h4>
|
||||
|
||||
<div className="flex justify-between items-end">
|
||||
<span className="text-lg font-bold">{item.value}</span>
|
||||
<div className="flex flex-col items-end gap-1">
|
||||
<span className={`text-[10px] flex items-center gap-1 ${
|
||||
item.status === 'Signed' ? 'text-emerald-400' :
|
||||
item.status.includes('Viewed') ? 'text-orange-400' : 'text-muted-foreground'
|
||||
}`}>
|
||||
{item.status === 'Signed' ? <CheckCircle2 className="h-3 w-3" /> :
|
||||
item.status.includes('Viewed') ? <Eye className="h-3 w-3" /> :
|
||||
<Clock className="h-3 w-3" />}
|
||||
{item.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,150 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Play, Pause, Brain, Clock, Plus, Tag, ArrowUpRight, DollarSign, Activity } from "lucide-react";
|
||||
import { Area, AreaChart, ResponsiveContainer, XAxis, Tooltip, CartesianGrid } from "recharts";
|
||||
|
||||
// Mock Data
|
||||
const timeData = [
|
||||
{ day: "Mon", billable: 5, nonBillable: 1 },
|
||||
{ day: "Tue", billable: 6.5, nonBillable: 0.5 },
|
||||
{ day: "Wed", billable: 4, nonBillable: 2 },
|
||||
{ day: "Thu", billable: 7, nonBillable: 1 },
|
||||
{ day: "Fri", billable: 5.5, nonBillable: 1.5 },
|
||||
];
|
||||
|
||||
const timeLogs = [
|
||||
{ id: 1, task: "Database Schema Design", project: "Stark Enterprise App", duration: "02:45:00", date: "Today", billable: true },
|
||||
{ id: 2, client: "Acme Corp", task: "Weekly Sync & Planning", project: "Retainer", duration: "01:00:00", date: "Today", billable: true },
|
||||
{ id: 3, task: "Invoice Generation & Emails", project: "Admin", duration: "00:45:00", date: "Yesterday", billable: false },
|
||||
{ id: 4, task: "Frontend Component Refactor", project: "Stark Enterprise App", duration: "04:15:00", date: "Yesterday", billable: true },
|
||||
];
|
||||
|
||||
export default function TimeTrackingPage() {
|
||||
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">
|
||||
|
||||
{/* 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">Freelance</span> / Time Tracking
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Active Timer & AI Insights Row */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
|
||||
{/* Active Timer Widget */}
|
||||
<div className="rounded-sm border border-primary/30 bg-[#0F0B15] p-6 flex flex-col items-center justify-center relative overflow-hidden shadow-[0_0_30px_rgba(108,91,176,0.15)]">
|
||||
<div className="absolute top-4 left-4 flex items-center gap-2">
|
||||
<span className="relative flex h-3 w-3">
|
||||
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
|
||||
<span className="relative inline-flex rounded-full h-3 w-3 bg-primary"></span>
|
||||
</span>
|
||||
<span className="text-xs font-bold text-primary uppercase tracking-wider">Tracking</span>
|
||||
</div>
|
||||
|
||||
<div className="text-6xl font-black text-foreground font-mono tracking-tight mt-6 mb-4">
|
||||
01<span className="text-muted-foreground/30">:</span>24<span className="text-muted-foreground/30">:</span>56
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-muted-foreground mb-6 text-center">
|
||||
<strong className="text-foreground">Stark Enterprise App</strong><br/>
|
||||
API Route Optimization
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<button className="h-12 w-12 rounded-full bg-red-500/10 border border-red-500/30 flex items-center justify-center text-red-500 hover:bg-red-500/20 transition-colors">
|
||||
<Pause className="h-5 w-5 fill-current" />
|
||||
</button>
|
||||
<button className="h-12 px-6 rounded-full bg-primary hover:bg-primary/90 text-primary-foreground font-bold transition-colors">
|
||||
Submit Time
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI Invoice Suggester */}
|
||||
<div className="lg:col-span-2 rounded-sm border border-white/5 bg-[#0A0710] p-6 flex flex-col justify-between">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Brain className="h-5 w-5 text-primary" />
|
||||
<h3 className="text-sm font-semibold text-primary">AI Invoice Suggester</h3>
|
||||
</div>
|
||||
<p className="text-sm text-foreground/80 leading-relaxed mb-6">
|
||||
You have logged <strong>14.5 unbilled hours</strong> for <strong>Stark Industries</strong> this week. Based on your hourly rate of $120/hr, the unbilled amount is <span className="text-emerald-400 font-bold">$1,740</span>. AI suggests generating an invoice today as their accounting cycle ends on the 15th.
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<button className="bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20 border border-emerald-500/20 px-4 py-2 rounded-sm text-xs font-semibold transition-colors flex items-center gap-2">
|
||||
<DollarSign className="h-4 w-4" />
|
||||
Generate $1,740 Invoice
|
||||
</button>
|
||||
<button className="bg-transparent hover:bg-white/5 text-foreground border border-white/10 px-4 py-2 rounded-sm text-xs font-semibold transition-colors">
|
||||
View Time Report
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 flex-1 min-h-[300px] pb-6">
|
||||
|
||||
{/* Weekly Chart */}
|
||||
<div className="rounded-sm border border-white/5 bg-[#0A0710] p-6 flex flex-col">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">This Week</h3>
|
||||
<span className="text-lg font-bold">28h 00m</span>
|
||||
</div>
|
||||
<div className="flex-1 w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={timeData}>
|
||||
<defs>
|
||||
<linearGradient id="colorBillable" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#6C5BB0" stopOpacity={0.3}/>
|
||||
<stop offset="95%" stopColor="#6C5BB0" stopOpacity={0}/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#ffffff05" />
|
||||
<XAxis dataKey="day" axisLine={false} tickLine={false} tick={{ fontSize: 10, fill: '#8F89A5' }} dy={10} />
|
||||
<Tooltip
|
||||
contentStyle={{ backgroundColor: "#1F172B", border: "none", fontSize: "12px", color: "#FBF9FE", borderRadius: "4px" }}
|
||||
itemStyle={{ color: "#FBF9FE" }}
|
||||
/>
|
||||
<Area type="monotone" dataKey="billable" stroke="#6C5BB0" strokeWidth={2} fillOpacity={1} fill="url(#colorBillable)" />
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Time Logs */}
|
||||
<div className="lg:col-span-2 bg-[#0A0710] rounded-sm border border-white/5 overflow-hidden flex flex-col">
|
||||
<div className="p-4 border-b border-white/5 flex justify-between items-center">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Recent Time Logs</h3>
|
||||
<button className="text-xs text-primary font-medium hover:underline">View All</button>
|
||||
</div>
|
||||
<div className="divide-y divide-white/5 flex-1 overflow-y-auto tiny-scrollbar">
|
||||
{timeLogs.map((log) => (
|
||||
<div key={log.id} className="p-4 flex items-center justify-between hover:bg-white/[0.02] transition-colors group cursor-pointer">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`w-1.5 h-10 rounded-full ${log.billable ? 'bg-primary' : 'bg-muted-foreground/30'}`}></div>
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-foreground mb-0.5">{log.task}</div>
|
||||
<div className="flex items-center gap-2 text-[10px] text-muted-foreground font-medium uppercase tracking-wider">
|
||||
<span className="bg-[#150F1D] px-1.5 py-0.5 rounded-sm border border-white/5">{log.project}</span>
|
||||
<span>{log.date}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-base font-bold font-mono">{log.duration}</div>
|
||||
<button className="p-1.5 hover:bg-white/10 rounded-sm text-muted-foreground hover:text-foreground transition-colors opacity-0 group-hover:opacity-100">
|
||||
<Play className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,294 +0,0 @@
|
||||
"use client";
|
||||
|
||||
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: "100k Monthly Recurring Revenue",
|
||||
category: "Financial",
|
||||
progress: 42,
|
||||
deadline: "Dec 2026",
|
||||
status: "Active",
|
||||
priority: "Critical",
|
||||
milestones: [
|
||||
{ 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: "Launch Neta AI Mobile App",
|
||||
category: "Product",
|
||||
progress: 85,
|
||||
deadline: "May 25, 2026",
|
||||
status: "Active",
|
||||
priority: "High",
|
||||
milestones: [
|
||||
{ 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: "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 pb-12 relative">
|
||||
|
||||
{/* Top Header */}
|
||||
<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">
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* 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'}`} />
|
||||
|
||||
<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 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: Neta 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>
|
||||
);
|
||||
}
|
||||
@@ -1,276 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Plus, Search, Zap, Flame, Calendar, CheckCircle2,
|
||||
Trophy, TrendingUp, Brain, Info, X, MoreHorizontal,
|
||||
ChevronRight, Activity, Clock, BarChart3, Target
|
||||
} from "lucide-react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
// Mock Data
|
||||
const habits = [
|
||||
{ id: 1, name: "Deep Work Block", frequency: "Daily", streak: 12, bestStreak: 24, progress: 85, color: "bg-[#6C5BB0]", icon: Brain, completedDays: [1, 2, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 15] },
|
||||
{ id: 2, name: "7AM Gym Session", frequency: "Mon, Wed, Fri", streak: 4, bestStreak: 8, progress: 60, color: "bg-emerald-500", icon: Activity, completedDays: [1, 3, 5, 8, 10, 12, 15] },
|
||||
{ id: 3, name: "Strategic Reading", frequency: "Daily", streak: 0, bestStreak: 15, progress: 30, color: "bg-blue-500", icon: Zap, completedDays: [1, 2, 3, 4, 10, 11] },
|
||||
{ id: 4, name: "Journaling", frequency: "Daily", streak: 18, bestStreak: 18, progress: 100, color: "bg-orange-500", icon: Target, completedDays: Array.from({length: 15}, (_, i) => i + 1) },
|
||||
];
|
||||
|
||||
export default function HabitsPage() {
|
||||
const [selectedHabit, setSelectedHabit] = 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 pb-12 relative">
|
||||
|
||||
{/* Top Header */}
|
||||
<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">Mindset</span> / Habits & Performance
|
||||
</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-orange-500 bg-orange-500/5 px-3 py-1 rounded-sm border border-orange-500/10">
|
||||
<Flame className="h-3 w-3" /> 18 DAY OVERALL STREAK
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<Search className="h-4 w-4 text-muted-foreground" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search habits..."
|
||||
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 HABIT
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top Stats Overview */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 shrink-0">
|
||||
<div className="bg-[#0A0710] border border-white/5 rounded-sm p-8 flex items-center gap-6 group relative overflow-hidden shadow-2xl">
|
||||
<div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity"><Flame className="h-20 w-20 text-orange-500" /></div>
|
||||
<div className="p-4 bg-orange-500/10 rounded-sm"><Flame className="h-6 w-6 text-orange-500" /></div>
|
||||
<div>
|
||||
<div className="text-[10px] font-black uppercase tracking-widest text-muted-foreground mb-1">Consistency Score</div>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="text-3xl font-black text-foreground tracking-tighter">92%</span>
|
||||
<span className="text-[10px] text-emerald-500 font-bold">+4% vs last week</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-[#0A0710] border border-white/5 rounded-sm p-8 flex items-center gap-6 group relative overflow-hidden shadow-2xl">
|
||||
<div className="absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity"><Trophy className="h-20 w-20 text-primary" /></div>
|
||||
<div className="p-4 bg-primary/10 rounded-sm"><Trophy className="h-6 w-6 text-primary" /></div>
|
||||
<div>
|
||||
<div className="text-[10px] font-black uppercase tracking-widest text-muted-foreground mb-1">Weekly Goals Hit</div>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="text-3xl font-black text-foreground tracking-tighter">14/18</span>
|
||||
<span className="text-[10px] text-muted-foreground font-bold tracking-widest uppercase">Target: 16</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-primary/5 border border-primary/20 rounded-sm p-8 flex flex-col justify-center relative overflow-hidden group">
|
||||
<div className="absolute -right-4 -top-4 opacity-5 rotate-12"><Brain className="h-24 w-24 text-primary" /></div>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<Brain className="h-4 w-4 text-primary" />
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-primary">AI Coach</h3>
|
||||
</div>
|
||||
<p className="text-xs font-bold leading-relaxed text-foreground/80 italic">
|
||||
"Your 'Strategic Reading' is slipping. Consider linking it to your 'Morning Coffee' habit to increase completion by ~40%."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Habits Container */}
|
||||
<div className="flex-1 overflow-y-auto tiny-scrollbar">
|
||||
<div className="grid grid-cols-1 xl:grid-cols-2 gap-8 pb-6">
|
||||
|
||||
{/* Habits Cards */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between px-2">
|
||||
<h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-muted-foreground">Active Disciplines</h3>
|
||||
<button className="text-[10px] font-bold text-muted-foreground hover:text-foreground flex items-center gap-2 uppercase tracking-widest"><Calendar className="h-3.5 w-3.5" /> Monthly View</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{habits.map(habit => (
|
||||
<motion.div
|
||||
key={habit.id}
|
||||
whileHover={{ x: 4 }}
|
||||
onClick={() => setSelectedHabit(habit)}
|
||||
className="bg-[#0A0710] border border-white/5 rounded-sm p-6 flex flex-col gap-6 relative group overflow-hidden shadow-xl cursor-pointer hover:border-primary/30 transition-all"
|
||||
>
|
||||
<div className="flex justify-between items-start relative z-10">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className={`p-3 rounded-sm ${habit.color}/10 text-foreground`}>
|
||||
<habit.icon className="h-6 w-6 text-foreground" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-black group-hover:text-primary transition-colors">{habit.name}</h3>
|
||||
<div className="flex items-center gap-3 mt-1">
|
||||
<span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">{habit.frequency}</span>
|
||||
<div className="w-1 h-1 rounded-full bg-white/20" />
|
||||
<div className="flex items-center gap-1 text-[10px] font-black text-orange-500 uppercase tracking-widest">
|
||||
<Flame className="h-3 w-3" /> {habit.streak} DAY STREAK
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-4 items-center">
|
||||
<div className="text-right">
|
||||
<div className="text-[10px] font-black text-muted-foreground uppercase tracking-widest mb-1">Completion</div>
|
||||
<div className="text-xl font-black">{habit.progress}%</div>
|
||||
</div>
|
||||
<button className="bg-primary hover:bg-primary/90 text-primary-foreground p-3 rounded-sm shadow-xl shadow-primary/20 transition-all active:scale-90">
|
||||
<CheckCircle2 className="h-6 w-6" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mini Heatmap Visualization */}
|
||||
<div className="grid grid-cols-15 gap-1.5 h-3">
|
||||
{Array.from({length: 15}).map((_, i) => {
|
||||
const isCompleted = habit.completedDays.includes(i + 1);
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`rounded-[2px] transition-all ${isCompleted ? habit.color + ' opacity-100 shadow-[0_0_8px_rgba(108,91,176,0.3)]' : 'bg-white/5 opacity-30 hover:opacity-50'}`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Detailed Performance Analytics */}
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between px-2">
|
||||
<h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-muted-foreground">Strategic Insight</h3>
|
||||
<button className="text-[10px] font-bold text-muted-foreground hover:text-foreground uppercase tracking-widest">Full Reports</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-[#0A0710] border border-white/5 rounded-sm p-8 flex flex-col gap-8 h-fit shadow-2xl">
|
||||
<div>
|
||||
<h4 className="text-xs font-black uppercase tracking-widest text-primary mb-4">Weekly Success Rate</h4>
|
||||
<div className="flex items-end justify-between h-40 gap-4">
|
||||
{[45, 65, 30, 85, 95, 70, 80].map((h, i) => (
|
||||
<div key={i} className="flex-1 flex flex-col items-center gap-3 group/bar">
|
||||
<div className="w-full relative">
|
||||
<motion.div
|
||||
initial={{ height: 0 }}
|
||||
animate={{ height: `${h}%` }}
|
||||
transition={{ duration: 1, delay: i * 0.1 }}
|
||||
className={`w-full rounded-sm bg-primary/20 border-t-2 border-primary group-hover/bar:bg-primary/40 transition-all cursor-pointer`}
|
||||
/>
|
||||
</div>
|
||||
<span className="text-[8px] font-black text-muted-foreground uppercase tracking-widest">{["M", "T", "W", "T", "F", "S", "S"][i]}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-8 border-t border-white/5 space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<TrendingUp className="h-5 w-5 text-emerald-500" />
|
||||
<div>
|
||||
<div className="text-xs font-black uppercase tracking-widest">Momentum Building</div>
|
||||
<p className="text-[10px] text-muted-foreground leading-relaxed mt-1">You've maintained a 90%+ completion rate for 4 consecutive days. This is a 12% improvement over last week's performance.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Activity className="h-5 w-5 text-primary" />
|
||||
<div>
|
||||
<div className="text-xs font-black uppercase tracking-widest">Peak Performance Hub</div>
|
||||
<p className="text-[10px] text-muted-foreground leading-relaxed mt-1">Deep Work completion correlates 85% with 7AM Gym sessions. Physical discipline is driving your strategic output.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Habit Detail Sheet */}
|
||||
<AnimatePresence>
|
||||
{selectedHabit && (
|
||||
<>
|
||||
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} onClick={() => setSelectedHabit(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-xl bg-[#0A0710] border-l border-white/5 z-[101] shadow-2xl flex flex-col p-10 space-y-12">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className={`p-5 rounded-sm ${selectedHabit.color}/20 text-foreground`}>
|
||||
<selectedHabit.icon className="h-10 w-10" />
|
||||
</div>
|
||||
<button onClick={() => setSelectedHabit(null)} className="p-2 hover:bg-white/10 rounded-sm text-muted-foreground transition-colors"><X className="h-7 w-7" /></button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-4xl font-black tracking-tighter">{selectedHabit.name}</h2>
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="flex items-center gap-2">
|
||||
<Flame className="h-4 w-4 text-orange-500" />
|
||||
<span className="text-lg font-black text-orange-500">{selectedHabit.streak} DAY STREAK</span>
|
||||
</div>
|
||||
<div className="text-xs font-black text-muted-foreground uppercase tracking-widest border-l border-white/10 pl-5">BEST STREAK: {selectedHabit.bestStreak} DAYS</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8 pt-8 border-t border-white/5">
|
||||
<div>
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-primary mb-6">30-Day Activity Heatmap</h3>
|
||||
<div className="grid grid-cols-10 gap-2">
|
||||
{Array.from({length: 30}).map((_, i) => {
|
||||
const isCompleted = selectedHabit.completedDays.includes(i + 1);
|
||||
return (
|
||||
<div
|
||||
key={i}
|
||||
className={`aspect-square rounded-sm border ${isCompleted ? selectedHabit.color + ' border-transparent shadow-[0_0_12px_rgba(108,91,176,0.2)]' : 'bg-white/5 border-white/5 opacity-20'}`}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="p-6 rounded-sm bg-[#150F1D] border border-white/5 space-y-2">
|
||||
<div className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">FREQUENCY</div>
|
||||
<div className="text-sm font-black text-foreground">{selectedHabit.frequency}</div>
|
||||
</div>
|
||||
<div className="p-6 rounded-sm bg-[#150F1D] border border-white/5 space-y-2">
|
||||
<div className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">MONTHLY SUCCESS</div>
|
||||
<div className="text-sm font-black text-emerald-400">{selectedHabit.progress}%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-sm border border-primary/20 bg-primary/5 p-6 space-y-4">
|
||||
<h3 className="text-[10px] font-black uppercase tracking-widest text-primary flex items-center gap-2">
|
||||
<Zap className="h-3.5 w-3.5" /> Performance Context
|
||||
</h3>
|
||||
<p className="text-xs text-muted-foreground leading-relaxed italic">
|
||||
You've hit this habit {selectedHabit.completedDays.length} times this month. Strategic data suggests that completing this before 10 AM increases your daily task throughput by 12%.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto flex gap-4">
|
||||
<button className="flex-1 bg-primary hover:bg-primary/90 text-primary-foreground py-4 rounded-sm text-[11px] font-black uppercase tracking-widest shadow-2xl shadow-primary/30 transition-all active:scale-[0.98]">
|
||||
MARK AS COMPLETED TODAY
|
||||
</button>
|
||||
<button className="p-4 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>
|
||||
);
|
||||
}
|
||||
@@ -1,302 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Plus, Search, FileText, FileCheck, Clock, Shield,
|
||||
MoreHorizontal, Download, Share2, Eye, Brain,
|
||||
ChevronRight, ArrowRight, X, CheckCircle2,
|
||||
AlertCircle, DollarSign, PenTool, Send, Layout, List
|
||||
} from "lucide-react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
|
||||
// Mock Data
|
||||
const proposals = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Enterprise AI Integration",
|
||||
client: "Acme Corp",
|
||||
value: "$42,000",
|
||||
status: "Sent",
|
||||
date: "May 15",
|
||||
health: "Warm",
|
||||
aiInsight: "92% probability of closing based on recent meeting sentiment analysis.",
|
||||
details: "Full stack AI integration including LLM deployment and custom data pipelines."
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Cloud Infrastructure Audit",
|
||||
client: "Global Tech",
|
||||
value: "$12,500",
|
||||
status: "Negotiation",
|
||||
date: "May 12",
|
||||
health: "Critical",
|
||||
aiInsight: "Client is questioning the pricing on Clause 4.2. Suggesting a 5% bundle discount.",
|
||||
details: "Security audit and scalability roadmap for the AWS infrastructure."
|
||||
},
|
||||
{ id: 3, title: "Design System Revamp", client: "Nexus Design", value: "$8,200", status: "Signed", date: "May 08", health: "Secure", aiInsight: "", details: "" },
|
||||
{ id: 4, title: "Mobile App Retainer", client: "Stark Ind.", value: "$5,000/mo", status: "Draft", date: "May 20", health: "Lead", aiInsight: "", details: "" },
|
||||
];
|
||||
|
||||
export default function ProposalsPage() {
|
||||
const [selectedProposal, setSelectedProposal] = useState<any>(null);
|
||||
const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
|
||||
|
||||
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 relative">
|
||||
|
||||
{/* Top Header */}
|
||||
<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">Business</span> / Proposals & Contracts
|
||||
</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">
|
||||
<FileCheck className="h-3 w-3" /> 8 SIGNED CONTRACTS
|
||||
</div>
|
||||
</div>
|
||||
<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">
|
||||
<Search className="h-4 w-4 text-muted-foreground" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search proposals..."
|
||||
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 PROPOSAL
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lifecycle Status Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 shrink-0">
|
||||
<StatusCard label="Drafts" count={2} color="text-muted-foreground" icon={PenTool} />
|
||||
<StatusCard label="Out for Review" count={3} color="text-blue-500" icon={Send} />
|
||||
<StatusCard label="Negotiation" count={1} color="text-orange-500" icon={Clock} />
|
||||
<StatusCard label="Active Contracts" count={8} color="text-emerald-500" icon={Shield} />
|
||||
</div>
|
||||
|
||||
{/* Main Container */}
|
||||
<div className="flex-1 flex flex-col gap-6 overflow-hidden">
|
||||
|
||||
<div className="flex items-center justify-between shrink-0">
|
||||
<div className="flex items-center gap-2 bg-[#150F1D] border border-white/5 rounded-sm p-0.5">
|
||||
<button onClick={() => setViewMode("grid")} className={`px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest rounded-sm transition-all flex items-center gap-2 ${viewMode === 'grid' ? 'bg-[#2B2538] text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}><Layout className="h-3 w-3" /> Grid</button>
|
||||
<button onClick={() => setViewMode("list")} className={`px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest rounded-sm transition-all flex items-center gap-2 ${viewMode === 'list' ? 'bg-[#2B2538] text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}><List className="h-3 w-3" /> List</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-[10px] font-black uppercase tracking-widest text-muted-foreground">
|
||||
<span>Sort by: Latest</span>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto tiny-scrollbar pr-1">
|
||||
{viewMode === "grid" ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 pb-6">
|
||||
{proposals.map((prop) => (
|
||||
<motion.div
|
||||
key={prop.id}
|
||||
whileHover={{ y: -4 }}
|
||||
onClick={() => setSelectedProposal(prop)}
|
||||
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-5 blur-3xl rounded-full ${prop.status === 'Signed' ? 'bg-emerald-500' : 'bg-primary'}`} />
|
||||
|
||||
<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-[9px] font-black uppercase tracking-widest px-2 py-0.5 rounded-sm border ${
|
||||
prop.status === 'Signed' ? 'text-emerald-400 border-emerald-500/20 bg-emerald-500/5' :
|
||||
prop.status === 'Negotiation' ? 'text-orange-400 border-orange-500/20 bg-orange-500/5' : 'text-blue-400 border-blue-500/20 bg-blue-500/5'
|
||||
}`}>
|
||||
{prop.status}
|
||||
</span>
|
||||
<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">{prop.client}</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-black tracking-tighter group-hover:text-primary transition-colors">{prop.title}</h3>
|
||||
</div>
|
||||
<FileText className="h-6 w-6 text-muted-foreground/30 group-hover:text-primary/50 transition-colors" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 relative z-10">
|
||||
<div className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">Contract Value</div>
|
||||
<div className="text-2xl font-black text-foreground">{prop.value}</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-2">
|
||||
<Clock className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">Updated {prop.date}</span>
|
||||
</div>
|
||||
<div className={`text-[9px] font-black uppercase tracking-widest flex items-center gap-1 ${
|
||||
prop.health === 'Secure' ? 'text-emerald-400' : prop.health === 'Critical' ? 'text-rose-400' : 'text-primary'
|
||||
}`}>
|
||||
{prop.health} PULSE
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-[#0A0710] border border-white/5 rounded-sm overflow-hidden shadow-2xl">
|
||||
<div className="grid grid-cols-12 gap-4 p-5 border-b border-white/5 bg-[#0F0B15]/50 text-[10px] font-black uppercase tracking-[0.3em] text-muted-foreground">
|
||||
<div className="col-span-4 px-2">Document Title</div>
|
||||
<div className="col-span-2">Client</div>
|
||||
<div className="col-span-2">Lifecycle</div>
|
||||
<div className="col-span-2">Value</div>
|
||||
<div className="col-span-2 text-right">Actions</div>
|
||||
</div>
|
||||
<div className="divide-y divide-white/5">
|
||||
{proposals.map(prop => (
|
||||
<div key={prop.id} onClick={() => setSelectedProposal(prop)} className="grid grid-cols-12 gap-4 p-6 items-center hover:bg-white/[0.02] transition-all group cursor-pointer">
|
||||
<div className="col-span-4 flex items-center gap-4">
|
||||
<div className="h-8 w-8 rounded-sm bg-white/5 flex items-center justify-center"><FileText className="h-4 w-4 text-muted-foreground" /></div>
|
||||
<span className="text-sm font-black group-hover:text-primary transition-colors">{prop.title}</span>
|
||||
</div>
|
||||
<div className="col-span-2 text-xs font-bold text-muted-foreground uppercase">{prop.client}</div>
|
||||
<div className="col-span-2">
|
||||
<span className={`text-[9px] font-black uppercase tracking-widest px-2 py-0.5 rounded-sm border ${prop.status === 'Signed' ? 'text-emerald-400 border-emerald-500/20' : 'text-primary border-primary/20'}`}>
|
||||
{prop.status}
|
||||
</span>
|
||||
</div>
|
||||
<div className="col-span-2 text-sm font-black text-foreground">{prop.value}</div>
|
||||
<div className="col-span-2 flex justify-end opacity-0 group-hover:opacity-100 transition-all">
|
||||
<button className="p-2 hover:bg-white/10 rounded-sm text-muted-foreground"><MoreHorizontal className="h-4 w-4" /></button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Proposal Detail Sheet */}
|
||||
<AnimatePresence>
|
||||
{selectedProposal && (
|
||||
<>
|
||||
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} onClick={() => setSelectedProposal(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 text-primary border border-primary/20 px-2 py-0.5 rounded-sm">{selectedProposal.status}</span>
|
||||
<span className="text-[10px] font-bold text-muted-foreground uppercase tracking-widest">{selectedProposal.client}</span>
|
||||
</div>
|
||||
<h2 className="text-3xl font-black tracking-tighter text-foreground">{selectedProposal.title}</h2>
|
||||
</div>
|
||||
<button onClick={() => setSelectedProposal(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">
|
||||
|
||||
{/* AI Closing Probability */}
|
||||
{selectedProposal.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" /> AI Strategic Analysis
|
||||
</h3>
|
||||
<p className="text-sm font-medium text-foreground/90 leading-relaxed italic">
|
||||
"{selectedProposal.aiInsight}"
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Key Details */}
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
<div className="bg-[#150F1D] border border-white/5 rounded-sm p-6 space-y-2">
|
||||
<div className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">CONTRACT VALUE</div>
|
||||
<div className="text-2xl font-black text-primary">{selectedProposal.value}</div>
|
||||
</div>
|
||||
<div className="bg-[#150F1D] border border-white/5 rounded-sm p-6 space-y-2">
|
||||
<div className="text-[10px] font-black text-muted-foreground uppercase tracking-widest">RELATIONSHIP HEALTH</div>
|
||||
<div className="text-2xl font-black text-foreground">{selectedProposal.health}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lifecycle Roadmap */}
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-primary">Engagement History</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">
|
||||
<HistoryItem title="Proposal Draft Created" date="May 10" status="Done" />
|
||||
<HistoryItem title="Initial Review with Client" date="May 12" status="Done" />
|
||||
<HistoryItem title="Current State: Negotiation" date="Now" status="Active" />
|
||||
<HistoryItem title="Pending: Final Approval" date="TBD" status="Upcoming" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className="space-y-6 pt-6 border-t border-white/5">
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-primary">Contractual Controls</h3>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<ControlBtn icon={Download} label="Export PDF" />
|
||||
<ControlBtn icon={Share2} label="Secure Share" />
|
||||
<ControlBtn icon={Eye} label="Client Preview" />
|
||||
<ControlBtn icon={Shield} label="Verify Sig." />
|
||||
</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] flex items-center justify-center gap-3">
|
||||
<Send className="h-5 w-5" /> SEND REVISED PROPOSAL
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function HistoryItem({ title, date, status }: any) {
|
||||
return (
|
||||
<div className="relative group">
|
||||
<div className={`absolute -left-[23px] top-1 h-3 w-3 rounded-full border-2 border-[#0A0710] z-10 ${
|
||||
status === 'Done' ? 'bg-emerald-500' : status === 'Active' ? 'bg-primary' : 'bg-white/10'
|
||||
}`} />
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<div className="text-sm font-bold group-hover:text-primary transition-colors">{title}</div>
|
||||
<div className="text-[10px] text-muted-foreground mt-1 uppercase font-medium">{date}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ControlBtn({ icon: Icon, label }: any) {
|
||||
return (
|
||||
<button className="p-4 rounded-sm bg-[#150F1D] border border-white/5 flex items-center gap-3 group hover:border-primary/20 transition-all">
|
||||
<Icon className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" />
|
||||
<span className="text-[10px] font-black text-muted-foreground uppercase tracking-widest group-hover:text-foreground">{label}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusCard({ 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>
|
||||
);
|
||||
}
|
||||
@@ -1,165 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Plus, Search, Filter, Brain, MoreVertical, Mail, Activity, ArrowUpRight } from "lucide-react";
|
||||
|
||||
// Mock Data
|
||||
const teamMembers = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Sarah Jenkins",
|
||||
role: "Lead Designer",
|
||||
capacity: 95,
|
||||
status: "Overloaded",
|
||||
aiInsight: "Sarah is operating at 95% capacity. AI suggests delaying non-critical UI reviews."
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Alex Rivera",
|
||||
role: "Frontend Engineer",
|
||||
capacity: 60,
|
||||
status: "Optimal",
|
||||
aiInsight: "Alex has high availability. Perfect candidate for the Q3 Marketing Site bottleneck."
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Michael Chen",
|
||||
role: "Backend Engineer",
|
||||
capacity: 85,
|
||||
status: "Busy",
|
||||
aiInsight: "Consistent high output. AI predicts 100% sprint completion."
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Emma Watson",
|
||||
role: "Product Manager",
|
||||
capacity: 75,
|
||||
status: "Optimal",
|
||||
aiInsight: "Meetings occupy 60% of Emma's time. AI recommends a no-meeting day on Thursdays."
|
||||
}
|
||||
];
|
||||
|
||||
export default function TeamPage() {
|
||||
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">
|
||||
|
||||
{/* 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">Management</span> / Team Directory
|
||||
</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">
|
||||
<Search className="h-4 w-4 text-muted-foreground" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search team..."
|
||||
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-4 py-1.5 rounded-sm text-xs font-semibold flex items-center gap-2 transition-colors">
|
||||
<Plus className="h-4 w-4" />
|
||||
INVITE MEMBER
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI Team Analytics */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="rounded-sm border border-primary/20 bg-primary/5 p-6 lg:col-span-2 flex items-center gap-6">
|
||||
<div className="p-4 bg-primary/10 rounded-full">
|
||||
<Brain className="h-8 w-8 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-primary mb-2 flex items-center gap-2">
|
||||
AI Team Optimizer
|
||||
</h3>
|
||||
<p className="text-xs text-foreground/80 leading-relaxed">
|
||||
Overall team velocity is up 14% this month. However, design resources are critically low.
|
||||
<strong> Sarah Jenkins</strong> is at high risk of burnout. Would you like me to draft a capacity redistribution plan?
|
||||
</p>
|
||||
<button className="mt-3 bg-primary hover:bg-primary/90 text-primary-foreground px-4 py-1.5 rounded-sm text-xs font-semibold transition-colors">
|
||||
Generate Reallocation Plan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-sm border border-white/5 bg-[#0A0710] p-6 flex flex-col justify-center">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-4">Team Health Score</h3>
|
||||
<div className="flex items-end gap-3 mb-2">
|
||||
<span className="text-5xl font-bold text-emerald-400">8.4</span>
|
||||
<span className="text-xs text-emerald-500 flex items-center font-medium mb-1">
|
||||
<ArrowUpRight className="h-3 w-3 mr-0.5" /> 0.3
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-[11px] text-muted-foreground">Calculated by AI based on velocity and load</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Team Roster */}
|
||||
<div className="bg-[#0A0710] rounded-sm border border-white/5 overflow-hidden">
|
||||
<div className="grid grid-cols-12 gap-4 p-4 border-b border-white/5 bg-[#0F0B15]/50 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
<div className="col-span-4">Member</div>
|
||||
<div className="col-span-3">Capacity / Status</div>
|
||||
<div className="col-span-4">AI Insight</div>
|
||||
<div className="col-span-1 text-right">Actions</div>
|
||||
</div>
|
||||
|
||||
<div className="divide-y divide-white/5">
|
||||
{teamMembers.map((member) => (
|
||||
<div key={member.id} className="grid grid-cols-12 gap-4 p-4 items-center hover:bg-white/[0.02] transition-colors group">
|
||||
{/* Member Info */}
|
||||
<div className="col-span-4 flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-sm bg-[#1F172B] border border-white/10 flex items-center justify-center font-bold text-primary">
|
||||
{member.name.split(' ').map(n => n[0]).join('')}
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium">{member.name}</div>
|
||||
<div className="text-xs text-muted-foreground">{member.role}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Capacity */}
|
||||
<div className="col-span-3">
|
||||
<div className="flex items-center gap-2 mb-1.5">
|
||||
<div className="flex-1 h-1.5 bg-white/5 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={`h-full rounded-full ${member.capacity > 85 ? 'bg-red-500' : member.capacity > 65 ? 'bg-orange-500' : 'bg-emerald-500'}`}
|
||||
style={{ width: `${member.capacity}%` }}
|
||||
></div>
|
||||
</div>
|
||||
<span className="text-xs font-bold w-8 text-right">{member.capacity}%</span>
|
||||
</div>
|
||||
<span className={`text-[10px] uppercase font-bold px-1.5 py-0.5 rounded-sm border inline-block ${
|
||||
member.status === 'Overloaded' ? 'bg-red-500/10 text-red-400 border-red-500/20' :
|
||||
member.status === 'Busy' ? 'bg-orange-500/10 text-orange-400 border-orange-500/20' :
|
||||
'bg-emerald-500/10 text-emerald-400 border-emerald-500/20'
|
||||
}`}>
|
||||
{member.status}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* AI Insight */}
|
||||
<div className="col-span-4 flex items-start gap-2">
|
||||
<Brain className="h-4 w-4 text-primary shrink-0 mt-0.5" />
|
||||
<p className="text-[11px] text-muted-foreground leading-tight">
|
||||
{member.aiInsight}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="col-span-1 flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button className="p-1.5 hover:bg-white/10 rounded-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
<Mail className="h-4 w-4" />
|
||||
</button>
|
||||
<button className="p-1.5 hover:bg-white/10 rounded-sm text-muted-foreground hover:text-foreground transition-colors">
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,251 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Play, Pause, Square, Plus, Search, Clock,
|
||||
BarChart3, Calendar, MoreHorizontal, X,
|
||||
CheckCircle2, AlertCircle, Brain, Zap,
|
||||
TrendingUp, Activity, Briefcase, User, ArrowRight
|
||||
} from "lucide-react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import {
|
||||
ResponsiveContainer, PieChart, Pie, Cell, Tooltip,
|
||||
BarChart, Bar, XAxis, YAxis, CartesianGrid
|
||||
} from "recharts";
|
||||
|
||||
// Mock Data
|
||||
const todayTimeData = [
|
||||
{ name: "Deep Work", value: 240, color: "#6C5BB0" },
|
||||
{ name: "Meetings", value: 90, color: "#a798e8" },
|
||||
{ name: "Learning", value: 45, color: "#10b981" },
|
||||
{ name: "Admin", value: 30, color: "#3b82f6" },
|
||||
];
|
||||
|
||||
const weeklyTimeData = [
|
||||
{ day: "Mon", hours: 8.5 },
|
||||
{ day: "Tue", hours: 7.2 },
|
||||
{ day: "Wed", hours: 9.0 },
|
||||
{ day: "Thu", hours: 6.5 },
|
||||
{ day: "Fri", hours: 8.0 },
|
||||
{ day: "Sat", hours: 2.5 },
|
||||
{ day: "Sun", hours: 0 },
|
||||
];
|
||||
|
||||
const recentLogs = [
|
||||
{ id: 1, task: "Database Migration Script", project: "Infrastructure", duration: "2h 15m", date: "Today, 10:30 AM", type: "Deep Work" },
|
||||
{ id: 2, task: "UI Review & Polish", project: "Marketing Site", duration: "1h 45m", date: "Today, 02:00 PM", type: "Creative" },
|
||||
{ id: 3, task: "Client Strategy Sync", project: "Acme Corp", duration: "1h 00m", date: "Yesterday", type: "Meeting" },
|
||||
{ id: 4, task: "Security Audit", project: "Infrastructure", duration: "3h 30m", date: "Yesterday", type: "Deep Work" },
|
||||
];
|
||||
|
||||
export default function TimeTrackingPage() {
|
||||
const [isActive, setIsActive] = useState(false);
|
||||
const [seconds, setSeconds] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
let interval: any = null;
|
||||
if (isActive) {
|
||||
interval = setInterval(() => {
|
||||
setSeconds((s) => s + 1);
|
||||
}, 1000);
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
}
|
||||
return () => clearInterval(interval);
|
||||
}, [isActive]);
|
||||
|
||||
const formatTime = (totalSeconds: number) => {
|
||||
const h = Math.floor(totalSeconds / 3600);
|
||||
const m = Math.floor((totalSeconds % 3600) / 60);
|
||||
const s = totalSeconds % 60;
|
||||
return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
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 relative">
|
||||
|
||||
{/* Top Header */}
|
||||
<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">Performance</span> / Time Intelligence
|
||||
</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">
|
||||
<Clock className="h-3 w-3" /> 38.5 HOURS LOGGED THIS WEEK
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<button className="bg-[#150F1D] hover:bg-white/5 text-foreground border border-white/10 px-4 py-1.5 rounded-sm text-xs font-bold tracking-widest flex items-center gap-2 transition-all">
|
||||
<Plus className="h-4 w-4" />
|
||||
MANUAL LOG
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content Grid */}
|
||||
<div className="grid grid-cols-1 xl:grid-cols-3 gap-8 flex-1 min-h-0">
|
||||
|
||||
{/* Left: Active Timer & Recent Logs */}
|
||||
<div className="xl:col-span-2 flex flex-col gap-8 overflow-hidden">
|
||||
|
||||
{/* Active Timer Attraction */}
|
||||
<div className="bg-[#0A0710] border border-white/5 rounded-sm p-10 flex flex-col items-center justify-center relative overflow-hidden shadow-2xl group">
|
||||
<div className={`absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(108,91,176,0.05),transparent)] transition-opacity ${isActive ? 'opacity-100' : 'opacity-0'}`} />
|
||||
|
||||
<div className="flex flex-col items-center gap-8 relative z-10 w-full max-w-md">
|
||||
<div className="text-center space-y-2">
|
||||
<div className="text-[10px] font-black uppercase tracking-[0.4em] text-primary animate-pulse">Current Focus Block</div>
|
||||
<h2 className="text-6xl font-black tracking-tighter tabular-nums text-foreground">{formatTime(seconds)}</h2>
|
||||
</div>
|
||||
|
||||
<div className="w-full space-y-4">
|
||||
<div className="flex items-center gap-4 bg-[#150F1D] border border-white/10 rounded-sm px-6 py-4">
|
||||
<div className="p-2 bg-primary/10 rounded-sm"><Briefcase className="h-4 w-4 text-primary" /></div>
|
||||
<div className="flex-1">
|
||||
<div className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">Project</div>
|
||||
<div className="text-sm font-bold">Marketing Site Redesign</div>
|
||||
</div>
|
||||
<div className="h-8 w-px bg-white/5" />
|
||||
<div className="flex-1 text-right">
|
||||
<div className="text-[10px] font-black uppercase tracking-widest text-muted-foreground">Task</div>
|
||||
<div className="text-sm font-bold truncate">UI Audit & Review</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={() => setIsActive(!isActive)}
|
||||
className={`flex-1 flex items-center justify-center gap-3 py-4 rounded-sm text-sm font-black uppercase tracking-widest transition-all shadow-xl ${isActive ? 'bg-orange-500/10 text-orange-500 border border-orange-500/20' : 'bg-primary text-primary-foreground shadow-primary/20'}`}
|
||||
>
|
||||
{isActive ? <><Pause className="h-5 w-5" /> PAUSE TIMER</> : <><Play className="h-5 w-5" /> START FOCUS</>}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {setIsActive(false); setSeconds(0);}}
|
||||
className="px-8 bg-white/5 border border-white/10 text-muted-foreground hover:bg-white/10 transition-all rounded-sm"
|
||||
>
|
||||
<Square className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent Logs Table */}
|
||||
<div className="bg-[#0A0710] border border-white/5 rounded-sm flex-1 flex flex-col overflow-hidden shadow-2xl">
|
||||
<div className="p-6 border-b border-white/5 bg-[#0F0B15]/40 flex justify-between items-center">
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.3em] text-muted-foreground">Today's Activity Ledger</h3>
|
||||
<button className="text-[10px] font-bold text-primary uppercase tracking-widest">Full History</button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto overflow-x-auto tiny-scrollbar">
|
||||
<div className="min-w-[600px] divide-y divide-white/5">
|
||||
{recentLogs.map(log => (
|
||||
<div key={log.id} className="grid grid-cols-12 gap-4 p-5 items-center hover:bg-white/[0.02] transition-all group">
|
||||
<div className="col-span-5 flex items-center gap-4">
|
||||
<div className="h-10 w-10 rounded-sm bg-white/5 flex items-center justify-center"><Clock className="h-5 w-5 text-muted-foreground group-hover:text-primary transition-colors" /></div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-sm font-black truncate">{log.task}</div>
|
||||
<div className="text-[9px] text-muted-foreground font-bold uppercase tracking-widest mt-1">{log.project} • {log.type}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-3 text-xs font-black text-muted-foreground uppercase">{log.date}</div>
|
||||
<div className="col-span-2 text-sm font-black text-foreground">{log.duration}</div>
|
||||
<div className="col-span-2 flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-all">
|
||||
<button className="p-2 hover:bg-white/10 rounded-sm text-muted-foreground"><MoreHorizontal className="h-4 w-4" /></button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Analytics & AI */}
|
||||
<div className="flex flex-col gap-8">
|
||||
|
||||
{/* Daily Distribution Chart */}
|
||||
<div className="bg-[#0A0710] border border-white/5 rounded-sm p-8 flex flex-col shadow-2xl">
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.3em] text-muted-foreground mb-8">Daily Distribution</h3>
|
||||
<div className="h-48 w-full flex items-center justify-center">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={todayTimeData}
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
innerRadius={50}
|
||||
outerRadius={80}
|
||||
paddingAngle={4}
|
||||
dataKey="value"
|
||||
stroke="none"
|
||||
>
|
||||
{todayTimeData.map((entry, index) => (
|
||||
<Cell key={index} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip contentStyle={{ backgroundColor: "#150F1D", border: "none" }} />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<div className="mt-8 space-y-3">
|
||||
{todayTimeData.map(item => (
|
||||
<div key={item.name} className="flex justify-between items-center text-[10px] font-black uppercase tracking-widest">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-2 h-2 rounded-full" style={{ backgroundColor: item.color }} />
|
||||
<span className="text-muted-foreground">{item.name}</span>
|
||||
</div>
|
||||
<span>{Math.floor(item.value / 60)}h {item.value % 60}m</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI Productivity Pulse */}
|
||||
<div className="bg-primary/5 border border-primary/20 rounded-sm p-8 flex flex-col gap-6 relative overflow-hidden group">
|
||||
<div className="absolute -right-4 -top-4 opacity-5 rotate-12 transition-transform group-hover:scale-110">
|
||||
<Brain className="h-24 w-24 text-primary" />
|
||||
</div>
|
||||
<div className="space-y-4 relative z-10">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-primary/20 rounded-sm shadow-inner"><Brain className="h-4 w-4 text-primary" /></div>
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.2em] text-primary">Focus Analysis</h3>
|
||||
</div>
|
||||
<p className="text-sm font-bold leading-relaxed text-foreground/90 italic">
|
||||
"Your deep work output is highest between 9:00 AM and 11:30 AM. Weekly burnout risk is Low (12%). Strategic momentum is positive."
|
||||
</p>
|
||||
</div>
|
||||
<button className="text-[10px] font-black text-primary uppercase tracking-widest flex items-center gap-2 group/btn border-b border-primary/20 pb-1 self-start hover:border-primary transition-all">
|
||||
VIEW BURN RATE <ArrowRight className="h-3 w-3 group-hover/btn:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Weekly Summary Stat */}
|
||||
<div className="bg-[#0A0710] border border-white/5 rounded-sm p-8 flex flex-col gap-6 shadow-2xl">
|
||||
<h3 className="text-[10px] font-black uppercase tracking-[0.3em] text-muted-foreground">Weekly Performance</h3>
|
||||
<div className="h-32 w-full">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart data={weeklyTimeData}>
|
||||
<Bar dataKey="hours" fill="#6C5BB0" radius={[2, 2, 0, 0]} />
|
||||
<Tooltip cursor={{ fill: '#ffffff05' }} contentStyle={{ backgroundColor: "#150F1D", border: "none" }} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<div className="flex justify-between items-end">
|
||||
<div>
|
||||
<div className="text-[10px] font-black uppercase tracking-widest text-muted-foreground mb-1">Average / Day</div>
|
||||
<div className="text-2xl font-black">7.4h</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-emerald-500 flex items-center gap-1 text-[10px] font-black uppercase tracking-widest">
|
||||
<TrendingUp className="h-3 w-3" /> +12% VS LAST WEEK
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user