feat: add dashboard pages for documents, projects, and team management with AI-powered insights
This commit is contained in:
Poyraz Avsever
@@ -1,17 +1,154 @@
|
||||
"use client";
|
||||
|
||||
import { Plus, Search, Filter, Brain, FileText, Download, MoreHorizontal, FileSpreadsheet, FileIcon, MessageSquare } from "lucide-react";
|
||||
|
||||
// Mock Data
|
||||
const documents = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Q3 Strategy Planning.docx",
|
||||
type: "word",
|
||||
size: "2.4 MB",
|
||||
updated: "2 hours ago",
|
||||
aiStatus: "Summarized",
|
||||
aiSummary: "Focuses on user acquisition and shifting marketing budget to TikTok ads. AI extracted 4 key action items."
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Financial_Report_May.xlsx",
|
||||
type: "excel",
|
||||
size: "5.1 MB",
|
||||
updated: "Yesterday",
|
||||
aiStatus: "Analyzing",
|
||||
aiSummary: "AI is currently detecting anomalies in the Q2 vs Q3 expense margins."
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Design_System_Guidelines.pdf",
|
||||
type: "pdf",
|
||||
size: "12 MB",
|
||||
updated: "May 04, 2026",
|
||||
aiStatus: "Summarized",
|
||||
aiSummary: "Details the new dark mode color tokens (#0A0710). AI created a searchable index for developers."
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Client_Feedback_Transcript.txt",
|
||||
type: "text",
|
||||
size: "145 KB",
|
||||
updated: "May 01, 2026",
|
||||
aiStatus: "Action Required",
|
||||
aiSummary: "Sentiment analysis is extremely negative regarding the login flow. AI flagged this for urgent review."
|
||||
}
|
||||
];
|
||||
|
||||
export default function DocumentsPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight text-foreground">Dökümanlar</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Notlarınızı, raporlarınızı ve belgelerinizi saklayın.
|
||||
</p>
|
||||
<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> / Documents
|
||||
</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 documents or ask AI..."
|
||||
className="bg-transparent border-none outline-none text-xs w-64 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" />
|
||||
UPLOAD
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-white/5 bg-white/5 p-8 text-center text-muted-foreground">
|
||||
Döküman yönetim modülü yakında eklenecek.
|
||||
|
||||
{/* AI Semantic Search Banner */}
|
||||
<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 gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Brain className="h-5 w-5 text-primary" />
|
||||
<h2 className="text-sm font-semibold">Talk to your Workspace</h2>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground w-1/2 leading-relaxed">
|
||||
The AI has indexed 1,240 documents. Instead of searching by keywords, ask a direct question like <em>"What were the key takeaways from the Q3 Strategy?"</em>
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ask anything about your files..."
|
||||
className="flex-1 bg-[#0A0710] border border-white/10 rounded-sm px-4 py-2 text-sm outline-none focus:border-primary/50 transition-colors"
|
||||
/>
|
||||
<button className="bg-primary hover:bg-primary/90 text-primary-foreground px-6 py-2 rounded-sm text-sm font-semibold transition-colors">
|
||||
Ask AI
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Document List */}
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{documents.map((doc) => (
|
||||
<div key={doc.id} className="rounded-sm border border-white/5 bg-[#0A0710] p-5 flex flex-col md:flex-row md:items-center gap-6 group hover:border-white/10 transition-colors">
|
||||
|
||||
{/* File Info */}
|
||||
<div className="flex items-center gap-4 min-w-[300px]">
|
||||
<div className={`p-3 rounded-sm flex items-center justify-center shrink-0 ${
|
||||
doc.type === 'word' ? 'bg-blue-500/10 text-blue-400' :
|
||||
doc.type === 'excel' ? 'bg-emerald-500/10 text-emerald-400' :
|
||||
doc.type === 'pdf' ? 'bg-red-500/10 text-red-400' :
|
||||
'bg-white/10 text-foreground'
|
||||
}`}>
|
||||
{doc.type === 'word' ? <FileText className="h-6 w-6" /> :
|
||||
doc.type === 'excel' ? <FileSpreadsheet className="h-6 w-6" /> :
|
||||
<FileIcon className="h-6 w-6" />}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<h3 className="text-sm font-semibold truncate hover:text-primary cursor-pointer transition-colors mb-1">{doc.name}</h3>
|
||||
<div className="flex items-center gap-3 text-xs text-muted-foreground">
|
||||
<span>{doc.size}</span>
|
||||
<span className="w-1 h-1 rounded-full bg-white/20"></span>
|
||||
<span>{doc.updated}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI Insight */}
|
||||
<div className="flex-1 flex flex-col bg-[#150F1D]/50 border border-white/5 p-3 rounded-sm relative overflow-hidden">
|
||||
<div className="absolute left-0 top-0 bottom-0 w-0.5 bg-primary/50"></div>
|
||||
<div className="flex items-center gap-2 mb-1.5">
|
||||
<Brain className="h-3 w-3 text-primary" />
|
||||
<span className={`text-[10px] font-bold uppercase tracking-wider ${
|
||||
doc.aiStatus === 'Action Required' ? 'text-red-400' :
|
||||
doc.aiStatus === 'Analyzing' ? 'text-orange-400 animate-pulse' :
|
||||
'text-primary'
|
||||
}`}>{doc.aiStatus}</span>
|
||||
</div>
|
||||
<p className="text-[11px] text-muted-foreground leading-snug">
|
||||
{doc.aiSummary}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex items-center gap-2">
|
||||
<button className="bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20 px-3 py-1.5 rounded-sm text-xs font-semibold flex items-center gap-2 transition-colors">
|
||||
<MessageSquare className="h-3.5 w-3.5" />
|
||||
Chat
|
||||
</button>
|
||||
<button className="p-2 hover:bg-white/5 rounded-sm text-muted-foreground transition-colors">
|
||||
<Download className="h-4 w-4" />
|
||||
</button>
|
||||
<button className="p-2 hover:bg-white/5 rounded-sm text-muted-foreground transition-colors">
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user