645 lines
25 KiB
TypeScript
645 lines
25 KiB
TypeScript
import { DashboardLayout } from "@/components/layout/sidebar";
|
|
import { PageHeader } from "@/components/layout/page-header";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
// Progress component not available, using inline div progress bars
|
|
import { Separator } from "@/components/ui/separator";
|
|
import {
|
|
FolderKanban,
|
|
Target,
|
|
CheckCircle2,
|
|
Clock,
|
|
ExternalLink,
|
|
TrendingUp,
|
|
AlertCircle,
|
|
Users,
|
|
Calendar,
|
|
ArrowRight,
|
|
Zap,
|
|
Activity,
|
|
AlertTriangle,
|
|
BarChart3,
|
|
Sparkles,
|
|
Timer,
|
|
} from "lucide-react";
|
|
import Link from "next/link";
|
|
import {
|
|
fetchProjectsWithStats,
|
|
fetchActiveSprint,
|
|
countSprintsByStatus,
|
|
getProjectHealth,
|
|
getSprintDaysRemaining,
|
|
formatSprintDateRange,
|
|
ProjectStats,
|
|
Sprint,
|
|
} from "@/lib/data/projects";
|
|
import { Task } from "@/lib/data/tasks";
|
|
import {
|
|
getGanttProjectUrl,
|
|
getGanttSprintUrl,
|
|
getGanttTaskUrl,
|
|
getGanttTasksUrl,
|
|
siteUrls,
|
|
} from "@/lib/config/sites";
|
|
|
|
// Force dynamic rendering to fetch fresh data on each request
|
|
export const dynamic = "force-dynamic";
|
|
|
|
// Helper functions
|
|
function formatRelativeTime(dateString: string): string {
|
|
const date = new Date(dateString);
|
|
const now = new Date();
|
|
const diffMs = now.getTime() - date.getTime();
|
|
const diffMins = Math.floor(diffMs / (1000 * 60));
|
|
const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
|
|
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
|
|
|
|
if (diffMins < 60) return `${diffMins}m ago`;
|
|
if (diffHours < 24) return `${diffHours}h ago`;
|
|
if (diffDays < 7) return `${diffDays}d ago`;
|
|
return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
|
|
}
|
|
|
|
function getPriorityColor(priority: string): string {
|
|
switch (priority) {
|
|
case "urgent":
|
|
return "bg-red-500/15 text-red-400 border-red-500/30";
|
|
case "high":
|
|
return "bg-orange-500/15 text-orange-400 border-orange-500/30";
|
|
case "medium":
|
|
return "bg-yellow-500/15 text-yellow-400 border-yellow-500/30";
|
|
default:
|
|
return "bg-blue-500/15 text-blue-400 border-blue-500/30";
|
|
}
|
|
}
|
|
|
|
function getStatusIcon(status: string) {
|
|
switch (status) {
|
|
case "done":
|
|
return <CheckCircle2 className="w-4 h-4 text-green-500" />;
|
|
case "in-progress":
|
|
return <Clock className="w-4 h-4 text-blue-500" />;
|
|
case "review":
|
|
case "validate":
|
|
return <Activity className="w-4 h-4 text-purple-500" />;
|
|
default:
|
|
return <div className="w-4 h-4 rounded-full border-2 border-muted-foreground" />;
|
|
}
|
|
}
|
|
|
|
// Stat Card Component
|
|
function StatCard({
|
|
title,
|
|
value,
|
|
subtitle,
|
|
icon: Icon,
|
|
colorClass,
|
|
trend,
|
|
}: {
|
|
title: string;
|
|
value: string | number;
|
|
subtitle?: string;
|
|
icon: React.ElementType;
|
|
colorClass: string;
|
|
trend?: "up" | "down" | "neutral";
|
|
}) {
|
|
return (
|
|
<Card className="hover:shadow-md transition-shadow">
|
|
<CardContent className="p-4 sm:p-6">
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-xs sm:text-sm font-medium text-muted-foreground truncate">{title}</p>
|
|
<p className="text-2xl sm:text-3xl font-bold mt-1">{value}</p>
|
|
{subtitle && <p className="text-xs text-muted-foreground mt-1 truncate">{subtitle}</p>}
|
|
</div>
|
|
<div className={`p-2 sm:p-3 rounded-lg shrink-0 ${colorClass}`}>
|
|
<Icon className="w-4 h-4 sm:w-5 sm:h-5" />
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Task List Item Component
|
|
function TaskListItem({ task }: { task: Task }) {
|
|
return (
|
|
<div className="flex items-start gap-3 py-3 border-b border-border last:border-0">
|
|
<div className="mt-0.5 shrink-0">{getStatusIcon(task.status)}</div>
|
|
<div className="flex-1 min-w-0 overflow-hidden">
|
|
<Link
|
|
href={getGanttTaskUrl(task.id)}
|
|
target="_blank"
|
|
className="text-sm font-medium block truncate hover:text-primary hover:underline"
|
|
>
|
|
{task.title}
|
|
</Link>
|
|
<div className="flex flex-wrap items-center gap-2 mt-1">
|
|
<span className="text-xs text-muted-foreground">
|
|
{formatRelativeTime(task.updatedAt)}
|
|
</span>
|
|
{task.assigneeName && (
|
|
<span className="text-xs text-muted-foreground flex items-center gap-1">
|
|
<Users className="w-3 h-3" />
|
|
{task.assigneeName}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Badge variant="outline" className={`text-xs shrink-0 ${getPriorityColor(task.priority)}`}>
|
|
{task.priority}
|
|
</Badge>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Project Card Component
|
|
function ProjectCard({ stats }: { stats: ProjectStats }) {
|
|
const health = getProjectHealth(stats);
|
|
const { project, progress, totalTasks, completedTasks, inProgressTasks, urgentTasks, highPriorityTasks, recentTasks } = stats;
|
|
|
|
return (
|
|
<Card className="hover:shadow-lg transition-shadow h-full flex flex-col">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<div
|
|
className="w-3 h-3 rounded-full shrink-0"
|
|
style={{ backgroundColor: project.color }}
|
|
/>
|
|
<CardTitle className="text-base font-semibold truncate">
|
|
{project.name}
|
|
</CardTitle>
|
|
</div>
|
|
<Badge
|
|
variant="outline"
|
|
className={`text-xs shrink-0 ${health.status === "healthy" ? "border-green-500/30 text-green-400" : health.status === "warning" ? "border-yellow-500/30 text-yellow-400" : "border-red-500/30 text-red-400"}`}
|
|
>
|
|
{health.label}
|
|
</Badge>
|
|
</div>
|
|
{project.description && (
|
|
<CardDescription className="text-xs line-clamp-2 mt-1">
|
|
{project.description}
|
|
</CardDescription>
|
|
)}
|
|
</CardHeader>
|
|
|
|
<CardContent className="space-y-4 flex-1 flex flex-col">
|
|
{/* Progress Bar */}
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">Progress</span>
|
|
<span className="font-medium">{progress}%</span>
|
|
</div>
|
|
<div className="h-2 bg-secondary rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full rounded-full transition-all"
|
|
style={{
|
|
width: `${progress}%`,
|
|
backgroundColor: project.color
|
|
}}
|
|
/>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
{completedTasks} of {totalTasks} tasks completed
|
|
</p>
|
|
</div>
|
|
|
|
{/* Task Stats */}
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<div className="w-2 h-2 rounded-full bg-blue-500" />
|
|
<span className="text-muted-foreground">In Progress:</span>
|
|
<span className="font-medium">{inProgressTasks}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-xs">
|
|
<div className="w-2 h-2 rounded-full bg-orange-500" />
|
|
<span className="text-muted-foreground">High Priority:</span>
|
|
<span className="font-medium">{highPriorityTasks}</span>
|
|
</div>
|
|
{urgentTasks > 0 && (
|
|
<div className="flex items-center gap-2 text-xs col-span-2">
|
|
<AlertTriangle className="w-3 h-3 text-red-500" />
|
|
<span className="text-red-400 font-medium">{urgentTasks} urgent task{urgentTasks !== 1 ? 's' : ''} need{urgentTasks === 1 ? 's' : ''} attention</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* Recent Activity */}
|
|
<div className="flex-1">
|
|
<p className="text-xs font-medium text-muted-foreground mb-2">Recent Activity</p>
|
|
{recentTasks.length > 0 ? (
|
|
<div className="space-y-0">
|
|
{recentTasks.slice(0, 3).map((task) => (
|
|
<div key={task.id} className="flex items-center gap-2 py-1.5">
|
|
{getStatusIcon(task.status)}
|
|
<span className="text-xs truncate flex-1">{task.title}</span>
|
|
<span className="text-xs text-muted-foreground shrink-0">
|
|
{formatRelativeTime(task.updatedAt)}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-xs text-muted-foreground italic">No recent activity</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Action Link */}
|
|
<Link
|
|
href={getGanttProjectUrl(project.id)}
|
|
target="_blank"
|
|
className="flex items-center justify-between text-xs text-primary hover:underline mt-auto pt-2"
|
|
>
|
|
<span>View in Gantt Board</span>
|
|
<ExternalLink className="w-3 h-3" />
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Active Sprint Card Component
|
|
function ActiveSprintCard({ sprint }: { sprint: Sprint }) {
|
|
const daysRemaining = getSprintDaysRemaining(sprint);
|
|
const isOverdue = daysRemaining < 0;
|
|
|
|
return (
|
|
<Card className="border-primary/20 bg-gradient-to-br from-primary/5 to-transparent">
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<div className="p-2 rounded-lg bg-primary/10">
|
|
<Zap className="w-5 h-5 text-primary" />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-base">Active Sprint</CardTitle>
|
|
<p className="text-xs text-muted-foreground">{sprint.name}</p>
|
|
</div>
|
|
</div>
|
|
<Badge variant="default" className="bg-primary text-primary-foreground">
|
|
{isOverdue ? `${Math.abs(daysRemaining)} days overdue` : `${daysRemaining} days left`}
|
|
</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{sprint.goal && (
|
|
<p className="text-sm text-muted-foreground">{sprint.goal}</p>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between text-xs text-muted-foreground">
|
|
<span className="flex items-center gap-1">
|
|
<Calendar className="w-3 h-3" />
|
|
{formatSprintDateRange(sprint)}
|
|
</span>
|
|
</div>
|
|
|
|
<Link
|
|
href={getGanttSprintUrl(sprint.id)}
|
|
target="_blank"
|
|
>
|
|
<Button variant="outline" size="sm" className="w-full mt-2">
|
|
<ExternalLink className="w-4 h-4 mr-2" />
|
|
View Sprint Board
|
|
</Button>
|
|
</Link>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Main Page Component
|
|
export default async function ProjectsOverviewPage() {
|
|
// Fetch all data in parallel
|
|
let projectStats: ProjectStats[] = [];
|
|
let activeSprint: Sprint | null = null;
|
|
let sprintCounts = { planning: 0, active: 0, completed: 0, total: 0 };
|
|
let errorMessage: string | null = null;
|
|
|
|
try {
|
|
[projectStats, activeSprint, sprintCounts] = await Promise.all([
|
|
fetchProjectsWithStats(),
|
|
fetchActiveSprint(),
|
|
countSprintsByStatus(),
|
|
]);
|
|
} catch (error) {
|
|
console.error("Error fetching projects data:", error);
|
|
errorMessage = error instanceof Error ? error.message : "Failed to load projects data";
|
|
}
|
|
|
|
// Calculate overall stats
|
|
const totalTasks = projectStats.reduce((sum, p) => sum + p.totalTasks, 0);
|
|
const completedTasks = projectStats.reduce((sum, p) => sum + p.completedTasks, 0);
|
|
const overallProgress = totalTasks > 0 ? Math.round((completedTasks / totalTasks) * 100) : 0;
|
|
const urgentTasks = projectStats.reduce((sum, p) => sum + p.urgentTasks, 0);
|
|
const highPriorityTasks = projectStats.reduce((sum, p) => sum + p.highPriorityTasks, 0);
|
|
|
|
// Sort projects by health status (critical first, then warning, then healthy)
|
|
const sortedProjects = [...projectStats].sort((a, b) => {
|
|
const healthA = getProjectHealth(a).status;
|
|
const healthB = getProjectHealth(b).status;
|
|
const order = { critical: 0, warning: 1, healthy: 2 };
|
|
return order[healthA] - order[healthB];
|
|
});
|
|
|
|
return (
|
|
<DashboardLayout>
|
|
<div className="space-y-6 sm:space-y-8">
|
|
{/* Header */}
|
|
<PageHeader
|
|
title="Projects Overview"
|
|
description={
|
|
<>
|
|
Manage all projects and track progress. Edit projects in{" "}
|
|
<Link
|
|
href={siteUrls.ganttBoard}
|
|
target="_blank"
|
|
className="text-primary hover:underline inline-flex items-center gap-1"
|
|
>
|
|
gantt-board
|
|
<ExternalLink className="w-3 h-3" />
|
|
</Link>
|
|
</>
|
|
}
|
|
>
|
|
<Link href={siteUrls.ganttBoard} target="_blank">
|
|
<Button size="sm">
|
|
<ExternalLink className="w-4 h-4 mr-2" />
|
|
Open Gantt Board
|
|
</Button>
|
|
</Link>
|
|
</PageHeader>
|
|
|
|
{/* Error Message */}
|
|
{errorMessage && (
|
|
<div className="bg-red-500/10 border border-red-500/30 rounded-lg p-4 text-red-400">
|
|
<p className="font-medium">Error loading projects</p>
|
|
<p className="text-sm mt-1">{errorMessage}</p>
|
|
<p className="text-sm mt-2">Make sure you are logged into gantt-board and have access to the Supabase database.</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Stats Overview */}
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
|
|
<StatCard
|
|
title="Total Projects"
|
|
value={projectStats.length}
|
|
subtitle={`${sprintCounts.active} active sprints`}
|
|
icon={FolderKanban}
|
|
colorClass="bg-blue-500/15 text-blue-500"
|
|
/>
|
|
<StatCard
|
|
title="Overall Progress"
|
|
value={`${overallProgress}%`}
|
|
subtitle={`${completedTasks} of ${totalTasks} tasks done`}
|
|
icon={BarChart3}
|
|
colorClass="bg-green-500/15 text-green-500"
|
|
/>
|
|
<StatCard
|
|
title="Needs Attention"
|
|
value={urgentTasks + highPriorityTasks}
|
|
subtitle={`${urgentTasks} urgent, ${highPriorityTasks} high priority`}
|
|
icon={AlertTriangle}
|
|
colorClass="bg-orange-500/15 text-orange-500"
|
|
/>
|
|
<StatCard
|
|
title="Active Sprint"
|
|
value={activeSprint ? `${getSprintDaysRemaining(activeSprint)}d` : "None"}
|
|
subtitle={activeSprint ? "days remaining" : "No active sprint"}
|
|
icon={Timer}
|
|
colorClass="bg-purple-500/15 text-purple-500"
|
|
/>
|
|
</div>
|
|
|
|
{/* Active Sprint Section */}
|
|
{activeSprint && (
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
|
<div className="lg:col-span-2">
|
|
<ActiveSprintCard sprint={activeSprint} />
|
|
</div>
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="flex items-center gap-2 text-sm">
|
|
<Sparkles className="w-4 h-4" />
|
|
Sprint Stats
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-3">
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">Planning</span>
|
|
<span className="font-medium">{sprintCounts.planning}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">Active</span>
|
|
<span className="font-medium text-primary">{sprintCounts.active}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-muted-foreground">Completed</span>
|
|
<span className="font-medium">{sprintCounts.completed}</span>
|
|
</div>
|
|
</div>
|
|
<Separator />
|
|
<div className="flex justify-between text-sm font-medium">
|
|
<span>Total Sprints</span>
|
|
<span>{sprintCounts.total}</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{/* Projects Grid */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-lg font-semibold flex items-center gap-2">
|
|
<TrendingUp className="w-5 h-5" />
|
|
Project Health
|
|
</h2>
|
|
<div className="flex items-center gap-4 text-xs text-muted-foreground">
|
|
<span className="flex items-center gap-1">
|
|
<div className="w-2 h-2 rounded-full bg-green-500" />
|
|
Healthy
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<div className="w-2 h-2 rounded-full bg-yellow-500" />
|
|
At Risk
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<div className="w-2 h-2 rounded-full bg-red-500" />
|
|
Critical
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{projectStats.length === 0 ? (
|
|
<div className="text-center py-12 bg-secondary/20 rounded-lg border border-dashed">
|
|
<FolderKanban className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
|
|
<p className="text-muted-foreground">No projects found</p>
|
|
<p className="text-sm text-muted-foreground mt-1">
|
|
Create projects in the Gantt Board to see them here
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
|
|
{sortedProjects.map((stats) => (
|
|
<ProjectCard key={stats.project.id} stats={stats} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Recent Activity Section */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
{/* Recent Tasks Across All Projects */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="flex items-center gap-2 text-sm">
|
|
<Clock className="w-4 h-4" />
|
|
Recently Updated Tasks
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{(() => {
|
|
const allRecentTasks = projectStats
|
|
.flatMap(p => p.recentTasks.map(t => ({ ...t, projectName: p.project.name, projectColor: p.project.color })))
|
|
.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())
|
|
.slice(0, 5);
|
|
|
|
return allRecentTasks.length > 0 ? (
|
|
<div className="divide-y divide-border">
|
|
{allRecentTasks.map((task) => (
|
|
<div key={task.id} className="flex items-start gap-3 py-3">
|
|
<div className="mt-0.5 shrink-0">{getStatusIcon(task.status)}</div>
|
|
<div className="flex-1 min-w-0 overflow-hidden">
|
|
<Link
|
|
href={getGanttTaskUrl(task.id)}
|
|
target="_blank"
|
|
className="text-sm font-medium block truncate hover:text-primary hover:underline"
|
|
>
|
|
{task.title}
|
|
</Link>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<div
|
|
className="w-2 h-2 rounded-full"
|
|
style={{ backgroundColor: task.projectColor }}
|
|
/>
|
|
<span className="text-xs text-muted-foreground">{task.projectName}</span>
|
|
<span className="text-xs text-muted-foreground">•</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
{formatRelativeTime(task.updatedAt)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<Badge variant="outline" className={`text-xs shrink-0 ${getPriorityColor(task.priority)}`}>
|
|
{task.priority}
|
|
</Badge>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="text-sm text-muted-foreground text-center py-8">
|
|
No recent activity
|
|
</p>
|
|
);
|
|
})()}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Quick Actions */}
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="flex items-center gap-2 text-sm">
|
|
<ArrowRight className="w-4 h-4" />
|
|
Quick Actions
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
<Link href={siteUrls.ganttBoard} target="_blank" className="block">
|
|
<Button variant="outline" className="w-full justify-start h-auto py-3">
|
|
<div className="p-2 rounded-lg bg-blue-500/15 mr-3 shrink-0">
|
|
<ExternalLink className="w-4 h-4 text-blue-500" />
|
|
</div>
|
|
<div className="text-left min-w-0">
|
|
<p className="font-medium text-sm truncate">Open Gantt Board</p>
|
|
<p className="text-xs text-muted-foreground truncate">Manage all projects</p>
|
|
</div>
|
|
</Button>
|
|
</Link>
|
|
|
|
<Link
|
|
href={getGanttTasksUrl({ priority: "urgent,high", scope: "active-sprint" })}
|
|
target="_blank"
|
|
className="block"
|
|
>
|
|
<Button variant="outline" className="w-full justify-start h-auto py-3">
|
|
<div className="p-2 rounded-lg bg-orange-500/15 mr-3 shrink-0">
|
|
<AlertTriangle className="w-4 h-4 text-orange-500" />
|
|
</div>
|
|
<div className="text-left min-w-0">
|
|
<p className="font-medium text-sm truncate">High Priority</p>
|
|
<p className="text-xs text-muted-foreground truncate">Urgent/high in current sprint</p>
|
|
</div>
|
|
</Button>
|
|
</Link>
|
|
|
|
<Link
|
|
href={getGanttTasksUrl({ status: "in-progress", scope: "active-sprint" })}
|
|
target="_blank"
|
|
className="block"
|
|
>
|
|
<Button variant="outline" className="w-full justify-start h-auto py-3">
|
|
<div className="p-2 rounded-lg bg-green-500/15 mr-3 shrink-0">
|
|
<CheckCircle2 className="w-4 h-4 text-green-500" />
|
|
</div>
|
|
<div className="text-left min-w-0">
|
|
<p className="font-medium text-sm truncate">In Progress</p>
|
|
<p className="text-xs text-muted-foreground truncate">Current sprint in-progress tasks</p>
|
|
</div>
|
|
</Button>
|
|
</Link>
|
|
|
|
{activeSprint && (
|
|
<Link href={getGanttSprintUrl(activeSprint.id)} target="_blank" className="block">
|
|
<Button variant="outline" className="w-full justify-start h-auto py-3">
|
|
<div className="p-2 rounded-lg bg-purple-500/15 mr-3 shrink-0">
|
|
<Zap className="w-4 h-4 text-purple-500" />
|
|
</div>
|
|
<div className="text-left min-w-0">
|
|
<p className="font-medium text-sm truncate">Active Sprint</p>
|
|
<p className="text-xs text-muted-foreground truncate">View sprint board</p>
|
|
</div>
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
|
|
<Separator className="my-4" />
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
|
|
<div className="min-w-0">
|
|
<p className="font-medium text-sm">Project Management</p>
|
|
<p className="text-xs text-muted-foreground">
|
|
Mission Control is read-only. Create and edit projects in gantt-board.
|
|
</p>
|
|
</div>
|
|
<Link href={siteUrls.ganttBoard} target="_blank" className="shrink-0">
|
|
<Button variant="secondary" size="sm">
|
|
Go to gantt-board
|
|
<ArrowRight className="w-4 h-4 ml-2" />
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</DashboardLayout>
|
|
);
|
|
}
|