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.
|
||||
<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>
|
||||
|
||||
{/* 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 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.
|
||||
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,17 +1,166 @@
|
||||
"use client";
|
||||
|
||||
import { Plus, Search, Filter, Brain, AlertCircle, Clock, CheckCircle2, MoreHorizontal, Users, BarChart } from "lucide-react";
|
||||
|
||||
// Mock Data
|
||||
const projects = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Cognis Mobile App",
|
||||
status: "In Progress",
|
||||
progress: 65,
|
||||
dueDate: "May 28, 2026",
|
||||
team: ["JD", "AK", "LM"],
|
||||
aiRisk: "Low",
|
||||
aiSuggestion: "On track. Consistent velocity detected."
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Q3 Marketing Site",
|
||||
status: "At Risk",
|
||||
progress: 32,
|
||||
dueDate: "Jun 15, 2026",
|
||||
team: ["RK", "ST"],
|
||||
aiRisk: "High",
|
||||
aiSuggestion: "Bottleneck detected in Design phase. Suggest assigning 1 more designer."
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Database Migration",
|
||||
status: "Review",
|
||||
progress: 90,
|
||||
dueDate: "May 20, 2026",
|
||||
team: ["JS", "AL", "BQ", "MK"],
|
||||
aiRisk: "Medium",
|
||||
aiSuggestion: "QA testing is taking 20% longer than historical average."
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "User Authentication V2",
|
||||
status: "To Do",
|
||||
progress: 0,
|
||||
dueDate: "Jul 01, 2026",
|
||||
team: ["AK", "LM"],
|
||||
aiRisk: "Low",
|
||||
aiSuggestion: "Dependencies cleared. Ready to start."
|
||||
}
|
||||
];
|
||||
|
||||
export default function ProjectsPage() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight text-foreground">Projeler</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Geniş çaplı projelerinizi ve aşamalarını takip edin.
|
||||
<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> / Projects
|
||||
</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 projects..."
|
||||
className="bg-transparent border-none outline-none text-xs w-48 placeholder:text-muted-foreground/50 text-foreground"
|
||||
/>
|
||||
</div>
|
||||
<button className="bg-[#150F1D] hover:bg-white/5 text-foreground border border-white/10 px-3 py-1.5 rounded-sm text-xs font-semibold flex items-center gap-2 transition-colors">
|
||||
<Filter className="h-4 w-4" />
|
||||
</button>
|
||||
<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 PROJECT
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI Project Manager Insight */}
|
||||
<div className="rounded-sm border border-primary/20 bg-primary/5 p-6 flex items-start gap-4">
|
||||
<div className="p-3 bg-primary/10 rounded-sm">
|
||||
<Brain className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-sm font-semibold text-primary mb-1 flex items-center gap-2">
|
||||
AI Project Assistant
|
||||
<span className="bg-primary/20 text-primary text-[9px] uppercase px-1.5 py-0.5 rounded-sm">Active</span>
|
||||
</h3>
|
||||
<p className="text-xs text-foreground/80 leading-relaxed mb-3">
|
||||
I have analyzed your active projects. <strong>Q3 Marketing Site</strong> is showing a high risk of delay based on current commit velocity.
|
||||
I recommend redistributing tasks or extending the deadline by 4 days.
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<button className="bg-primary hover:bg-primary/90 text-primary-foreground px-4 py-1.5 rounded-sm text-xs font-semibold transition-colors">
|
||||
Apply AI Reallocation
|
||||
</button>
|
||||
<button className="bg-transparent hover:bg-white/5 text-foreground border border-white/10 px-4 py-1.5 rounded-sm text-xs font-semibold transition-colors">
|
||||
View Detailed Analysis
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-2xl border border-white/5 bg-white/5 p-8 text-center text-muted-foreground">
|
||||
Proje yönetim modülü yakında eklenecek.
|
||||
</div>
|
||||
|
||||
{/* Project Cards Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{projects.map((project) => (
|
||||
<div key={project.id} className="rounded-sm border border-white/5 bg-[#0A0710] flex flex-col group">
|
||||
{/* Card Header */}
|
||||
<div className="p-6 border-b border-white/5 flex justify-between items-start">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h2 className="text-base font-semibold">{project.name}</h2>
|
||||
<span className={`text-[10px] uppercase font-bold px-2 py-0.5 rounded-sm border ${
|
||||
project.status === 'In Progress' ? 'bg-blue-500/10 text-blue-400 border-blue-500/20' :
|
||||
project.status === 'At Risk' ? 'bg-red-500/10 text-red-400 border-red-500/20' :
|
||||
project.status === 'Review' ? 'bg-orange-500/10 text-orange-400 border-orange-500/20' :
|
||||
'bg-white/5 text-muted-foreground border-white/10'
|
||||
}`}>
|
||||
{project.status}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-xs text-muted-foreground">
|
||||
<div className="flex items-center gap-1.5"><Clock className="h-3.5 w-3.5" /> Due {project.dueDate}</div>
|
||||
<div className="flex items-center gap-1.5"><Users className="h-3.5 w-3.5" /> {project.team.length} Members</div>
|
||||
</div>
|
||||
</div>
|
||||
<button className="text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<MoreHorizontal className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* AI Risk & Suggestion */}
|
||||
<div className="p-4 bg-[#150F1D]/50 border-b border-white/5 flex gap-3 items-start">
|
||||
{project.aiRisk === "High" ? <AlertCircle className="h-4 w-4 text-red-400 mt-0.5 shrink-0" /> :
|
||||
project.aiRisk === "Medium" ? <BarChart className="h-4 w-4 text-orange-400 mt-0.5 shrink-0" /> :
|
||||
<CheckCircle2 className="h-4 w-4 text-emerald-400 mt-0.5 shrink-0" />}
|
||||
<div>
|
||||
<div className="text-[10px] font-bold uppercase tracking-wider mb-0.5 flex items-center gap-1.5">
|
||||
<Brain className="h-3 w-3" />
|
||||
AI Risk: <span className={
|
||||
project.aiRisk === 'High' ? 'text-red-400' :
|
||||
project.aiRisk === 'Medium' ? 'text-orange-400' : 'text-emerald-400'
|
||||
}>{project.aiRisk}</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">{project.aiSuggestion}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress & Actions */}
|
||||
<div className="p-6 mt-auto">
|
||||
<div className="flex justify-between items-center mb-2">
|
||||
<span className="text-xs font-medium">Progress</span>
|
||||
<span className="text-xs font-bold text-primary">{project.progress}%</span>
|
||||
</div>
|
||||
<div className="h-1.5 w-full bg-white/5 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-primary rounded-full transition-all duration-1000"
|
||||
style={{ width: `${project.progress}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,17 +1,165 @@
|
||||
"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="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<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>
|
||||
<h1 className="text-3xl font-bold tracking-tight text-foreground">Ekip / Kişiler</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Birlikte çalıştığınız kişileri ve takım koordinasyonunu yönetin.
|
||||
<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 className="rounded-2xl border border-white/5 bg-white/5 p-8 text-center text-muted-foreground">
|
||||
Ekip modülü yakında eklenecek.
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user