gantt
This commit is contained in:
Bastien COIGNOUX
198
src/components/MacroCockpitStrip.tsx
Normal file
198
src/components/MacroCockpitStrip.tsx
Normal file
@ -0,0 +1,198 @@
|
||||
import type { StoryGroup } from '../types/jira'
|
||||
import type { DashboardConfig } from '../lib/dashboardConfig'
|
||||
import type { LandingEstimate } from '../lib/executiveLanding'
|
||||
import { computeMacroPipelineHealth } from '../lib/macroTrafficLight'
|
||||
import { assigneeOpenLoadRadar } from '../lib/assigneeRadar'
|
||||
import { countOpenGapsByBadge } from '../lib/functionalGaps'
|
||||
import { calendarDelayVsLastMilestone } from '../lib/scheduleDelay'
|
||||
import { resolveWorkBucketFromIssue } from '../lib/statusBuckets'
|
||||
|
||||
type Props = {
|
||||
groups: StoryGroup[]
|
||||
dashboardCfg: DashboardConfig
|
||||
landing: LandingEstimate
|
||||
finalMilestoneIso: string | null
|
||||
}
|
||||
|
||||
function trafficLightClasses(light: 'green' | 'amber' | 'red'): { ring: string; bg: string; dot: string } {
|
||||
switch (light) {
|
||||
case 'green':
|
||||
return {
|
||||
ring: 'ring-emerald-400/50',
|
||||
bg: 'bg-emerald-500/20',
|
||||
dot: 'bg-emerald-400 shadow-[0_0_14px_rgba(52,211,153,0.7)]',
|
||||
}
|
||||
case 'amber':
|
||||
return {
|
||||
ring: 'ring-amber-400/55',
|
||||
bg: 'bg-amber-500/20',
|
||||
dot: 'bg-amber-400 shadow-[0_0_14px_rgba(251,191,36,0.65)]',
|
||||
}
|
||||
case 'red':
|
||||
return {
|
||||
ring: 'ring-rose-500/60',
|
||||
bg: 'bg-rose-600/25',
|
||||
dot: 'bg-rose-500 shadow-[0_0_16px_rgba(244,63,94,0.75)]',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function MacroCockpitStrip({ groups, dashboardCfg, landing, finalMilestoneIso }: Props) {
|
||||
const macro = computeMacroPipelineHealth(
|
||||
groups,
|
||||
dashboardCfg.statusBuckets,
|
||||
dashboardCfg.laneLabels,
|
||||
dashboardCfg.functionalGaps,
|
||||
)
|
||||
const delay = calendarDelayVsLastMilestone(landing, finalMilestoneIso)
|
||||
const radar = assigneeOpenLoadRadar(
|
||||
groups,
|
||||
dashboardCfg.statusBuckets,
|
||||
dashboardCfg.wipSlotsPerDev,
|
||||
).slice(0, 6)
|
||||
const gaps = countOpenGapsByBadge(groups, dashboardCfg.functionalGaps, dashboardCfg.statusBuckets)
|
||||
|
||||
const openSamples = groups
|
||||
.flatMap((g) =>
|
||||
g.subtasks
|
||||
.filter((st) => {
|
||||
const b = resolveWorkBucketFromIssue(st, dashboardCfg.statusBuckets)
|
||||
return b === 'in_progress' || b === 'blocked'
|
||||
})
|
||||
.map((st) => ({
|
||||
key: st.key,
|
||||
who: st.fields.assignee?.displayName ?? '—',
|
||||
summary: st.fields.summary,
|
||||
})),
|
||||
)
|
||||
.slice(0, 5)
|
||||
|
||||
const cls = trafficLightClasses(macro.light)
|
||||
|
||||
return (
|
||||
<section className="rounded-2xl border border-white/[0.08] bg-gradient-to-br from-slate-950/90 to-slate-900/40 p-4 shadow-[0_12px_48px_rgba(0,0,0,0.35)] backdrop-blur-xl sm:p-5">
|
||||
<div className="mb-3 flex flex-wrap items-center justify-between gap-2">
|
||||
<h2 className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">
|
||||
Cockpit macro — DSI · Projet · PO · Exécution
|
||||
</h2>
|
||||
<span className="text-[10px] text-slate-500">
|
||||
Données = instantané Jira au dernier chargement (Actualiser).
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 lg:grid-cols-12">
|
||||
<div
|
||||
className={`lg:col-span-4 rounded-xl border border-white/10 p-4 ring-2 ring-inset ${cls.ring} ${cls.bg}`}
|
||||
>
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-slate-400">
|
||||
Feux phases (DSI)
|
||||
</p>
|
||||
<div className="mt-2 flex items-start gap-3">
|
||||
<span
|
||||
className={`mt-0.5 h-4 w-4 shrink-0 rounded-full ${cls.dot}`}
|
||||
title={macro.title}
|
||||
aria-hidden
|
||||
/>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-semibold text-white">{macro.title}</p>
|
||||
<p className="mt-1 text-xs leading-relaxed text-slate-300">{macro.detail}</p>
|
||||
{macro.violatingStoryKeys.length > 0 && (
|
||||
<p className="mt-2 font-mono text-[11px] text-rose-200/90">
|
||||
{macro.violatingStoryKeys.join(', ')}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-4 rounded-xl border border-white/10 bg-black/20 p-4">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-slate-400">
|
||||
Jalons & vélocité (Directeur de projet)
|
||||
</p>
|
||||
{delay ? (
|
||||
<p className="mt-2 text-sm font-medium text-amber-100">{delay.message}</p>
|
||||
) : (
|
||||
<p className="mt-2 text-sm text-slate-300">
|
||||
Aucun retard calendaire détecté par rapport au dernier jalon (ou date / vélocité
|
||||
indisponible).
|
||||
</p>
|
||||
)}
|
||||
<p className="mt-2 text-[11px] text-slate-500">
|
||||
{landing.businessDaysToFinish != null
|
||||
? `~${landing.businessDaysToFinish} j. ouvrés restants (sous-tâches), vélocité ajustée effectif / baseline.`
|
||||
: 'Vélocité nulle ou données insuffisantes pour estimer la fin.'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-4 rounded-xl border border-white/10 bg-black/20 p-4">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-slate-400">
|
||||
Écarts fonctionnels (PO)
|
||||
</p>
|
||||
<ul className="mt-2 flex flex-wrap gap-2">
|
||||
{gaps.map((g) => (
|
||||
<li
|
||||
key={g.id}
|
||||
className={`rounded-full px-2.5 py-1 text-[11px] font-medium ring-1 ring-inset ${
|
||||
g.criticalFlow
|
||||
? 'bg-rose-500/15 text-rose-100 ring-rose-400/40'
|
||||
: 'bg-slate-600/30 text-slate-200 ring-slate-500/35'
|
||||
}`}
|
||||
title="Sous-tâches encore ouvertes sur les stories correspondant aux termes configurés."
|
||||
>
|
||||
{g.label}
|
||||
<span className="ml-1 tabular-nums opacity-90">({g.openCount})</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-6 rounded-xl border border-white/10 bg-black/20 p-4">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-slate-400">
|
||||
Radar de charge (Chef de projet)
|
||||
</p>
|
||||
<p className="mt-1 text-[10px] text-slate-500">
|
||||
Plafond WIP : {dashboardCfg.wipSlotsPerDev} sous-tâches ouvertes / personne.
|
||||
</p>
|
||||
<ul className="mt-2 space-y-1.5 text-xs">
|
||||
{radar.length === 0 ? (
|
||||
<li className="text-slate-500">Aucune sous-tâche ouverte.</li>
|
||||
) : (
|
||||
radar.map((r) => (
|
||||
<li
|
||||
key={r.name}
|
||||
className={`flex justify-between gap-2 rounded-lg px-2 py-1 ${
|
||||
r.overload ? 'bg-rose-500/15 text-rose-100' : 'bg-white/[0.04] text-slate-200'
|
||||
}`}
|
||||
>
|
||||
<span className="truncate">{r.name}</span>
|
||||
<span className="shrink-0 tabular-nums font-semibold">
|
||||
{r.openCount}
|
||||
{r.overload ? ' ⚠' : ''}
|
||||
</span>
|
||||
</li>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-6 rounded-xl border border-white/10 bg-black/20 p-4">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-slate-400">
|
||||
En cours (aperçu)
|
||||
</p>
|
||||
<ul className="mt-2 space-y-1.5 text-[11px] text-slate-300">
|
||||
{openSamples.length === 0 ? (
|
||||
<li className="text-slate-500">Aucun ticket « en cours » ou « bloqué ».</li>
|
||||
) : (
|
||||
openSamples.map((x) => (
|
||||
<li key={x.key} className="truncate" title={x.summary}>
|
||||
<span className="font-mono text-cyan-300/90">{x.key}</span>{' '}
|
||||
<span className="text-slate-500">·</span> {x.who}
|
||||
</li>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user