Spaces:
Paused
Paused
File size: 4,255 Bytes
5a81b95 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | import { CheckCircle } from 'lucide-react';
export const MiniSprintProgress = () => (
<div className="h-full flex flex-col gap-1">
<div className="flex items-center justify-between text-[8px]">
<span className="text-muted-foreground">Sprint 14</span>
<span className="text-primary">Day 8/14</span>
</div>
<div className="h-3 bg-secondary rounded-full overflow-hidden flex">
<div className="h-full bg-green-500" style={{ width: '45%' }} />
<div className="h-full bg-blue-500" style={{ width: '20%' }} />
<div className="h-full bg-yellow-500" style={{ width: '15%' }} />
</div>
<div className="flex justify-between text-[6px] text-muted-foreground">
<span>Done: 12</span><span>In Progress: 5</span><span>Todo: 8</span>
</div>
</div>
);
export const MiniBurndown = () => (
<div className="h-full flex flex-col">
<span className="text-[7px] text-muted-foreground mb-1">Burndown</span>
<svg viewBox="0 0 100 50" className="flex-1">
<line x1="0" y1="5" x2="100" y2="45" stroke="hsl(var(--muted-foreground))" strokeWidth="1" strokeDasharray="3" />
<path d="M0,5 L15,8 L30,15 L45,18 L60,28 L75,25 L90,35" fill="none" stroke="hsl(var(--primary))" strokeWidth="2" />
<circle cx="90" cy="35" r="2" fill="hsl(var(--primary))" />
</svg>
<div className="flex justify-between text-[6px] text-muted-foreground">
<span>Start</span><span>Today</span><span>End</span>
</div>
</div>
);
export const MiniTeamCapacity = () => (
<div className="h-full flex flex-col gap-1">
{[
{ name: 'Alice', capacity: 80 },
{ name: 'Bob', capacity: 95 },
{ name: 'Carol', capacity: 60 },
].map(m => (
<div key={m.name} className="flex items-center gap-2 text-[7px]">
<span className="w-8 truncate text-muted-foreground">{m.name}</span>
<div className="flex-1 h-2 bg-secondary rounded-full overflow-hidden">
<div className={`h-full ${m.capacity > 90 ? 'bg-red-400' : m.capacity > 70 ? 'bg-yellow-400' : 'bg-green-400'}`} style={{ width: `${m.capacity}%` }} />
</div>
<span className="w-6 text-right text-primary">{m.capacity}%</span>
</div>
))}
</div>
);
export const MiniMilestones = () => (
<div className="h-full flex items-center">
<div className="flex-1 relative h-2">
<div className="absolute inset-x-0 top-1/2 h-0.5 bg-secondary -translate-y-1/2" />
{[0, 33, 66, 100].map((pos, i) => (
<div key={i} className={`absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-3 h-3 rounded-full border-2 ${i < 2 ? 'bg-primary border-primary' : i === 2 ? 'bg-yellow-400 border-yellow-400' : 'bg-secondary border-muted-foreground'}`} style={{ left: `${pos}%` }}>
{i < 2 && <CheckCircle className="w-full h-full text-primary-foreground" />}
</div>
))}
</div>
</div>
);
export const MiniVelocity = () => (
<div className="h-full flex flex-col">
<span className="text-[7px] text-muted-foreground">Velocity</span>
<div className="flex-1 flex items-end gap-1">
{[28, 32, 25, 38, 35, 42].map((v, i) => (
<div key={i} className="flex-1 flex flex-col items-center gap-0.5">
<div className="w-full bg-primary/70 rounded-t" style={{ height: `${v * 2}%` }} />
<span className="text-[5px] text-muted-foreground">S{i + 9}</span>
</div>
))}
</div>
<div className="text-[7px] text-right text-primary">Avg: 33 pts</div>
</div>
);
export const MiniIssueTracker = () => (
<div className="h-full flex flex-col gap-1">
{[
{ id: 'BUG-42', priority: 'high', title: 'Login crash' },
{ id: 'FEAT-18', priority: 'med', title: 'Dark mode' },
{ id: 'BUG-43', priority: 'low', title: 'Typo fix' },
].map(issue => (
<div key={issue.id} className="flex items-center gap-1 text-[7px] bg-secondary/20 rounded px-1 py-0.5">
<div className={`w-1.5 h-1.5 rounded-full ${issue.priority === 'high' ? 'bg-red-400' : issue.priority === 'med' ? 'bg-yellow-400' : 'bg-blue-400'}`} />
<span className="text-primary font-mono">{issue.id}</span>
<span className="flex-1 truncate text-muted-foreground">{issue.title}</span>
</div>
))}
</div>
);
|