199 lines
7.7 KiB
TypeScript
199 lines
7.7 KiB
TypeScript
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>
|
|
)
|
|
}
|