01026d43cc
- StaffLearningPortal: Fetches courses from /api/staff/courses, supports starting courses and tracking progress - StaffPerformanceReviews: Fetches reviews from /api/staff/reviews, supports adding employee comments with dialog - StaffKnowledgeBase: Fetches articles from /api/staff/knowledge-base, supports search, filtering, view tracking, and helpful marking - StaffProjectTracking: Fetches projects from /api/staff/projects, supports task status updates and creating new tasks - StaffInternalMarketplace: Now points marketplace with /api/staff/marketplace, supports redeeming items with points and viewing orders - StaffTeamHandbook: Fetches handbook sections from /api/staff/handbook, displays grouped by category with expand/collapse All pages now use real Supabase data instead of mock arrays.
443 lines
16 KiB
TypeScript
443 lines
16 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import Layout from "@/components/Layout";
|
|
import SEO from "@/components/SEO";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Progress } from "@/components/ui/progress";
|
|
import {
|
|
Target,
|
|
TrendingUp,
|
|
CheckCircle,
|
|
Loader2,
|
|
Plus,
|
|
Calendar,
|
|
} from "lucide-react";
|
|
import { useAuth } from "@/lib/auth";
|
|
import { aethexToast } from "@/components/ui/aethex-toast";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
|
|
interface Task {
|
|
id: string;
|
|
title: string;
|
|
description?: string;
|
|
status: string;
|
|
priority: string;
|
|
due_date?: string;
|
|
completed_at?: string;
|
|
}
|
|
|
|
interface Project {
|
|
id: string;
|
|
name: string;
|
|
description: string;
|
|
status: string;
|
|
start_date: string;
|
|
end_date?: string;
|
|
lead?: {
|
|
full_name: string;
|
|
avatar_url?: string;
|
|
};
|
|
tasks: Task[];
|
|
task_stats: {
|
|
total: number;
|
|
done: number;
|
|
};
|
|
}
|
|
|
|
interface Stats {
|
|
total: number;
|
|
active: number;
|
|
completed: number;
|
|
}
|
|
|
|
const getStatusColor = (status: string) => {
|
|
switch (status) {
|
|
case "active":
|
|
return "bg-green-500/20 text-green-300 border-green-500/30";
|
|
case "completed":
|
|
return "bg-blue-500/20 text-blue-300 border-blue-500/30";
|
|
case "on_hold":
|
|
return "bg-amber-500/20 text-amber-300 border-amber-500/30";
|
|
default:
|
|
return "bg-slate-500/20 text-slate-300 border-slate-500/30";
|
|
}
|
|
};
|
|
|
|
const getTaskStatusColor = (status: string) => {
|
|
switch (status) {
|
|
case "done":
|
|
return "bg-green-500/20 text-green-300";
|
|
case "in_progress":
|
|
return "bg-blue-500/20 text-blue-300";
|
|
case "todo":
|
|
return "bg-slate-500/20 text-slate-300";
|
|
default:
|
|
return "bg-slate-500/20 text-slate-300";
|
|
}
|
|
};
|
|
|
|
export default function StaffProjectTracking() {
|
|
const { session } = useAuth();
|
|
const [projects, setProjects] = useState<Project[]>([]);
|
|
const [stats, setStats] = useState<Stats>({ total: 0, active: 0, completed: 0 });
|
|
const [selectedProject, setSelectedProject] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [taskDialog, setTaskDialog] = useState<string | null>(null);
|
|
const [newTask, setNewTask] = useState({ title: "", description: "", priority: "medium", due_date: "" });
|
|
|
|
useEffect(() => {
|
|
if (session?.access_token) {
|
|
fetchProjects();
|
|
}
|
|
}, [session?.access_token]);
|
|
|
|
const fetchProjects = async () => {
|
|
try {
|
|
const res = await fetch("/api/staff/projects", {
|
|
headers: { Authorization: `Bearer ${session?.access_token}` },
|
|
});
|
|
const data = await res.json();
|
|
if (res.ok) {
|
|
setProjects(data.projects || []);
|
|
setStats(data.stats || { total: 0, active: 0, completed: 0 });
|
|
}
|
|
} catch (err) {
|
|
aethexToast.error("Failed to load projects");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const updateTaskStatus = async (taskId: string, status: string) => {
|
|
try {
|
|
const res = await fetch("/api/staff/projects", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Authorization: `Bearer ${session?.access_token}`,
|
|
},
|
|
body: JSON.stringify({ action: "update_task", task_id: taskId, status }),
|
|
});
|
|
if (res.ok) {
|
|
aethexToast.success("Task updated");
|
|
fetchProjects();
|
|
}
|
|
} catch (err) {
|
|
aethexToast.error("Failed to update task");
|
|
}
|
|
};
|
|
|
|
const createTask = async () => {
|
|
if (!taskDialog || !newTask.title) return;
|
|
try {
|
|
const res = await fetch("/api/staff/projects", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Authorization: `Bearer ${session?.access_token}`,
|
|
},
|
|
body: JSON.stringify({
|
|
action: "create_task",
|
|
project_id: taskDialog,
|
|
...newTask,
|
|
}),
|
|
});
|
|
if (res.ok) {
|
|
aethexToast.success("Task created");
|
|
setTaskDialog(null);
|
|
setNewTask({ title: "", description: "", priority: "medium", due_date: "" });
|
|
fetchProjects();
|
|
}
|
|
} catch (err) {
|
|
aethexToast.error("Failed to create task");
|
|
}
|
|
};
|
|
|
|
const avgProgress = projects.length > 0
|
|
? Math.round(
|
|
projects.reduce((sum, p) => sum + (p.task_stats.total > 0 ? (p.task_stats.done / p.task_stats.total) * 100 : 0), 0) / projects.length
|
|
)
|
|
: 0;
|
|
|
|
if (loading) {
|
|
return (
|
|
<Layout>
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center">
|
|
<Loader2 className="h-8 w-8 animate-spin text-indigo-400" />
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Layout>
|
|
<SEO
|
|
title="Project Tracking"
|
|
description="AeThex projects, tasks, and roadmap"
|
|
/>
|
|
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
|
|
{/* Background effects */}
|
|
<div className="absolute inset-0 opacity-30">
|
|
<div className="absolute top-20 left-10 w-96 h-96 bg-indigo-600 rounded-full mix-blend-multiply filter blur-3xl animate-pulse" />
|
|
<div className="absolute bottom-20 right-10 w-96 h-96 bg-cyan-600 rounded-full mix-blend-multiply filter blur-3xl animate-pulse" />
|
|
</div>
|
|
|
|
<div className="relative z-10">
|
|
{/* Header */}
|
|
<div className="container mx-auto max-w-6xl px-4 py-16">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="p-3 rounded-lg bg-indigo-500/20 border border-indigo-500/30">
|
|
<Target className="h-6 w-6 text-indigo-400" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-4xl font-bold text-indigo-100">
|
|
Project Tracking
|
|
</h1>
|
|
<p className="text-indigo-200/70">
|
|
Your projects, tasks, and progress
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Summary */}
|
|
<div className="grid md:grid-cols-3 gap-4 mb-12">
|
|
<Card className="bg-indigo-950/30 border-indigo-500/30">
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-indigo-200/70">My Projects</p>
|
|
<p className="text-3xl font-bold text-indigo-100">
|
|
{stats.total}
|
|
</p>
|
|
</div>
|
|
<Target className="h-8 w-8 text-indigo-400" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bg-indigo-950/30 border-indigo-500/30">
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-indigo-200/70">Avg Progress</p>
|
|
<p className="text-3xl font-bold text-indigo-100">
|
|
{avgProgress}%
|
|
</p>
|
|
</div>
|
|
<TrendingUp className="h-8 w-8 text-indigo-400" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="bg-indigo-950/30 border-indigo-500/30">
|
|
<CardContent className="pt-6">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-indigo-200/70">Active</p>
|
|
<p className="text-3xl font-bold text-indigo-100">
|
|
{stats.active}
|
|
</p>
|
|
</div>
|
|
<CheckCircle className="h-8 w-8 text-indigo-400" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Projects */}
|
|
<div className="space-y-6">
|
|
{projects.map((project) => (
|
|
<Card
|
|
key={project.id}
|
|
className="bg-slate-800/50 border-slate-700/50 hover:border-indigo-500/50 transition-all"
|
|
>
|
|
<CardHeader
|
|
className="cursor-pointer"
|
|
onClick={() => setSelectedProject(selectedProject === project.id ? null : project.id)}
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1">
|
|
<CardTitle className="text-indigo-100">
|
|
{project.name}
|
|
</CardTitle>
|
|
<CardDescription className="text-slate-400">
|
|
{project.description}
|
|
</CardDescription>
|
|
</div>
|
|
<Badge className={`border ${getStatusColor(project.status)}`}>
|
|
{project.status.replace("_", " ").replace(/\b\w/g, (l) => l.toUpperCase())}
|
|
</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-slate-400">Tasks Progress</span>
|
|
<span className="text-indigo-300 font-semibold">
|
|
{project.task_stats.done}/{project.task_stats.total}
|
|
</span>
|
|
</div>
|
|
<Progress
|
|
value={project.task_stats.total > 0 ? (project.task_stats.done / project.task_stats.total) * 100 : 0}
|
|
className="h-2"
|
|
/>
|
|
</div>
|
|
<div className="flex gap-4 flex-wrap text-sm">
|
|
{project.lead && (
|
|
<div>
|
|
<p className="text-xs text-slate-500">Lead</p>
|
|
<p className="text-indigo-300">{project.lead.full_name}</p>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<p className="text-xs text-slate-500">Start Date</p>
|
|
<p className="text-indigo-300">{new Date(project.start_date).toLocaleDateString()}</p>
|
|
</div>
|
|
{project.end_date && (
|
|
<div>
|
|
<p className="text-xs text-slate-500">End Date</p>
|
|
<p className="text-indigo-300">{new Date(project.end_date).toLocaleDateString()}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{selectedProject === project.id && (
|
|
<div className="pt-4 border-t border-slate-700">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h4 className="text-lg font-semibold text-indigo-100">Tasks</h4>
|
|
<Button
|
|
size="sm"
|
|
className="bg-indigo-600 hover:bg-indigo-700"
|
|
onClick={() => setTaskDialog(project.id)}
|
|
>
|
|
<Plus className="h-4 w-4 mr-1" />
|
|
Add Task
|
|
</Button>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{project.tasks.map((task) => (
|
|
<div
|
|
key={task.id}
|
|
className="flex items-center justify-between p-3 bg-slate-700/30 rounded"
|
|
>
|
|
<div className="flex-1">
|
|
<p className="text-slate-200">{task.title}</p>
|
|
{task.due_date && (
|
|
<p className="text-xs text-slate-500 flex items-center gap-1">
|
|
<Calendar className="h-3 w-3" />
|
|
Due: {new Date(task.due_date).toLocaleDateString()}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<Select
|
|
value={task.status}
|
|
onValueChange={(value) => updateTaskStatus(task.id, value)}
|
|
>
|
|
<SelectTrigger className={`w-32 ${getTaskStatusColor(task.status)}`}>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="todo">To Do</SelectItem>
|
|
<SelectItem value="in_progress">In Progress</SelectItem>
|
|
<SelectItem value="done">Done</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
))}
|
|
{project.tasks.length === 0 && (
|
|
<p className="text-slate-500 text-sm text-center py-4">No tasks yet</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{projects.length === 0 && (
|
|
<div className="text-center py-12">
|
|
<p className="text-slate-400">No projects found</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Create Task Dialog */}
|
|
<Dialog open={!!taskDialog} onOpenChange={() => setTaskDialog(null)}>
|
|
<DialogContent className="bg-slate-800 border-slate-700">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-indigo-100">Add New Task</DialogTitle>
|
|
</DialogHeader>
|
|
<div className="space-y-4">
|
|
<Input
|
|
placeholder="Task title"
|
|
value={newTask.title}
|
|
onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}
|
|
className="bg-slate-700 border-slate-600 text-slate-100"
|
|
/>
|
|
<Textarea
|
|
placeholder="Description (optional)"
|
|
value={newTask.description}
|
|
onChange={(e) => setNewTask({ ...newTask, description: e.target.value })}
|
|
className="bg-slate-700 border-slate-600 text-slate-100"
|
|
/>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<Select
|
|
value={newTask.priority}
|
|
onValueChange={(value) => setNewTask({ ...newTask, priority: value })}
|
|
>
|
|
<SelectTrigger className="bg-slate-700 border-slate-600 text-slate-100">
|
|
<SelectValue placeholder="Priority" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="low">Low</SelectItem>
|
|
<SelectItem value="medium">Medium</SelectItem>
|
|
<SelectItem value="high">High</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Input
|
|
type="date"
|
|
value={newTask.due_date}
|
|
onChange={(e) => setNewTask({ ...newTask, due_date: e.target.value })}
|
|
className="bg-slate-700 border-slate-600 text-slate-100"
|
|
/>
|
|
</div>
|
|
<div className="flex justify-end gap-2">
|
|
<Button variant="outline" onClick={() => setTaskDialog(null)}>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
className="bg-indigo-600 hover:bg-indigo-700"
|
|
onClick={createTask}
|
|
>
|
|
Create Task
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</Layout>
|
|
);
|
|
}
|