202 lines
8.8 KiB
TypeScript
202 lines
8.8 KiB
TypeScript
"use client";
|
|
|
|
import { Plus, Search, Filter, Brain, CheckSquare2, Clock, AlertCircle, MoreHorizontal, MessageSquare, ArrowUpRight, CheckCircle2 } from "lucide-react";
|
|
|
|
// Mock Data
|
|
const tasks = [
|
|
{
|
|
id: 1,
|
|
title: "Finalize Q3 Marketing Assets",
|
|
project: "Marketing Site",
|
|
priority: "High",
|
|
status: "In Progress",
|
|
assignee: "Sarah J.",
|
|
aiPredict: "2 days",
|
|
dueDate: "May 15"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Database Migration Script",
|
|
project: "Infrastructure",
|
|
priority: "Critical",
|
|
status: "Review",
|
|
assignee: "Alex R.",
|
|
aiPredict: "4 hours",
|
|
dueDate: "May 12"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Design System Tokens",
|
|
project: "Cognis Mobile",
|
|
priority: "Medium",
|
|
status: "To Do",
|
|
assignee: "Mike C.",
|
|
aiPredict: "3 days",
|
|
dueDate: "May 20"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Client Interview Synthesis",
|
|
project: "Research",
|
|
priority: "Low",
|
|
status: "Done",
|
|
assignee: "Emma W.",
|
|
aiPredict: "Completed",
|
|
dueDate: "May 08"
|
|
},
|
|
{
|
|
id: 5,
|
|
title: "Optimize Webpack Config",
|
|
project: "Infrastructure",
|
|
priority: "Medium",
|
|
status: "To Do",
|
|
assignee: "Alex R.",
|
|
aiPredict: "1 day",
|
|
dueDate: "May 18"
|
|
}
|
|
];
|
|
|
|
export default function TasksPage() {
|
|
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> / Tasks
|
|
</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 tasks..."
|
|
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" />
|
|
FILTER
|
|
</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 TASK
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* AI Task Prioritization */}
|
|
<div className="rounded-sm border border-primary/20 bg-primary/5 p-6 flex flex-col md:flex-row items-start md: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 Task Prioritization
|
|
</h3>
|
|
<p className="text-xs text-foreground/80 leading-relaxed max-w-2xl">
|
|
Based on the upcoming <strong>Infrastructure</strong> deadlines and <strong>Alex R.</strong>'s historical velocity, AI strongly suggests starting the <em>Database Migration Script</em> immediately. It has a high risk of cascading delays.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<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 shrink-0">
|
|
Auto-Sort Backlog
|
|
</button>
|
|
</div>
|
|
|
|
{/* Task List Header */}
|
|
<div className="flex items-center justify-between mt-2">
|
|
<div className="flex items-center gap-2">
|
|
<button className="px-3 py-1.5 text-xs font-medium rounded-sm bg-[#2B2538] text-foreground shadow-sm">List View</button>
|
|
<button className="px-3 py-1.5 text-xs font-medium rounded-sm text-muted-foreground hover:text-foreground transition-colors">Kanban Board</button>
|
|
</div>
|
|
<div className="text-xs text-muted-foreground font-medium">12 Active Tasks</div>
|
|
</div>
|
|
|
|
{/* Tasks Table */}
|
|
<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-5">Task Details</div>
|
|
<div className="col-span-2">Status</div>
|
|
<div className="col-span-2">Assignee</div>
|
|
<div className="col-span-2">AI Time Estimate</div>
|
|
<div className="col-span-1 text-right">Actions</div>
|
|
</div>
|
|
|
|
<div className="divide-y divide-white/5">
|
|
{tasks.map((task) => (
|
|
<div key={task.id} className="grid grid-cols-12 gap-4 p-4 items-center hover:bg-white/[0.02] transition-colors group">
|
|
|
|
{/* Task Details */}
|
|
<div className="col-span-5 flex items-start gap-3">
|
|
<button className="mt-0.5 text-muted-foreground hover:text-primary transition-colors">
|
|
{task.status === "Done" ? <CheckCircle2 className="h-4 w-4 text-emerald-400" /> : <CheckSquare2 className="h-4 w-4" />}
|
|
</button>
|
|
<div>
|
|
<div className={`text-sm font-medium mb-1 ${task.status === 'Done' ? 'text-muted-foreground line-through' : 'text-foreground'}`}>
|
|
{task.title}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-[10px] text-muted-foreground font-medium bg-[#150F1D] px-2 py-0.5 rounded-sm border border-white/5">
|
|
{task.project}
|
|
</span>
|
|
<span className={`text-[10px] uppercase font-bold tracking-wider flex items-center gap-1 ${
|
|
task.priority === 'Critical' ? 'text-red-400' :
|
|
task.priority === 'High' ? 'text-orange-400' :
|
|
task.priority === 'Medium' ? 'text-blue-400' : 'text-muted-foreground'
|
|
}`}>
|
|
{task.priority === 'Critical' && <AlertCircle className="h-3 w-3" />}
|
|
{task.priority}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Status */}
|
|
<div className="col-span-2">
|
|
<span className={`text-[10px] uppercase font-bold px-2 py-1 rounded-sm border inline-block ${
|
|
task.status === 'In Progress' ? 'bg-blue-500/10 text-blue-400 border-blue-500/20' :
|
|
task.status === 'Review' ? 'bg-orange-500/10 text-orange-400 border-orange-500/20' :
|
|
task.status === 'Done' ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20' :
|
|
'bg-white/5 text-muted-foreground border-white/10'
|
|
}`}>
|
|
{task.status}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Assignee */}
|
|
<div className="col-span-2 flex items-center gap-2">
|
|
<div className="h-6 w-6 rounded-sm bg-[#1F172B] border border-white/10 flex items-center justify-center text-[10px] font-bold text-primary">
|
|
{task.assignee.split(' ')[0][0]}{task.assignee.split(' ')[1][0]}
|
|
</div>
|
|
<span className="text-xs text-muted-foreground">{task.assignee}</span>
|
|
</div>
|
|
|
|
{/* AI Estimate */}
|
|
<div className="col-span-2 flex items-center gap-2">
|
|
{task.status !== 'Done' && <Clock className="h-3.5 w-3.5 text-primary" />}
|
|
<span className={`text-xs ${task.status === 'Done' ? 'text-emerald-400 font-medium' : 'text-muted-foreground'}`}>
|
|
{task.aiPredict}
|
|
</span>
|
|
</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">
|
|
<MessageSquare 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>
|
|
);
|
|
}
|